怎么用CSS制作導航條

本篇內(nèi)容介紹了“怎么用CSS制作導航條”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

專注于為中小企業(yè)提供網(wǎng)站設計、成都網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)許昌免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

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

CSS Code復制內(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>

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

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

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

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

第三步，我們通過設置li的浮動來讓它們橫向排列，我們在第二行添加代碼，因此整個代碼成為：

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

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

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

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

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

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

CSS Code復制內(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;}

第六步也是源自我們的問題，我們調整一下大小，即我們設置一下.nav a的屬性值，代碼如下：

CSS Code復制內(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;}

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

CSS Code復制內(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;}

到現(xiàn)在為止，我們的導航條就做完了，如果讀者是一位高手，可能會指出它的不足，但是畢竟是用手寫的，沒用任何的圖片，讓我們來看一下整體效果把：

怎么用CSS制作導航條

“怎么用CSS制作導航條”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

當前文章：怎么用CSS制作導航條
當前路徑：http://jinyejixie.com/article24/psehce.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、小程序開發(fā)、網(wǎng)站收錄、網(wǎng)站排名、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么用CSS制作導航條