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

最新評(píng)論