CSS實(shí)例：ULli打造CSS橫向菜單藍(lán)色地平線_DIV+CSS實(shí)例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

我們發(fā)現(xiàn)了一些問題，這些菜單的鏈接相距太遠(yuǎn)了。而且瀏覽器窗口有一定距離的空白，更重要的是寬度問題。我們今天就來解決這些問題制作“藍(lán)色地平線”。
　　HTML代碼與前面的一樣，我們就不再重復(fù)了。我們看CSS代碼。

示例代碼 [www.hl5o.cn]

* {
margin:0;
padding:0;
}
#nav {
background:#06c;
float:left;
width:100%;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:5px 12px;
color:#fff;
text-decoration: none;
background:#06c;
border-right: 1px solid #fff;
}
#nav li a:hover {
background:#060;
}

　　首先是整體布局聲明。利用通配符“*”表示在不非凡聲明的情況下，默認(rèn)所有元素的邊距及填充均為零。
　　我們設(shè)置UL無序列表nav的背景色為#06c，向左浮動，寬度是100%。這兩段代碼定義以后，我們的菜單就能緊靠著瀏覽器窗口了，并且它的寬度是100%。
　　菜單的列表項(xiàng)li定義為display:inline;內(nèi)聯(lián)（行內(nèi)）將li限制在一行來顯示及設(shè)置列表項(xiàng)預(yù)設(shè)標(biāo)記為無；
　　我們接著往下看鏈接區(qū)域的代碼意義，link、visited狀態(tài)：
　　鏈接元素向左浮動，填充上下為5px、左右為12px。
　　文字顏色為白色，去除鏈接下劃線。背景色#06c與上面的相同。
　　我們定義了右邊框線：1px、實(shí)線、白色#fff。這一句很重要，它明確的劃分了菜單鏈接之間的距離。這一句話是縮下的形式。
　　完整的寫應(yīng)該是：（關(guān)于更多縮寫代碼知識請參考MB5U.com的其它文章）

示例代碼 [www.hl5o.cn]

border-right-width:1px;
border-right-style:solid;
border-right-color:#fff;

　　我們的這個菜單的編碼工作完成了，看最終的效果：