導(dǎo)航條是一個網(wǎng)站中必不可少的元素，那么如何用HTML和CSS制作一個導(dǎo)航條呢？下面我給大家分享一下。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、漳縣網(wǎng)站維護(hù)、網(wǎng)站推廣。
工具/材料
Sublime Text
首先打開SublimeText軟件，新建一個html頁面，并且在html頁面中準(zhǔn)備好html結(jié)構(gòu)，如下圖所示
接下來我們在html的body結(jié)構(gòu)里添加導(dǎo)航條的內(nèi)容，如下圖所示
然后就需要在style標(biāo)簽中用CSS對導(dǎo)航條的樣式進(jìn)行定義了，如下圖所示，書寫樣式的時候一定要注意寫在style標(biāo)簽里面
最后運(yùn)行html頁面，你就會看到如下圖所示的導(dǎo)航條，當(dāng)鼠標(biāo)放在某個導(dǎo)航上時，背景色會變成紅色
查看店鋪，右擊，查看源代碼，在里面找到你要改字體的標(biāo)簽，可以使用ctrl+f，找到后，根據(jù)class名，更改樣式即可，font-family：‘宋體’。
font-family、微軟雅黑，宋體，seri、解釋下：這個設(shè)置的意思是，優(yōu)先微軟雅黑，如果沒有微軟雅黑就用宋體，兩個都沒有就用serif類字體。
導(dǎo)航欄CSS樣式制作流程：
1、導(dǎo)航欄CSS樣式設(shè)置，預(yù)覽:導(dǎo)航樣式是選擇設(shè)置后，預(yù)覽區(qū)會自動發(fā)生變化，涉及到“經(jīng)過"的效果，是指鼠標(biāo)放到該元素上產(chǎn)生的效果，需要把鼠標(biāo)放設(shè)置的元素上查看設(shè)置效果。
2、顏色、點(diǎn)擊顏色選擇器，在顏色選擇界面，選擇你喜歡的顏色，或者設(shè)置指定的顏色(在#位置，填寫顏色編號，可以指定需要的顏色。
這個需要自己提前使用PS或者其他取色軟件獲得需要的顏色編號)。選擇了馬賽克，意思是不設(shè)置，沒有任何顏色。
3、圖片、部分設(shè)置框里，是設(shè)置圖片。首先，進(jìn)入淘寶店鋪圖片空間，上傳準(zhǔn)備好的背景素材圖片，上傳完成后，復(fù)制圖片地址，在圖片設(shè)置框里粘貼(一定是淘寶圖片空間的圖片，否則不能在淘寶店鋪安裝導(dǎo)航CSS代碼)。
注意，部分樣式設(shè)置里，一個位置有顏色設(shè)置，同樣有圖片設(shè)置，任取一種必須設(shè)置一種。
4、字體、字體大小、字體名稱、字體樣式，根據(jù)提供的選項(xiàng)進(jìn)行選擇即可。
你知道li圖片，就是list-style-image:XX.jpg。XX.jpg就是那個你說的那條線了，
還有一種方法，就是計算好導(dǎo)航的文字，把你那條線也一起做成背景圖片，這樣就不用管那么多了
假如你不是太懂，就百度一下“l(fā)ist-style-image”
我想這樣你就明白了
假如還有什么不懂，就HI我，也可以繼續(xù)追問。
css定義一條導(dǎo)航欄
首先建立一個DIV，為其命名為“nav”，在DIV中建立一個ul無序列表，導(dǎo)航共有幾個欄目，就為列表添加幾個li的列表項(xiàng)，為每個列表項(xiàng)中的內(nèi)容加上超鏈接，鏈接到所需的項(xiàng)目頁面。
然后設(shè)置CSS樣式，為列表規(guī)定寬度和高度，去掉列表前面的符號，代碼為：
ul {width:寬度值；height：高度值； list-style:none；}
如果是橫向?qū)Ш?，還需為里面的列表項(xiàng)li標(biāo)簽設(shè)置左浮動的樣式，代碼為：li {float:left;}
每個欄目之間分隔的距離可通過margin（外邊距）屬性來設(shè)置。
導(dǎo)航條的更多樣式及詳細(xì)步驟可去這里參考
一、定義一個盒子（“menu”）,用來裝這個導(dǎo)航的。
二、用無序列表（ul）中的列（li）放導(dǎo)航的內(nèi)容。
三、把li的浮動（float）設(shè)置為向左浮動（float：left；），這樣，就實(shí)現(xiàn)了水平導(dǎo)航條了。
四、在做其他的一些修飾。（下面我給我弄的一個簡單的導(dǎo)航條給你理解）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title無標(biāo)題文檔/title
style type="text/css"
#menu{
width:500px;
margin:0 auto; /*令盒子居中*/
font-size:20px; /*定義字體的大小*/
}
ul{
margin:0; padding:0; /*把瀏覽器默認(rèn)的間隔去掉*/
list-style:none; /*把前面的序列號去掉*/
}
li{
float:left; /*向左浮動，這個是實(shí)現(xiàn)水平的重要步驟！！*/
padding:0 15px; /*li里面的字體和邊框的距離*/
}
a{
text-decoration:none; /*去掉超鏈接的下劃線*/
color:#333; /*超鏈接的字體顏色*/
}
a:hover{
color:#696;
}
/style
/head
body
div id="menu"
ul
lia href="#"菜單1/a/li
lia href="#"菜單1/a/li
lia href="#"菜單1/a/li
lia href="#"菜單1/a/li
/ul
/div
/body
/html
重慶分公司
重慶分公司
