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

番茄西红柿发布于2019-04-23 11:53 / 2300人阅读

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

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

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

我先帮你设计一下

这是存放网站的文件夹

这是根目录

这是about文件夹

这是beverages文件夹

存放CSS文件的文件夹(这是外部调用所以需要一个CSS文件，我们以前写的网页都是内部调用)

存放图片的images文件夹

首先，我要展示我写的index.html

以下是代码

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset = "utf-8">
 5 <title>Head First Loungetitle>
 6 <link type = "text/css" rel = "stylesheet" href = "CSSdom/lounge.css">
 7 
 8 head>
 9 <body>
10 <h1>Welcome to the New and Impproved Head First Loungeh1>
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">elixirsa>
17 p>
18 <h2>Directionsh2>
19 <p>Youll 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 directionsa>
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 Elixirstitle>
 6 head>
 7 <link type = "text/css" rel = "stylesheet" href = "../CSSdom/lounge.css">
 8 
 9 <body>
10 <h1>Our Elixirsh1>
11 <h2>Yellow Tea Coolerh2>
12 <img src = "../images/yellow.jpg" width = "100" height = "100">        
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 Concentrationh2>
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 Elixirh2>
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 Blasth2>
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

这里包含了新知识，请仔细理解和阅读

以下是它的显示

directions.html的代码

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset = "utf-8">
 5 <title>Head First Lounge Directionstitle>
 6 head>
 7 <link type = "text/css" rel = "stylesheet" href = "../CSSdom/lounge.css">
 8 
 9 <body>
10 <h1>Directionsh1>
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>

以下是它的显示

我们的网站得到了饮料店老板的青睐

而你也学会了外部调用CSS，这样一来HTML就更模块化了

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处 by:M_ZPHr

最后修改日期：2019-01-17

云服务器 GPU云服务器 html+css基础最美丽的编程语言常见的web安全漏洞 web服务器面临的安全威胁

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1298.html

#WEB安全基础 : HTML/CSS | 文章索引

摘要：黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

EscapedDog 2019-04-23 11:53 评论0 收藏0
12个美丽的网站与受到日出启发的配色方案

摘要：在为项目选择配色方案时，有什么提供灵感我打赌你有一些论点和原则。例如，蓝色激发了信任，被企业广应用。这就是众多公司和机构选择它作为主要原因的原因。绿色用于一切自然和环保，等等。无论喜欢与否，颜色都会影响我们的潜意识，这是一个需要考虑的重点。　　在为项目选择配色方案时，有什么提供灵感？我打赌你有一些论点和原则。例如，我们都意识到每种颜色都有其个性和心理底蕴，使其有助于唤起特定的情感。例如，蓝色...

Aklman 2019-04-23 13:13 评论0 收藏0
Java设计模式之装饰模式详解

摘要：装饰者模式是动态地将责任附加到对象上。然后我们在子类计算价格的时候加上父类中计算好的配料的价格。结果可乐加冰可乐加冰加糖在的类库中就有很多实际应用到了装饰模式，比如就可以用来装饰，提供更加强大的功能。装饰者模式是动态地将责任附加到对象上。若要扩展功能，装饰者提供了比继承更有弹性的替代方案。假设我们有一个需求，是给一家饮料店做一个计算各种饮料价格的功能。听起来很简单，我们创建一个抽象...

sewerganger 2019-08-15 15:25 评论0 收藏0
一家披萨店与云计算的“不解之缘”

摘要：出于对披萨的热爱，克里斯马修斯开了一家餐厅，与他的兄弟蒂姆合作。噩梦时间表即使在早期只有一家店名员工的时候，蒂姆在发薪日的时候也有个不同的将近考虑因素。蒂姆说我们的会计是在另一家商店里工作的，我可以在同一时间和她一起工作，而不必在同一地点。出于对披萨的热爱，克里斯·马修斯开了一家餐厅，与他的兄弟蒂姆合作。为了使花在管理上的时间更少，他们开始寻找基于云技术的解决方案。在Forge披萨店...

princekin 2019-04-25 18:50 评论0 收藏0
一家披萨店与云计算的“不解之缘”

摘要：出于对披萨的热爱，克里斯马修斯开了一家餐厅，与他的兄弟蒂姆合作。噩梦时间表即使在早期只有一家店名员工的时候，蒂姆在发薪日的时候也有个不同的将近考虑因素。蒂姆说我们的会计是在另一家商店里工作的，我可以在同一时间和她一起工作，而不必在同一地点。出于对披萨的热爱，克里斯·马修斯开了一家餐厅，与他的兄弟蒂姆合作。为了使花在管理上的时间更少，他们开始寻找基于云技术的解决方案。在Forge披萨店的管理...

URLOS 2019-04-25 17:48 评论0 收藏0