首页 > > 网页制作 > css >

#WEB安全基础 : HTML/CSS | 0x9美丽的饮料店

2019-01-21 02:38:04来源：博客园阅读 ()

我带着你，你带着钱，咱们去喝点饮料吧。

老板久仰你的大名，请你帮忙设计一个网站宣传他的饮料店

你要制定一个完美的方案还需要多学点东西

我先帮你设计一下

这是存放网站的文件夹

这是根目录

这是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 refershing
16 <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 our
20 <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.yellowtea
16 {
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 mi
13 </p>
14 <p>
15 Continue on 305 - go 12 mi
16 </p>
17 <p>
18 Turn right at Structure A ve N - go 0.6 mi
19 </p>
20 <p>
21 Turn right and head toward Structure A ve N - go 0.0 mi
22 </p>
23 <p>
24 Turn right at Structure A ve N - go 0.7 mi
25 </p>
26 <p>
27 Continue on Structure A ve S - go 0.2 mi
28 </p>
29 <p>
30 Turn right at SW Persebtation Way - go 0.0 mi
31 </p>
32 <p>
33 <a href = "../index.html" title = "回到主页面">回到主页面</a>
34 </p>
35 </body>
36 </html>