<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      html導航條制作的圖文代碼分享
                
                  發表時間：2023-12-27             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]在我們的日常WEB開發中，機會所有的網頁他都有一個導航條，不僅僅是為了網頁美觀，更多的是給用戶的一種體驗，那么如何設置導航條呢？今天就大家詳細介紹下html制作通用的導航條！第一步：先創建一個盒子，定義類為 nav，width 1000，height 40px，防京東的導航，與瀏覽器頂部100px...
      在我們的日常WEB開發中，機會所有的網頁他都有一個導航條，不僅僅是為了網頁美觀，更多的是給用戶的一種體驗，那么如何設置導航條呢？今天就大家詳細介紹下html制作通用的導航條！
      第一步：先創建一個盒子，定義類為 nav，width 1000，height 40px，防京東的導航，與瀏覽器頂部100px，margin-top:100px,看的更直觀
      第二步：使用無序列表放置，導航條的內容，這個可以自己定，這里設定 ul 寬1000px;高 40px；因為ul是塊狀元素，出現下面的樣子，可以思考塊狀元素在firefox中和 ie6下面有什么不同。
      V9_5580A_0H8{9A$$80~Y~J.png
      通常在寫樣式的時候，要初始化我們的css樣式表，這里具體用到哪些，初始哪些，具體設置 list-style:none; margin:0;padding:0;
      第三步：現在所有的欄目都是緊挨著，我們要給li設置寬度為100px，通過float:left 將他們分開，給li加一個 背景色blue，知道我們所處的位置，更好的去調節我們的頁面，
      AM]@T0Y}HU}LJ06W]SZMH8G.png
      現在暫不去掉背景色，給 li 添加高度 height:40px;使用 line-height:40px; 垂直居中，text-align:center; 水平居中。 效果如右 
      KO@TPAGTIS(VSNWS%JZS79Q.png
      第四步：為了體現這一步遇到的問題，我把最后一個欄目多加了幾個字，
      OT9BLC_31)N2~_LHCO6IIB4.png
      可以看出欄目之間的距離是不同的，為了尋找問題，我們給 li 設置一個寬度為 1px的 右外邊距, margin-right:1px;  
      D0(4V8}31{ZS~2SRCOV_{]V.png
      這個時候就很清楚的發現問題了，由于給li設定了寬度，所以當文字多了以后，不能夠自動伸縮適應，這時候就要去掉寬度。 
      D0(4V8}31{ZS~2SRCOV_{]V.png
      這個時候，寬度能夠伸縮適應了，但是文字的空間太少，影響視覺，解決辦法，添加所有內邊距10px，給li 樣式添加 padding:0 10px; 現在效果好多了，然后把 margin-right:1px 去掉
      I@$`4Y{%A$KY2X7D]VIQ5[T.png
      第五步： 因為導航是需要點擊的，我們需要放置 超鏈接（a標簽），放在哪里呢，放在li標簽內，操作如下，給li添加a標簽，設置文字大小12px，規定鼠標移上去和移出的效果。
      D7MCKJ`AN4W07L$5S2YE6L3.png
      第六步：如果希望鼠標移動上去顯示 黑紅色，給a 鏈接添加一個背景，以便看書a鏈接的區域。這里給a鏈接添加 黑色；
      B[F4ZGFE[%2(7%8[Q8IZ5GX.png
      ，然后你發現，當你的鼠標移動到a標簽后會出現小手的狀態，為了用戶體驗，我們可以給 a 標簽設置一個高度，讓我們鼠標剛 接觸li 標簽就出現小手，添加height后，不管怎么刷新都不會出現，還是原來的樣子，引發思考。因為 a 標簽 是 內鏈元素，內鏈元素是無法設置寬度和高度的，我們需要使用 display:block; 將內鏈元素轉換為塊元素。這個時候會出現兩種情況
      2X8D6TXOGAPF`9}YL}80_1X.png
      %EHWU]M(K0`OSDVN%J$YIVI.png
      ，實際效果總是與期望效果不同，這個需要常年累積和對不同瀏覽器支持的了解。IE6 下面，認為a 標簽既然轉換為塊元素，就要有塊元素的特性，獨占一行，再加上也沒有對a標簽的寬度設定，為什么firefox中沒有這樣呢，那時因為firefox 認為a標簽即便是 塊元素，也要受到它外面的li標簽的影響。如何解決呢，因為現在a標簽是塊狀元素了，所以給a標簽添加 float:left; 即可。 現在兩個瀏覽器顯示的內容一樣了
      第七步：當我們鼠標移動到欄目上時，就會變成小手的形狀，因為小手的形狀是因為有a標簽，但是我們發現a標簽的寬度有點小，所以這里需要加寬a標簽，這里使用 padding:0 10px; 因為之前有給 li 添加padding:0 10px; 為了能夠更清晰的控制導航欄目的寬度，這里我們使用a標簽來控制，去掉li 的padding。最后去掉a標簽的背景，導航欄完成，兼容IE 以及常用瀏覽器哦。。。
      最后的結果 
      %OU(MV~}9}KPIA2GY3FM]GC.png
      這個導航可以延伸到不同的導航中，基本都差不多。重要的是，了解到一些元素在火狐和ie中的區別，更好的避免所謂的兼容性
      最后 去除外面的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">首頁</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">團購</a></li>
			<li><a href="http://www.baidu.com">奪寶島集團</a></li>
		</ul>
</body>
      總結：
      相信小伙伴們通過對本文的詳細學習，對于導航條的制作有了進一步的了解，小伙伴可以根據此文加以拓展，有拋磚引玉的效果、希望對你有所幫助！
      相關推薦：
      總結7種常見的導航條制作實例
      怎樣用DIV和CSS做導航條
      CSS3教程之制作傾斜導航條和毛玻璃效果
      以上就是html導航條制作的圖文代碼分享的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清