博客模板布局的基本知識收藏此頁到365KeyPublished on 08/27,2006
本來很好的心情讓一個劣質(zhì)的 D-Link 路由器搞壞了，今天下午剛到實(shí)驗(yàn)室就聽說路由器因?yàn)閿嚯姛袅?，于是大家就花了一下午時間配置服務(wù)器，試圖通過交換機(jī)直接上網(wǎng)。到后來才明白交換機(jī)其也是很復(fù)雜的，并不僅僅是一個"大號的"集線器，要利用昂貴的專業(yè)設(shè)備才能控制，最終只好作罷。 回歸正題吧，上一篇文章 介紹了 HTML 網(wǎng)頁語言的基本知識，它們看起來很簡單，幾乎無法想象可以用它們構(gòu)造多姿多彩的博客模板。不錯，HTML 標(biāo)簽只是給網(wǎng)頁上的每部分內(nèi)容做了語義上的描述--這是一個標(biāo)題，那是一個段落，圖片，音頻等等--并沒有提供多少布局和修飾的信息，所以我們還需要更多的知識才能開始修改博客模板的布局。 在解說無聊的網(wǎng)頁語法之前，還是先來看一個實(shí)例性的網(wǎng)頁，說不定您自己就可以發(fā)現(xiàn)其中的規(guī)律。
點(diǎn)擊查看實(shí)際效果，您將看到一個簡單的兩欄式模板，最上方還有一個 Banner。什么是 Banner？把這東西當(dāng)作您博客的招牌就好啦，就像街頭店面為了吸引注意而掛的大牌子一樣。 在這段網(wǎng)頁代碼中出現(xiàn)了一些新玩意，一個是 <div> 標(biāo)簽，另外就是 id="xxx" 和 style="xxx"。毫無疑問，是這些代碼為網(wǎng)頁添加了布局功能，可以把 div 理解為一張可以伸縮的長方形"紙板"，您可以控制它的大小和顏色等屬性以滿足需要，另外還可以創(chuàng)建多個 div 以便實(shí)現(xiàn) Banner 和文字分欄等布局。 您也許會奇怪，瀏覽器怎么知道該怎么擺放這些 div 呢？這確實(shí)很令人迷惑，您分析了 style 這部分內(nèi)容，發(fā)現(xiàn)它可以控制 div 的尺寸和顏色，但是并沒有指定 div 的擺放位置。另外 float:left 這段代碼也令人琢磨不透，難道這里面有什么玄機(jī)？不錯，正是因?yàn)橛辛?float:left 這段代碼，Banner 下面的兩個 div 才能一左一右地排列整齊，因?yàn)?float 的意思是 div 自身向左漂移，并允許它后面的 div 漂移到其右側(cè)，而不是被它擋在腳底下。事實(shí)上，網(wǎng)頁上的元素默認(rèn)都是從上排到下的，沒有前方 div 的允許，后方的 div 是無法跟前面的 div 站一排的，這也是 Banner 能夠高高在上不被后來者"搶占地盤"的原因。 那么 id="xxx" 又是做什么用的，是不是僅僅為了給 div 取個名字呢？我認(rèn)為您真是非常聰明，就是這個理由。有了名字我們才好控制它啊，才好告訴瀏覽器我們需要修改哪個 div 的屬性啊。此外，您在查看網(wǎng)頁源代碼的時候也許還看見過 class="xxx" 的代碼，這里 class 表示的是一類元素，與 id 不同的是，網(wǎng)頁上可以有多個 div 元素都用同樣的 class="red-paper" 命名，這樣就可以一次控制多個 div。反過來說，id 是不允許重復(fù)的，一個網(wǎng)頁里不能有兩個 div 都叫做 id="number-one"。 細(xì)心的讀者還會有疑問，style 看起來很有趣哦，但是它好像有一種特殊的語法規(guī)則，不知道除了 width, height, background-color, float 之外還有什么可以用的修飾詞呢？我在這里非常興奮地告訴您，這個 style 將是制作博客模板過程中最有趣的地方了，很多修飾的需求都可以通過簡單的 style 代碼搞定。如果非要問這個東西叫什么的話，我會告訴您它叫做 CSS 樣式表，沒有英文縮寫說明，知道也不告訴您，因?yàn)槲易詈抻⑽目s寫！
|
|
|
