CSS 水平導航選單製作詳解
水平導航選單是導航選單中最常見的一種,下面通過程式碼是詳細介紹一下它的實現過程。
需要需要下載精美實用導航選單可以在素材導航選單分類中查詢。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; font-size:14px; } a{ color:#333; text-decoration:none } .nav{ list-style-type:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px; } .nav li{ float:left } .nav li a{ display:block; height:30px; text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px; } .nav li a:hover{ background:#F60; color:#fff; } </style> </head> <body> <ul class="nav"> <li><a class="on" href="#">首頁</a></li> <li><a href="#">關於我們</a></li> <li><a href="#">產品展示</a></li> <li><a href="#">螞蟻部落</a></li> <li><a href="#">聯絡我們</a></li> </ul> </body> </html>
上面實現了水平導航選單效果,滑鼠懸浮還可以背景變色。
實現過程:
[CSS] 純文字檢視 複製程式碼*{ margin:0; padding:0; font-size:14px; }
比較粗暴的一種樣式重置,將所有的元素內外邊距設定為0,字型大小設定為14px。
更多內容參閱css刪除頁面周邊空白一章節。
[CSS] 純文字檢視 複製程式碼a{ color:#333; text-decoration:none }
重置預設超連結樣式,所有連結顏色設定為#333,並且去掉下劃線。
[CSS] 純文字檢視 複製程式碼.nav{ list-style-type:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px; }
list-style-type:none去掉列表的預設樣式(預設樣式是很醜的)。
然後設定ul元素的高度為30px,底部邊框為視覺上看到的黃色。
上外邊距為20xp,左內邊距為50px。
[CSS] 純文字檢視 複製程式碼.nav li{ float:left }
li元素左浮動,這樣li元素就可以水平排列,預設狀態下,每一個塊級元素佔據一行。
浮動可以參閱CSS float浮動一章節。
[CSS] 純文字檢視 複製程式碼.nav li a{ display:block; height:30px; text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px; }
a是內聯元素,預設不能設定尺寸,所以通過display:block將其轉換為塊級元素。
緊接著再設定它的尺寸、行高、背景色和外邊距。
內聯元素可以參閱CSS 塊級/內聯元素一章節。
[CSS] 純文字檢視 複製程式碼.nav li a:hover{ background:#F60; color:#fff; }
當受不了懸浮時,會切換連結a元素的背景色和字型顏色。
a:hover可以參閱CSS E:hover偽類選擇器一章節。
相關文章
- CSS水平導航選單製作詳解CSS
- 純css製作導航下拉選單CSS
- 二級下拉導航選單製作詳解
- css橫向導航欄製作流程詳解CSS
- CSS三級下拉導航選單詳解CSS
- CSS垂直導航選單CSS
- jQuery三級導航選單詳解jQuery
- CSS 動態導航選單CSS
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- 利用transform skewX製作平行四邊形導航選單ORM
- js和CSS3媒體查詢製作簡單的響應式導航選單JSCSSS3
- 垂直摺疊導航選單實現詳解
- html+css 製作簡易導航欄HTMLCSS
- CSS3麵包屑導航選單CSSS3
- 純CSS打造淘寶導航選單欄CSS
- CSS3垂直摺疊導航選單CSSS3
- CSS3橫向導航選單效果CSSS3
- CSS 可伸縮圓角導航選單CSS
- CSS學習案例(14):下拉導航選單CSS
- PbootCMS導航選單-導航選單的使用教程boot
- 中英文切換導航選單實現詳解
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- jq+css+html打造下拉導航選單例項CSSHTML單例
- JavaScript下拉摺疊導航選單講解JavaScript
- CSS3立體導航選單程式碼例項CSSS3
- css3滑鼠懸浮展開收縮導航選單CSSS3
- JavaScript二級導航選單JavaScript
- 導航選單(動畫)--- jQuery動畫jQuery
- JavaScript 三級導航選單JavaScript
- Flutter 底部導航詳解Flutter
- CSS div水平垂直居中效果詳解CSS
- 室內地圖導航製作,簡單的地圖繪製軟體地圖
- Flutter 底部不規則導航製作Flutter
- 製作一個瀏覽器導航瀏覽器
- CSS導航條選單:帶小三角形CSS
- CSS jquery圓角帶陰影的導航選單程式碼分享CSSjQuery