關(guān)于CSS應(yīng)該了解的最基本的東西已經(jīng)講過(guò)了，從這次開(kāi)始，通過(guò)一個(gè)練習(xí)來(lái)講解HTML和CSS的更多運(yùn)用。
首先在上一次的基礎(chǔ)上繼續(xù)完善網(wǎng)站，主要是針對(duì)主頁(yè)lounge進(jìn)行。先給頁(yè)面添加一些新內(nèi)容。代碼如下：
<!doctype html><html> <head> <meta charset="utf-8"> <title>Head First Lounge</title> <link type="text/css" rel="stylesheet" href="lounge.css"> </head> <body> <p> <img src="images/logo.gif" alt="Head First Lounge"> </p> <h1>Welcome to the New and ImPRoved Head First Lounge</h1> <p> The Head First Lounge is, no doubt, the biggest trendsetter in Webville. Stop in to sample the eclectic offering of elixirs, teas, and coffees, or, stay a bit longer and enjoy the multicultural culinary menu that combines a harmony of taste, texture, and color with the best in fresh and healthy ingredients. </p> <p> During your stay at the lounge, you'll enjoy a smooth mixture of ambient and mystic sounds, filling the lounge and adding an extra dimension to your dining experience. The decor surrounds you with the relaxing sentiments of sights from eras past. And, don't forget, the lounge offers free wireless access to the Internet, so bring your laptop. </p> <p> Our guarantee: at the lounge, we're committed to providing you, our guest, with an exceptional experience every time you visit. Whether you're just stopping by to check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us. </p> <p> But that's not all; at night, join us in the backroom as our resident DJ spins a choice selection of trance and drum&bass beats across our spacious tiki-themed dance floor. Or just hang out in one of our comfy white vinyl booths at the dance bar. You can have your elixirs delivered from the main lounge right to the dance floor. If you've had enough of the beat, just head back to the lounge area to relax. And, no matter where you find yourself in the lounge, you'll always be connected with our wireless Internet access. </p> <p> Now that you've experienced the lounge <em>virtually</em>, isn't it time to check us out <em>for real</em>? We're located right in the heart of Webville, and we've create some <a href="about/directions.html" title="Detailed Directions to the Lounge">detailed directions</a> to get you here in record time. No reservations necessary; come and join us anytime. </p> <h2>Weekly Elixir Specials</h2> <p> <img src="images/yellow.gif" alt="Lemon Breeze Elixir"> </p> <h3>Lemon Breeze</h3> <p> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night. </p> <p> <img src="images/chai.gif" alt="Chai Chiller Elixir"> </p> <h3>Chai Chiller</h3> <p> Not your traditional chai, this elixir mixes maté with chai spices and adds an extra chocolate kick for a caffeinated taste sensation on ice. </p> <p> <img src="images/black.gif" alt="Black Brain Brew Elixir"> </p> <h3>Black Brain Brew</h3> <p> Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a touch of espresso. Your brain will thank you for the boost. </p> <p> Join us any evening for these and all our other wonderful <a href="beverages/elixir.html" title="Head First Lounge Elixirs">elixirs</a>. </p> <h2>What's playing at the Lounge</h2> <p> We're frequently asked about the music we play at the lounge, and no wonder, it's great stuff. Just for you, we keep a list here on the site, updated weekly. Enjoy. </p> <ul> <!--在網(wǎng)頁(yè)中增加了一個(gè)無(wú)序列表<ul>（Unorder List與之相對(duì)的是有序列表<ol> Order List--> <li>Buddha Bar, Claude Challe</li> <!--<li>為列表元素List Item）--> <li>When It Falls, Zero 7</li> <li>Earth 7, L.T.J Bukem</li> <li>Le Roi Est Mort, Vive Le Roi!, Enigma</li> <li>Music For Airports, Brian Eno</li> </ul> <p> © 2012, Head First Lounge<br> All trademarks and registered trademarks appearing on this site are the property of their respective owners. </p> </body><html>lounge.html代碼這次內(nèi)容可變化了不少，可以說(shuō)是大換血。現(xiàn)在網(wǎng)頁(yè)不但有了自己的logo，文字內(nèi)容也分為了四部分：主頁(yè)介紹一直都有（不過(guò)內(nèi)容增加了不少）；下面又添加了一個(gè)飲料的介紹；第三部分增加了一個(gè)列表（這個(gè)是HTML的新內(nèi)容）；最后是頁(yè)腳部分，這里包含了版權(quán)聲明信息。
內(nèi)容做了改變，網(wǎng)頁(yè)的外觀和配色也隨之logo的加入做了重新設(shè)計(jì)，相應(yīng)的CSS如下：
body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; /*設(shè)置了多種備用字體，以適應(yīng)不同的客戶系統(tǒng)*/ line-height: 1.6em; /*設(shè)置了1.6倍的行高*/}h1,h2 { color: #007e7e; /*與logo顏色一致的顏色*/}h1 { font-size: 150%; /*內(nèi)容字體的150%大*/}h2 { font-size: 130%;}lounge.css代碼經(jīng)過(guò)這些修改以后網(wǎng)頁(yè)效果如圖：
先來(lái)講一個(gè)知識(shí)點(diǎn)，列表。他又分為兩個(gè)種類，有序列表<ol>，order list；無(wú)序列表<ul>，unorder list。他們都在內(nèi)容中嵌套列表項(xiàng)<li>，list item。所謂有序列表是指其中的列表項(xiàng)是以1、2、3...的序號(hào)開(kāi)頭的，而無(wú)序列表則是以點(diǎn)號(hào)（如上圖）或者其他圖形符號(hào)開(kāi)頭。
網(wǎng)頁(yè)中還有一個(gè)“?”符號(hào)（頁(yè)腳聲明版權(quán)信息處），在HTML代碼中他是以“©”表示的，這種表示特殊字符的方法叫做字符實(shí)體，通常用他來(lái)表示一些鍵盤上沒(méi)有的字符，或者有特殊用途的字符。例如：“<”“>”分別用“<”、“>”表示，因?yàn)樵贖TML中“<”“>”用來(lái)標(biāo)識(shí)元素，再作為內(nèi)容出現(xiàn)會(huì)引發(fā)歧義。關(guān)于字符實(shí)體可以通過(guò)http://www.Vevbs.com/tags/ref_entities.asp和http://www.unicode.org/charts 進(jìn)行查詢。
現(xiàn)在，網(wǎng)頁(yè)中HTML的內(nèi)容已經(jīng)充實(shí)完了，但我們最終要達(dá)到的效果如下圖：
看來(lái)還差得遠(yuǎn)，需要通過(guò)CSS來(lái)改變網(wǎng)頁(yè)的外觀。下一次我們就來(lái)進(jìn)行這些操作。
新聞熱點(diǎn)
疑難解答
圖片精選
