中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

CSS混沌初開VIII：側(cè)邊欄友情鏈接

這是本教程的最后一部分，講解如何實現(xiàn)友情鏈接版塊。需要說明的是，這部分我們將把樣式表轉(zhuǎn)換為外聯(lián)式來實現(xiàn)CSS樣式的設定。

首先是XHTML代碼：

<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
    <li><a >Stopdesign</a></li>
    <li><a >SimpleBits</a></li>
    <li><a >Mezzoblue</a></li>
    <li><a >Ximicc</a></li>
</ul>
</div>

我們把所有的鏈接放置在一個名為fav的DIV容器中，并將在CSS中定義其width、margin和padding等屬性。欄目標題利用H2標簽實現(xiàn)，而鏈接鏈表則還是用無序列表ul來實現(xiàn)。

接下來定義favlinks容器的樣式：

#favlinks {
    width: 163px;
    padding-left: 15px;
    margin-top: 10px;
}

其中定義的三個屬性都比較簡單，你可能會注意到width值與導航菜單的寬度178不相等，原因仍然是padding-left中定義了15px的內(nèi)填充，所以其寬度值應該是178-15=163px。如果你對此不是很理解，建議你去參考一些介紹CSS中盒模型原理的文章。

下面是欄目標題文字的CSS定義：

#favlinks h2 {
    font: normal 16px Georgia, Times New Roman, Times, serif;
    color: #5C604D;
    margin: 0 0 10px 0;
    padding: 0;
}

除了設置文字的字體和顏色之外，padding和margin的定義也是必須的，因為如果不明確指定的話，欄目標題和鏈接列表之間的間隔可能會不可預期，在這里我直接用margin屬性定義了10px的下邊距。

無序列表ul的CSS定義：

#favlinks ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

這里的屬性設置與第五部分教程中實現(xiàn)導航的ul設置一樣，主要是隱藏了默認的小圓點項目符號，并把邊距和填充設置為0。

為列表中各個鏈接添加圖標：

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類應用在了ul標簽上，所以這里用ul.extlinks li的選擇符組合來定義. Extlinks下級中的li元素樣式。圖標還是采用背景的方式實現(xiàn)，屬性中為其定義了坐標，即Y軸方向下移3px，目的是為了讓圖標與其后的鏈接文字實現(xiàn)更好的對齊。Padding中只定義了一個左填充，防止鏈接文字與圖標產(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;
}

在鼠標經(jīng)過的狀態(tài)中，除了背景色外，我們還用邊框?qū)傩远�義了一條1px的實線下邊框，相應的也就需要設置doc屬性來消除默認的鏈接下劃線。關于字體的定義不是必須的，因為在li標簽的CSS中已經(jīng)體現(xiàn)過了。對訪問之后的鏈接，我們將文字及下邊框的顏色作了細微的淡化，使其不會那么顯眼，并提示訪問者這個鏈接你已經(jīng)點擊過了。定義鏈接樣式的時候，注意四個鏈接轉(zhuǎn)臺的順序，正確的應該是LVHA，否則鼠標經(jīng)過等效果可能會不能正常顯示，這里有一種很好很有趣的方法希望能幫你牢記這個順序：LOVE/HATE。

點擊瀏覽效果

創(chuàng)建外部樣式表

現(xiàn)在所有的界面設計和頁面構(gòu)建工作已經(jīng)完成了，還剩下最后一項工作。在本教程的學習中，你可能會發(fā)現(xiàn)我經(jīng)常使用內(nèi)聯(lián)樣式，事實上在很多人的概念中外部樣式表才是王道，我們應該把CSS樣式定義在一個單獨的樣式表文件中，然后與網(wǎng)頁文檔連接起來�，F(xiàn)在我們可以把之前的樣式定義剪切出來，粘貼到一個新文檔中，命名為ximicc.css 。

連接外部樣式表

<link rel="stylesheet" type="text/css" media="screen" href="ximicc.css" />

因為這里的樣式我們只要顯示在電腦屏幕上，所以連接代碼里的media參數(shù)設置為screen，若需要打印頁面，則把該參數(shù)設置為print會有更好的打印效果。關于該參數(shù)更多的設置，可以 參考這里 。

該系列教程至此結(jié)束，希望大家能真正學到一點東西。若你對該教程有什么心得或建議，歡迎評論或瀏覽。另外由于水平有限，翻譯的過程中難免有不妥之處，也希望大家多多糾正，西米CC歡迎大家的光臨。

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2864629-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2008/5893.asp　

出處：藍色理想
責任編輯：bluehearts

上一頁 頁腳的構(gòu)建 下一頁

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。