成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2364人閱讀

我?guī)е?，你帶著錢，咱們?nèi)ズ赛c(diǎn)飲料吧。

老板久仰你的大名，請(qǐng)你幫忙設(shè)計(jì)一個(gè)網(wǎng)站宣傳他的飲料店

你要制定一個(gè)完美的方案還需要多學(xué)點(diǎn)東西

我先幫你設(shè)計(jì)一下

這是存放網(wǎng)站的文件夾

這是根目錄

 

這是about文件夾

 

這是beverages文件夾

 

存放CSS文件的文件夾(這是外部調(diào)用所以需要一個(gè)CSS文件，我們以前寫的網(wǎng)頁(yè)都是內(nèi)部調(diào)用)

 

存放圖片的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標(biāo)簽覆蓋p標(biāo)簽的繼承，這叫做覆蓋繼承，你會(huì)在瀏覽器里看到en標(biāo)簽顯示的文本有點(diǎn)不一樣*/
15 p.yellowtea
16 {
17     color: orange;
18 }
19 /*
20 用p.yellowtea,這個(gè)對(duì)有yellowtea類名的p標(biāo)簽有作用
21 用.yellowtea也可以，這個(gè)對(duì)所有有yellowtea類名的元素都起作用
22 */
23 p.blueberry{
24     color: blue;
25 }
26 p.cranberry{
27     color: yellow;
28 }

注意：CSS的代碼沒(méi)有style元素，style元素只是把在html中內(nèi)部調(diào)用CSS的媒介而已

接下來(lái)我們看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 = "回到主頁(yè)面">回到主頁(yè)面a>
33 p>
34 body>
35 html>
36

這里包含了新知識(shí)，請(qǐng)仔細(xì)理解和閱讀

以下是它的顯示

   

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 = "回到主頁(yè)面">回到主頁(yè)面a>
34 p>
35 body>
36 html>

以下是它的顯示

 

我們的網(wǎng)站得到了飲料店老板的青睞

而你也學(xué)會(huì)了外部調(diào)用CSS，這樣一來(lái)HTML就更模塊化了

//本系列教程基于《Head First HTML與CSS(第二版)》,此書國(guó)內(nèi)各大購(gòu)物網(wǎng)站皆可購(gòu)買

轉(zhuǎn)載請(qǐng)注明出處  by:M_ZPHr

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

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1298.html

相關(guān)文章

  • #WEB安全基礎(chǔ) : HTML/CSS | 文章索引

    摘要：黑體本系列講解安全所需要的和黑體安全基礎(chǔ)我的第一個(gè)網(wǎng)頁(yè)黑體安全基礎(chǔ)初識(shí)黑體安全基礎(chǔ)初識(shí)標(biāo)簽黑體安全基礎(chǔ)文件夾管理網(wǎng)站黑體安全基礎(chǔ)模塊化黑體安全基礎(chǔ)嵌套列表黑體安全基礎(chǔ)標(biāo)簽拓展和屬性的使用黑體安全基礎(chǔ)嵌套本系列講解WEB安全所需要的HTML和CSS #WEB安全基礎(chǔ) : HTML/CSS | 0x0 我的第一個(gè)網(wǎng)頁(yè) #WEB安全基礎(chǔ) : HTML/CSS | 0x1初識(shí)CSS #WEB安全基...

    EscapedDog 評(píng)論0 收藏0

  • 12個(gè)美麗的網(wǎng)站與受到日出啟發(fā)的配色方案

    摘要：在為項(xiàng)目選擇配色方案時(shí)，有什么提供靈感我打賭你有一些論點(diǎn)和原則。例如，藍(lán)色激發(fā)了信任，被企業(yè)廣應(yīng)用。這就是眾多公司和機(jī)構(gòu)選擇它作為主要原因的原因。綠色用于一切自然和環(huán)保，等等。無(wú)論喜歡與否，顏色都會(huì)影響我們的潛意識(shí)，這是一個(gè)需要考慮的重點(diǎn)。　　在為項(xiàng)目選擇配色方案時(shí)，有什么提供靈感？我打賭你有一些論點(diǎn)和原則。例如，我們都意識(shí)到每種顏色都有其個(gè)性和心理底蘊(yùn)，使其有助于喚起特定的情感。例如，藍(lán)色...

    Aklman 評(píng)論0 收藏0

  • Java設(shè)計(jì)模式之裝飾模式詳解

    摘要：裝飾者模式是動(dòng)態(tài)地將責(zé)任附加到對(duì)象上。然后我們?cè)谧宇愑?jì)算價(jià)格的時(shí)候加上父類中計(jì)算好的配料的價(jià)格。結(jié)果可樂(lè)加冰可樂(lè)加冰加糖在的類庫(kù)中就有很多實(shí)際應(yīng)用到了裝飾模式，比如就可以用來(lái)裝飾，提供更加強(qiáng)大的功能。 裝飾者模式是動(dòng)態(tài)地將責(zé)任附加到對(duì)象上。若要擴(kuò)展功能，裝飾者提供了比繼承更有彈性的替代方案。 假設(shè)我們有一個(gè)需求，是給一家飲料店做一個(gè)計(jì)算各種飲料價(jià)格的功能。聽(tīng)起來(lái)很簡(jiǎn)單，我們創(chuàng)建一個(gè)抽象...

    sewerganger 評(píng)論0 收藏0

  • 一家披薩店與云計(jì)算的“不解之緣”

    摘要：出于對(duì)披薩的熱愛(ài)，克里斯馬修斯開(kāi)了一家餐廳，與他的兄弟蒂姆合作。噩夢(mèng)時(shí)間表即使在早期只有一家店名員工的時(shí)候，蒂姆在發(fā)薪日的時(shí)候也有個(gè)不同的將近考慮因素。蒂姆說(shuō)我們的會(huì)計(jì)是在另一家商店里工作的，我可以在同一時(shí)間和她一起工作，而不必在同一地點(diǎn)。出于對(duì)披薩的熱愛(ài)，克里斯·馬修斯開(kāi)了一家餐廳，與他的兄弟蒂姆合作。為了使花在管理上的時(shí)間更少，他們開(kāi)始尋找基于云技術(shù)的解決方案。 在Forge披薩店...

    princekin 評(píng)論0 收藏0

  • 一家披薩店與云計(jì)算的“不解之緣”

    摘要：出于對(duì)披薩的熱愛(ài)，克里斯馬修斯開(kāi)了一家餐廳，與他的兄弟蒂姆合作。噩夢(mèng)時(shí)間表即使在早期只有一家店名員工的時(shí)候，蒂姆在發(fā)薪日的時(shí)候也有個(gè)不同的將近考慮因素。蒂姆說(shuō)我們的會(huì)計(jì)是在另一家商店里工作的，我可以在同一時(shí)間和她一起工作，而不必在同一地點(diǎn)。 出于對(duì)披薩的熱愛(ài)，克里斯·馬修斯開(kāi)了一家餐廳，與他的兄弟蒂姆合作。為了使花在管理上的時(shí)間更少，他們開(kāi)始尋找基于云技術(shù)的解決方案。在Forge披薩店的管理...

    URLOS 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<