css簡單水平導航選單程式碼例項
本章節分享一段程式碼例項,它實現了簡單的水平導航選單效果。
初學者可以做一下參考,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html,body { margin: 0; padding: 0; background-color:#ccc; } #bar { list-style:none; width: 950px; height: 40px; margin: auto; background-color:burlywood; padding: 0; } li { float: left; font-size: 24px; } a { color: white; text-decoration: none; display: block; width: 150px; height: 40px; line-height:40px; margin-left: 0; text-align: center; border-right: solid; border-width: 1px; } a:hover { color: #696969; background-color:white; margin:0; } </style> </head> <body> <div> <ul id="bar"> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落三</a></li> <li><a href="#">螞蟻部落四</a></li> <li><a href="#">螞蟻部落五</a></li> </ul> </div> </body> </html>
相關文章
- css水平下拉導航選單程式碼例項CSS
- css樹形導航選單程式碼例項CSS
- CSS3 扇形導航選單程式碼例項CSSS3
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- 蜂巢式導航選單程式碼例項
- 可以固定的頂部的導航選單簡單例項程式碼單例
- javascript樹形導航選單例項程式碼JavaScript單例
- 響應式導航選單程式碼例項
- 自定義右鍵導航選單程式碼例項
- 垂直手風琴導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- css三級下拉導航選單程式碼例項CSS
- 純CSS實現的二級導航選單效果程式碼例項CSS
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- css3實現的立體導航選單效果程式碼例項CSSS3
- 垂直樹形多級導航選單程式碼例項
- 垂直可伸縮的導航選單例項程式碼單例
- css 兄弟選擇器簡單程式碼例項CSS
- css3水平滑動導航選單效果CSSS3
- 側欄能夠定位的導航選單程式碼例項
- js橫向滑動摺疊導航選單程式碼例項JS
- js選項卡簡單程式碼例項JS
- CSS垂直導航選單CSS
- css二級下拉選單程式碼例項CSS
- jQuery底部跟隨水平導航選單jQuery
- CSS 動態導航選單CSS
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- ul li實現的水平導航選單
- jq+css+html打造下拉導航選單例項CSSHTML單例
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- CSS實現的側欄三級導航選單程式碼CSS
- css3實現的水平立體動態導航選單效果CSSS3
- 純CSS打造淘寶導航選單欄CSS
- 純css製作導航下拉選單CSS