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

程序员文章站 2022-05-20 19:32:21

我带着你，你带着钱，咱们去喝点饮料吧。老板久仰你的大名，请你帮忙设计一个网站宣传他的饮料店你要制定一个完美的方案还需要多学点东西我先帮你设计一下这是存放网站的文件夹这是根目录这是about文件夹这是beverages文件夹存放CSS文件的文件夹(这是外部调用所以需要一个CSS文件，我 ......

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

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

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

我先帮你设计一下

这是存放网站的文件夹

这是根目录

这是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>

以下是它的显示