HTML css簡潔導航條

2024-09-05 12:20:53

字體：大中小

供稿：網(wǎng)友

HTML css簡潔導航，菜單條，經(jīng)典的水平導航條鬮要，純CSS實現(xiàn)，無JS,無插件，兼容各大瀏覽器，代碼簡單，復制代碼即可使用。帶有鼠標懸停動態(tài)效果，鼠標滑過時會在對應菜單文字下顯示一個橫條，很不錯的埃

<!DOCTYPE html><html><head><title>HTML css簡潔導航</title><style>body{    margin: 0;    padding: 0;    font: 14px/15pt;    background: #dad8d9;}#nav{    width: 80%;    margin: 100px auto;    height: 46px;    border-radius: 8px;    border: 1px solid #cbcbcb;    border-bottom: 4px solid #adadad;    background: url(/jscss/demoimg/201403/navbg.png") 14.28% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 28.56% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 42.84% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 57.18% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 71.62% center no-repeat,    #f3f3f3 url(/jscss/demoimg/201403/navbg.png") 85.80% center no-repeat;}#nav a{    display: block;    width: 14.28%;    height: 46px;    line-height: 46px;    float: left;    border-bottom: 4px solid #adadad;    text-align: center;    text-decoration: none;    color: seagreen;}#nav a:first-child{    border-radius: 0 0 0 8px;}#nav a:last-child{    border-radius: 0 0 8px 0;}#nav a:hover{    border-bottom: 4px solid red;    color: red;}#nav a:first-child:hover{    border-bottom: 4px solid red;    border-radius: 0 0 0 8px;}#nav a:last-child:hover{    border-bottom: 4px solid red;}</style></head><body><div   class="iwvjtn8m0"   id="nav">    網(wǎng)站首頁    公司簡介    產(chǎn)品介紹    經(jīng)典案例    企業(yè)動態(tài)    在線留言    通信地址</div></body></html>

上一篇：很酷的網(wǎng)頁頂部圖標菜單右上角下拉菜單

下一篇：jquery伸縮導航條點擊向下展開菜單項