#WEB安全基礎 : HTML/CSS | 0x9美麗的飲料店

番茄西紅柿發布于2019-04-23 11:53 / 2301人閱讀

我帶著你，你帶著錢，咱們去喝點飲料吧。

老板久仰你的大名，請你幫忙設計一個網站宣傳他的飲料店

你要制定一個完美的方案還需要多學點東西

我先幫你設計一下

這是存放網站的文件夾

這是根目錄

這是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服務器面臨的安全威脅

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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