第一步:先創建一個盒子,定義類為 nav,width 1000,height 40px,防京東的導航,與瀏覽器頂部100px,margin-top:100px,看的更直觀
第二步:使用無序列表放置,導航條的內容,這個可以自己定,這里設定 ul 寬1000px;高 40px;因為ul是塊狀元素,出現下面的樣子,可以思考塊狀元素在firefox中和 ie6下面有什么不同。
通常在寫樣式的時候,要初始化我們的css樣式表,這里具體用到哪些,初始哪些,具體設置 list-style:none; margin:0;padding:0;
第三步:現在所有的欄目都是緊挨著,我們要給li設置寬度為100px,通過float:left 將他們分開,給li加一個 背景色blue,知道我們所處的位置,更好的去調節我們的頁面,
現在暫不去掉背景色,給 li 添加高度 height:40px;使用 line-height:40px; 垂直居中,text-align:center; 水平居中。 效果如右
第四步:為了體現這一步遇到的問題,我把最后一個欄目多加了幾個字,
可以看出欄目之間的距離是不同的,為了尋找問題,我們給 li 設置一個寬度為 1px的 右外邊距, margin-right:1px;
這個時候就很清楚的發現問題了,由于給li設定了寬度,所以當文字多了以后,不能夠自動伸縮適應,這時候就要去掉寬度。
這個時候,寬度能夠伸縮適應了,但是文字的空間太少,影響視覺,解決辦法,添加所有內邊距10px,給li 樣式添加 padding:0 10px; 現在效果好多了,然后把 margin-right:1px 去掉
第五步: 因為導航是需要點擊的,我們需要放置 超鏈接(a標簽),放在哪里呢,放在li標簽內,操作如下,給li添加a標簽,設置文字大小12px,規定鼠標移上去和移出的效果。
第六步:如果希望鼠標移動上去顯示 黑紅色,給a 鏈接添加一個背景,以便看書a鏈接的區域。這里給a鏈接添加 黑色;
,然后你發現,當你的鼠標移動到a標簽后會出現小手的狀態,為了用戶體驗,我們可以給 a 標簽設置一個高度,讓我們鼠標剛 接觸li 標簽就出現小手,添加height后,不管怎么刷新都不會出現,還是原來的樣子,引發思考。因為 a 標簽 是 內鏈元素,內鏈元素是無法設置寬度和高度的,我們需要使用 display:block; 將內鏈元素轉換為塊元素。這個時候會出現兩種情況
,實際效果總是與期望效果不同,這個需要常年累積和對不同瀏覽器支持的了解。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 以及常用瀏覽器哦。。
最后的結果
這個導航可以延伸到不同的導航中,基本都差不多。重要的是,了解到一些元素在火狐和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教程之制作傾斜導航條和毛玻璃效果
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com