本來(lái)很好的心情讓一個(gè)劣質(zhì)的 D-Link 路由器搞壞了，今天下午剛到實(shí)驗(yàn)室就聽(tīng)說(shuō)路由器因?yàn)閿嚯姛袅?，于是大家就花了一下午時(shí)間配置服務(wù)器，試圖通過(guò)交換機(jī)直接上網(wǎng)。到后來(lái)才明白交換機(jī)其也是很復(fù)雜的，并不僅僅是一個(gè)"大號(hào)的"集線器，要利用昂貴的專業(yè)設(shè)備才能控制，最終只好作罷。
回歸正題吧，上一篇文章 介紹了 HTML 網(wǎng)頁(yè)語(yǔ)言的基本知識(shí)，它們看起來(lái)很簡(jiǎn)單，幾乎無(wú)法想象可以用它們構(gòu)造多姿多彩的博客模板。不錯(cuò)，HTML 標(biāo)簽只是給網(wǎng)頁(yè)上的每部分內(nèi)容做了語(yǔ)義上的描述--這是一個(gè)標(biāo)題，那是一個(gè)段落，圖片，音頻等等--并沒(méi)有提供多少布局和修飾的信息，所以我們還需要更多的知識(shí)才能開(kāi)始修改博客模板的布局。
在解說(shuō)無(wú)聊的網(wǎng)頁(yè)語(yǔ)法之前，還是先來(lái)看一個(gè)實(shí)例性的網(wǎng)頁(yè)，說(shuō)不定您自己就可以發(fā)現(xiàn)其中的規(guī)律。
查看實(shí)際顯示效果
<html>
<head>
<title>這是一個(gè)簡(jiǎn)單的博客模板頁(yè)面</title>
</head>
<body>
<div id="banner" style="width:600px;height:200px;background-color:red;">
<h1>大家好，我也開(kāi)始寫博客啦</h1>
</div>
<div id="left" style="width:400px;background-color:green;float:left">
<h2>博客文章標(biāo)題</h2>
<h3>文章小標(biāo)題</h3>
<p> 今天終于開(kāi)始寫博客了，好高興啊?。∥业拇笞骷磳⒄Q生，敬請(qǐng)關(guān)注~。</p>
<blockquote>有一句話說(shuō)得好：失敗只有一種，那就是半途而廢--</blockquote>
<p> 后面還沒(méi)有想好，還是下次再寫吧！感謝鳳凰衛(wèi)視，感謝 CCTV，感謝蓋茨大叔的暈倒死操作系統(tǒng)。</p>
</div>
<div id="right" style="width:200px;background-color:blue;float:left">
<h3>我的好友列表</h3>
<ul>
<li>傻大木</li>
<li>喬布什</li>
<li>芙蓉姐夫</li>
</ul>
</div>
</body>
</html>
點(diǎn)擊查看實(shí)際效果，您將看到一個(gè)簡(jiǎn)單的兩欄式模板，最上方還有一個(gè) Banner。什么是 Banner？把這東西當(dāng)作您博客的招牌就好啦，就像街頭店面為了吸引注意而掛的大牌子一樣。 在這段網(wǎng)頁(yè)代碼中出現(xiàn)了一些新玩意，一個(gè)是 <div> 標(biāo)簽，另外就是 id="xxx" 和 style="xxx"。毫無(wú)疑問(wèn)，是這些代碼為網(wǎng)頁(yè)添加了布局功能，可以把 div 理解為一張可以伸縮的長(zhǎng)方形"紙板"，您可以控制它的大小和顏色等屬性以滿足需要，另外還可以創(chuàng)建多個(gè) div 以便實(shí)現(xiàn) Banner 和文字分欄等布局。
您也許會(huì)奇怪，瀏覽器怎么知道該怎么擺放這些 div 呢？這確實(shí)很令人迷惑，您分析了 style 這部分內(nèi)容，發(fā)現(xiàn)它可以控制 div 的尺寸和顏色，但是并沒(méi)有指定 div 的擺放位置。另外 float:left 這段代碼也令人琢磨不透，難道這里面有什么玄機(jī)？不錯(cuò)，正是因?yàn)橛辛?float:left 這段代碼，Banner 下面的兩個(gè) div 才能一左一右地排列整齊，因?yàn)?float 的意思是 div 自身向左漂移，并允許它后面的 div 漂移到其右側(cè)，而不是被它擋在腳底下。事實(shí)上，網(wǎng)頁(yè)上的元素默認(rèn)都是從上排到下的，沒(méi)有前方 div 的允許，后方的 div 是無(wú)法跟前面的 div 站一排的，這也是 Banner 能夠高高在上不被后來(lái)者"搶占地盤"的原因。
那么 id="xxx" 又是做什么用的，是不是僅僅為了給 div 取個(gè)名字呢？我認(rèn)為您真是非常聰明，就是這個(gè)理由。有了名字我們才好控制它啊，才好告訴瀏覽器我們需要修改哪個(gè) div 的屬性啊。此外，您在查看網(wǎng)頁(yè)源代碼的時(shí)候也許還看見(jiàn)過(guò) class="xxx" 的代碼，這里 class 表示的是一類元素，與 id 不同的是，網(wǎng)頁(yè)上可以有多個(gè) div 元素都用同樣的 class="red-paper" 命名，這樣就可以一次控制多個(gè) div。反過(guò)來(lái)說(shuō)，id 是不允許重復(fù)的，一個(gè)網(wǎng)頁(yè)里不能有兩個(gè) div 都叫做 id="number-one"。
細(xì)心的讀者還會(huì)有疑問(wèn)，style 看起來(lái)很有趣哦，但是它好像有一種特殊的語(yǔ)法規(guī)則，不知道除了 width, height, background-color, float 之外還有什么可以用的修飾詞呢？我在這里非常興奮地告訴您，這個(gè) style 將是制作博客模板過(guò)程中最有趣的地方了，很多修飾的需求都可以通過(guò)簡(jiǎn)單的 style 代碼搞定。如果非要問(wèn)這個(gè)東西叫什么的話，我會(huì)告訴您它叫做 CSS 樣式表，沒(méi)有英文縮寫說(shuō)明，知道也不告訴您，因?yàn)槲易詈抻⑽目s寫！
延伸閱讀：CSS2 中文手冊(cè) by 蘇沈小雨，CSS2 中文手冊(cè)電子版，同步預(yù)覽 CSS 樣式表顯示效果的小工具
聯(lián)系客服
