明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

html導(dǎo)航條制作的圖文代碼分享

發(fā)表時(shí)間：2024-05-09 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]在我們的日常WEB開(kāi)發(fā)中，機(jī)會(huì)所有的網(wǎng)頁(yè)他都有一個(gè)導(dǎo)航條，不僅僅是為了網(wǎng)頁(yè)美觀，更多的是給用戶的一種體驗(yàn)，那么如何設(shè)置導(dǎo)航條呢？今天就大家詳細(xì)介紹下html制作通用的導(dǎo)航條！第一步：先創(chuàng)建一個(gè)盒子，定義類為 nav，width 1000，height 40px，防京東的導(dǎo)航，與瀏覽器頂部100px...
在我們的日常WEB開(kāi)發(fā)中，機(jī)會(huì)所有的網(wǎng)頁(yè)他都有一個(gè)導(dǎo)航條，不僅僅是為了網(wǎng)頁(yè)美觀，更多的是給用戶的一種體驗(yàn)，那么如何設(shè)置導(dǎo)航條呢？今天就大家詳細(xì)介紹下html制作通用的導(dǎo)航條！

第一步：先創(chuàng)建一個(gè)盒子，定義類為 nav，width 1000，height 40px，防京東的導(dǎo)航，與瀏覽器頂部100px，margin-top:100px,看的更直觀

第二步：使用無(wú)序列表放置，導(dǎo)航條的內(nèi)容，這個(gè)可以自己定，這里設(shè)定 ul 寬1000px;高 40px；因?yàn)閡l是塊狀元素，出現(xiàn)下面的樣子，可以思考?jí)K狀元素在firefox中和 ie6下面有什么不同。
V9_5580A_0H8{9A$$80~Y~J.png

通常在寫(xiě)樣式的時(shí)候，要初始化我們的css樣式表，這里具體用到哪些，初始哪些，具體設(shè)置 list-style:none; margin:0;padding:0;

第三步：現(xiàn)在所有的欄目都是緊挨著，我們要給li設(shè)置寬度為100px，通過(guò)float:left 將他們分開(kāi)，給li加一個(gè) 背景色blue，知道我們所處的位置，更好的去調(diào)節(jié)我們的頁(yè)面，

AM]@T0Y}HU}LJ06W]SZMH8G.png

現(xiàn)在暫不去掉背景色，給 li 添加高度 height:40px;使用 line-height:40px; 垂直居中，text-align:center; 水平居中。 效果如右

KO@TPAGTIS(VSNWS%JZS79Q.png

第四步：為了體現(xiàn)這一步遇到的問(wèn)題，我把最后一個(gè)欄目多加了幾個(gè)字，

OT9BLC_31)N2~_LHCO6IIB4.png

可以看出欄目之間的距離是不同的，為了尋找問(wèn)題，我們給 li 設(shè)置一個(gè)寬度為 1px的 右外邊距, margin-right:1px;

D0(4V8}31{ZS~2SRCOV_{]V.png

這個(gè)時(shí)候就很清楚的發(fā)現(xiàn)問(wèn)題了，由于給li設(shè)定了寬度，所以當(dāng)文字多了以后，不能夠自動(dòng)伸縮適應(yīng)，這時(shí)候就要去掉寬度。

D0(4V8}31{ZS~2SRCOV_{]V.png

這個(gè)時(shí)候，寬度能夠伸縮適應(yīng)了，但是文字的空間太少，影響視覺(jué)，解決辦法，添加所有內(nèi)邊距10px，給li 樣式添加 padding:0 10px; 現(xiàn)在效果好多了，然后把 margin-right:1px 去掉

I@$`4Y{%A$KY2X7D]VIQ5[T.png

第五步： 因?yàn)閷?dǎo)航是需要點(diǎn)擊的，我們需要放置 超鏈接（a標(biāo)簽），放在哪里呢，放在li標(biāo)簽內(nèi)，操作如下，給li添加a標(biāo)簽，設(shè)置文字大小12px，規(guī)定鼠標(biāo)移上去和移出的效果。

D7MCKJ`AN4W07L$5S2YE6L3.png

第六步：如果希望鼠標(biāo)移動(dòng)上去顯示 黑紅色，給a 鏈接添加一個(gè)背景，以便看書(shū)a鏈接的區(qū)域。這里給a鏈接添加 黑色；

B[F4ZGFE[%2(7%8[Q8IZ5GX.png

，然后你發(fā)現(xiàn)，當(dāng)你的鼠標(biāo)移動(dòng)到a標(biāo)簽后會(huì)出現(xiàn)小手的狀態(tài)，為了用戶體驗(yàn)，我們可以給 a 標(biāo)簽設(shè)置一個(gè)高度，讓我們鼠標(biāo)剛 接觸li 標(biāo)簽就出現(xiàn)小手，添加height后，不管怎么刷新都不會(huì)出現(xiàn)，還是原來(lái)的樣子，引發(fā)思考。因?yàn)?a 標(biāo)簽 是 內(nèi)鏈元素，內(nèi)鏈元素是無(wú)法設(shè)置寬度和高度的，我們需要使用 display:block; 將內(nèi)鏈元素轉(zhuǎn)換為塊元素。這個(gè)時(shí)候會(huì)出現(xiàn)兩種情況

2X8D6TXOGAPF`9}YL}80_1X.png

%EHWU]M(K0`OSDVN%J$YIVI.png

，實(shí)際效果總是與期望效果不同，這個(gè)需要常年累積和對(duì)不同瀏覽器支持的了解。IE6 下面，認(rèn)為a 標(biāo)簽既然轉(zhuǎn)換為塊元素，就要有塊元素的特性，獨(dú)占一行，再加上也沒(méi)有對(duì)a標(biāo)簽的寬度設(shè)定，為什么firefox中沒(méi)有這樣呢，那時(shí)因?yàn)閒irefox 認(rèn)為a標(biāo)簽即便是 塊元素，也要受到它外面的li標(biāo)簽的影響。如何解決呢，因?yàn)楝F(xiàn)在a標(biāo)簽是塊狀元素了，所以給a標(biāo)簽添加 float:left; 即可。 現(xiàn)在兩個(gè)瀏覽器顯示的內(nèi)容一樣了

第七步：當(dāng)我們鼠標(biāo)移動(dòng)到欄目上時(shí)，就會(huì)變成小手的形狀，因?yàn)樾∈值男螤钍且驗(yàn)橛衋標(biāo)簽，但是我們發(fā)現(xiàn)a標(biāo)簽的寬度有點(diǎn)小，所以這里需要加寬a標(biāo)簽，這里使用 padding:0 10px; 因?yàn)橹坝薪o li 添加padding:0 10px; 為了能夠更清晰的控制導(dǎo)航欄目的寬度，這里我們使用a標(biāo)簽來(lái)控制，去掉li 的padding。最后去掉a標(biāo)簽的背景，導(dǎo)航欄完成，兼容IE 以及常用瀏覽器哦。。。

最后的結(jié)果

%OU(MV~}9}KPIA2GY3FM]GC.png

這個(gè)導(dǎo)航可以延伸到不同的導(dǎo)航中，基本都差不多。重要的是，了解到一些元素在火狐和ie中的區(qū)別，更好的避免所謂的兼容性

最后 去除外面的p 后， 還是可以兼容瀏覽器的，很爽啊，上代碼

<style type="text/css">
	body,p,ul,li{padding:0px;margin:0px;}
	ul{list-style:none;}
	ul{width:1000px;margin:0 auto;background: #e64346;height:40px;margin-top: 100px;}
	ul li{float:left;height: 40px;line-height: 40px;text-align: center;}
	ul li a{font-size: 12px;text-decoration: none;height:40px;display: block;float: left;padding:0 10px;text-decoration: none;color:#fff;}
	ul li a:hover{background:  #a40000;}
	</style>
<body>
		<ul>
			<li><a href="http://www.baidu.com">首頁(yè)</a></li>
			<li><a href="http://www.baidu.com">服裝城你好</a></li>
			<li><a href="http://www.baidu.com">食品</a></li>
			<li><a href="http://www.baidu.com">團(tuán)購(gòu)</a></li>
			<li><a href="http://www.baidu.com">奪寶島集團(tuán)</a></li>
		</ul>
</body>

總結(jié)：

相信小伙伴們通過(guò)對(duì)本文的詳細(xì)學(xué)習(xí)，對(duì)于導(dǎo)航條的制作有了進(jìn)一步的了解，小伙伴可以根據(jù)此文加以拓展，有拋磚引玉的效果、希望對(duì)你有所幫助！

相關(guān)推薦：

總結(jié)7種常見(jiàn)的導(dǎo)航條制作實(shí)例

怎樣用DIV和CSS做導(dǎo)航條

CSS3教程之制作傾斜導(dǎo)航條和毛玻璃效果

以上就是html導(dǎo)航條制作的圖文代碼分享的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。