CSS混沌初開VIII：側(cè)邊欄友情鏈接
這是本教程的最后一部分，講解如何實現(xiàn)友情鏈接版塊。需要說明的是，這部分我們將把樣式表轉(zhuǎn)換為外聯(lián)式來實現(xiàn)CSS樣式的設(shè)定。
首先是XHTML代碼：
<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
<li><a href="http://stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.simplebits.com/">SimpleBits</a></li>
<li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
<li><a href="http://www.ximicc.com/">Ximicc</a></li>
</ul>
</div>
我們把所有的鏈接放置在一個名為fav的DIV容器中，并將在CSS中定義其width、margin和padding等屬性。欄目標(biāo)題利用H2標(biāo)簽實現(xiàn)，而鏈接鏈表則還是用無序列表ul來實現(xiàn)。
接下來定義favlinks容器的樣式：
#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}
其中定義的三個屬性都比較簡單，你可能會注意到width值與導(dǎo)航菜單的寬度178不相等，原因仍然是padding-left中定義了15px的內(nèi)填充，所以其寬度值應(yīng)該是178-15=163px。如果你對此不是很理解，建議你去參考一些介紹CSS中盒模型原理的文章。
下面是欄目標(biāo)題文字的CSS定義：
#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}
除了設(shè)置文字的字體和顏色之外，padding和margin的定義也是必須的，因為如果不明確指定的話，欄目標(biāo)題和鏈接列表之間的間隔可能會不可預(yù)期，在這里我直接用margin屬性定義了10px的下邊距。
無序列表ul的CSS定義：
#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}
這里的屬性設(shè)置與第五部分教程中實現(xiàn)導(dǎo)航的ul設(shè)置一樣，主要是隱藏了默認(rèn)的小圓點項目符號，并把邊距和填充設(shè)置為0。
為列表中各個鏈接添加圖標(biāo)：
ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}
在XHTML中我們把名為extlinks的class類應(yīng)用在了ul標(biāo)簽上，所以這里用ul.extlinks li的選擇符組合來定義. Extlinks下級中的li元素樣式。圖標(biāo)還是采用背景的方式實現(xiàn)，屬性中為其定義了坐標(biāo)，即Y軸方向下移3px，目的是為了讓圖標(biāo)與其后的鏈接文字實現(xiàn)更好的對齊。Padding中只定義了一個左填充，防止鏈接文字與圖標(biāo)產(chǎn)生重疊。
鏈接樣式的定義：
.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}
.extlinks a:visited {
color: #6F2D47;
text-decoration: none;
border-bottom: 1px dotted #959E79;
}
.extlinks a:hover {
background-color: #C3C9B1;
color: #A5003B;
text-decoration: none;
border-bottom: 1px solid #A5003B;
}
在鼠標(biāo)經(jīng)過的狀態(tài)中，除了背景色外，我們還用邊框?qū)傩远x了一條1px的實線下邊框，相應(yīng)的也就需要設(shè)置doc屬性來消除默認(rèn)的鏈接下劃線。關(guān)于字體的定義不是必須的，因為在li標(biāo)簽的CSS中已經(jīng)體現(xiàn)過了。對訪問之后的鏈接，我們將文字及下邊框的顏色作了細(xì)微的淡化，使其不會那么顯眼，并提示訪問者這個鏈接你已經(jīng)點擊過了。定義鏈接樣式的時候，注意四個鏈接轉(zhuǎn)臺的順序，正確的應(yīng)該是LVHA，否則鼠標(biāo)經(jīng)過等效果可能會不能正常顯示，這里有一種很好很有趣的方法希望能幫你牢記這個順序：LOVE/HATE。
創(chuàng)建外部樣式表
現(xiàn)在所有的界面設(shè)計和頁面構(gòu)建工作已經(jīng)完成了，還剩下最后一項工作。在本教程的學(xué)習(xí)中，你可能會發(fā)現(xiàn)我經(jīng)常使用內(nèi)聯(lián)樣式，事實上在很多人的概念中外部樣式表才是王道，我們應(yīng)該把CSS樣式定義在一個單獨的樣式表文件中，然后與網(wǎng)頁文檔連接起來?，F(xiàn)在我們可以把之前的樣式定義剪切出來，粘貼到一個新文檔中，命名為ximicc.css 。
連接外部樣式表
<link rel="stylesheet" type="text/css" media="screen" href="ximicc.css" />
因為這里的樣式我們只要顯示在電腦屏幕上，所以連接代碼里的media參數(shù)設(shè)置為screen，若需要打印頁面，則把該參數(shù)設(shè)置為print會有更好的打印效果。關(guān)于該參數(shù)更多的設(shè)置，可以 參考這里 。
該系列教程至此結(jié)束，希望大家能真正學(xué)到一點東西。若你對該教程有什么心得或建議，歡迎評論或瀏覽。另外由于水平有限，翻譯的過程中難免有不妥之處，也希望大家多多糾正，西米CC歡迎大家的光臨。

最新評論