我带着你，你带着钱，咱们去喝点饮料吧。
老板久仰你的大名，请你帮忙设计一个网站宣传他的饮料店
你要制定一个完美的方案还需要多学点东西
我先帮你设计一下
这是存放网站的文件夹
这是根目录
这是about文件夹
这是beverages文件夹
存放CSS文件的文件夹(这是外部调用所以需要一个CSS文件，我们以前写的网页都是内部调用)
存放图片的images文件夹
首先，我要展示我写的index.html
以下是代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Head First Lounge</title> 6 <link type = "text/css" rel = "stylesheet" href = "CSSdom/lounge.css"> 7 <!--link标签用于调用外部css，type是文件类型这里是层叠样式表(也就是CSS)，rel是html文件所链接的文件的关系，这里是链接到一个样式表--> 8 </head> 9 <body>10 <h1>Welcome to the New and Impproved Head First Lounge</h1>11 <img src = "images/drinks.jpg" alt ="果汁" title = "果汁">12 <p>13 A game of two of <em>Dance Dance Revolution.</em>14 </p>15 <p>Join us any evening for refershing16 <a href = "beverages/elixir.html" title ="elixirs" target = "_blank">elixirs</a>17 </p>18 <h2>Directions</h2>19 <p>You‘ll find us right the center of downtown Webbille. If you need help finding us, check out our20 <a href = "about/directions.html" title = "directions" target = "_blank">detailes directions</a>21 . Come join us!22 </p>23 </body>24 </html>
link元素所引用的文件就是CSSdom文件夹里的lounge.css
它的代码为
1 h1,h2{ 2 ????font-family: sans-serif; 3 ????color: gray; 4 } 5 h1{ 6 ????border-bottom: 1px solid black; 7 } 8 p{ 9 ????font-family: sans-serif;10 ????color: maroon;11 }12 em{13 ????font-family: serif; ???????/*我是CSS的注释，而且我是多行注释*/14 } ???????????????????????????/*用em标签覆盖p标签的继承，这叫做覆盖继承，你会在浏览器里看到en标签显示的文本有点不一样*/15 p.yellowtea16 {17 ????color: orange;18 }19 /*20 用p.yellowtea,这个对有yellowtea类名的p标签有作用21 用.yellowtea也可以，这个对所有有yellowtea类名的元素都起作用22 */23 p.blueberry{24 ????color: blue;25 }26 p.cranberry{27 ????color: yellow;28 }注意：CSS的代码没有style元素，style元素只是把在html中内部调用CSS的媒介而已
接下来我们看elixir.html
这是它的代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Head First Lounge Elixirs</title> 6 </head> 7 <link type = "text/css" rel = "stylesheet" href = "../CSSdom/lounge.css"> 8 <!--link标签用于调用外部css，type是文件类型这里是层叠样式表(也就是CSS)，rel是html文件所链接的文件的关系，这里是链接到一个样式表--> 9 <body>10 <h1>Our Elixirs</h1>11 <h2>Yellow Tea Cooler</h2>12 <img src = "../images/yellow.jpg" width = "100" height = "100"> ???????<!--../是父目录，width是图片长度，height是图片宽度-->13 <p class = "yellowtea">14 Chock full of vitamins and mineral, this elixir comblines the herlthful benefits of yellow tea with a twist of chamorimile biossoms and ginger root.15 </p>16 <h2>Resberry Ice Concentration</h2>17 <img src = "../images/red.jpg" width = "100" height = "100">18 <p>19 Concentration resberry juice grass, citrus peel and roschips, this icy drink will mack your mind feel clear and crisp.20 </p>21 <h2>Blueberry Bliss Elixir</h2>22 <img src = "../images/blue.jpg" width = "100" height = "100">23 <p class = "blueberry">24 Blueberry and chreey essence mixed into a base of elderflower herb tea will put you in a relexd state of bliss in no time.25 </p>26 <h2>Cranberry Antioxdant Blast</h2>27 <img src = "../images/lightyellow.jpg" width = "100" height = "100">28 <p class = "cranberry">29 Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.30 </p>31 <p>32 <a href = "../index.html" title = "回到主页面">回到主页面</a>33 </p>34 </body>35 </html>36 <!--元素可以定义多个类,如:37 <p class = "greenberry yellowberry bluwberry"></p>38 -->
这里包含了新知识，请仔细理解和阅读
以下是它的显示
directions.html的代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Head First Lounge Directions</title> 6 </head> 7 <link type = "text/css" rel = "stylesheet" href = "../CSSdom/lounge.css"> 8 <!--link标签用于调用外部css，type是文件类型这里是层叠样式表(也就是CSS)，rel是html文件所链接的文件的关系，这里是链接到一个样式表--> 9 <body>10 <h1>Directions</h1>11 <p>12 Take the 305 S exit to Webville - go 0.4 mi13 </p>14 <p>15 Continue on 305 - go 12 mi16 </p>17 <p>18 Turn right at Structure A ve N - go 0.6 mi19 </p>20 <p>21 Turn right and head toward Structure A ve N - go 0.0 mi22 </p>23 <p>24 Turn right at Structure A ve N - go 0.7 mi25 </p>26 <p>27 Continue on Structure A ve S - go 0.2 mi28 </p>29 <p>30 Turn right at SW Persebtation Way - go 0.0 mi31 </p>32 <p>33 <a href = "../index.html" title = "回到主页面">回到主页面</a>34 </p>35 </body>36 </html>
以下是它的显示
我们的网站得到了饮料店老板的青睐
而你也学会了外部调用CSS，这样一来HTML就更模块化了
//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买
转载请注明出处 by:M_ZPHr
最后修改日期：2019-01-17
#WEB安全基础 : HTML/CSS | 0x9美丽的饮料店
原文地址：https://www.cnblogs.com/MZPHr/p/10281693.html