用CSS手寫導(dǎo)航條沒有任何圖片附效果圖

發(fā)布時(shí)間：2014-07-23 09:44:50 作者：佚名

我要評(píng)論

本節(jié)主要介紹了用CSS手寫導(dǎo)航條，此導(dǎo)航條沒有任何圖片，在文末可以看到效果圖

第一步，我們新建一個(gè)my.html文件，填寫內(nèi)容如下，這個(gè)html文件直到最后都不用動(dòng)了，它就是這些內(nèi)容：

CSS Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="xin.css">
</head>
<body>
<div class = "nav">
<ul>
<li><a href="#">辛星PHP</a></li>
<li><a href="#">辛星Python</a></li>
<li><a href="#">辛星CSS</a></li>
<li><a href="#">辛星HTML</a></li>
<li><a href="#">辛星jQuery</a></li>
<li><a href="#">辛星Java</a></li>
</ul></div>
</body>
</html>

第二步，我們開始新建一個(gè)xin.css文件，然后開始進(jìn)行調(diào)整這些導(dǎo)航條的顯示格式，我們要做的第一步就是先把列表的小圓點(diǎn)給去掉，我們先寫如下代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

.nav ul{list-style-type: none;}

我們發(fā)現(xiàn)小圓點(diǎn)沒了，但是，現(xiàn)在這些列表元素都是豎向排列的，我們想讓它們橫向排列。

第三步，我們通過設(shè)置li的浮動(dòng)來讓它們橫向排列，我們?cè)诘诙刑砑哟a，因此整個(gè)代碼成為：

CSS Code復(fù)制內(nèi)容到剪貼板

.nav ul{list-style-type: none;}
.nav li{float:left;}

第四步，我們發(fā)現(xiàn)現(xiàn)在它們是到了一起了，但是是連在一起的，這是為什么呢，因?yàn)樗鼈儧]有設(shè)置寬度，我們只要給他們?cè)O(shè)置了一定的寬度，它們就會(huì)分開啦，但是我們同時(shí)還可以設(shè)置一下背景色，因此該代碼就成為了如下代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;background:#CCC;}

第五步我們就開始設(shè)置鼠標(biāo)的樣式了，順便我們把下劃線給去掉，我們前面介紹過偽類的概念，如果讀者不熟悉，也可以到前面翻翻我的教程，我們同時(shí)添加背景顏色什么的，因此它的代碼成為下面這個(gè)樣子：

CSS Code復(fù)制內(nèi)容到剪貼板

.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;background:#CCC;}
.nav a:link{color:#666;background: #CCC;text-decoration: none;}
.nav a:visited{color: #666;text-decoration: none;}
.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}

第六步也是源自我們的問題，我們調(diào)整一下大小，即我們?cè)O(shè)置一下.nav a的屬性值，代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;}
.nav a:link{color:#666;background: #CCC;text-decoration: none;}
.nav a:visited{color: #666;text-decoration: none;}
.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}
.nav a{display: block;text-align: center;height: 30px;font-weight: bold;}

第七步就是我們的這個(gè)導(dǎo)航條是黏在一起的，我們需要分開菜看上去更加舒服一點(diǎn)，因此我們這里設(shè)置一下li的屬性，讓它的邊距設(shè)置為3px，然后在讓字體的大小適合該導(dǎo)航條的大小，最后的代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;margin-left: 3px;line-height: 30px;}
.nav a:link{color:#666;background: #CCC;text-decoration: none;}
.nav a:visited{color: #666;text-decoration: none;}
.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}
.nav a{display: block;text-align: center;height: 30px;font-weight: bold;}