css分類導航和圓角菜單的制作
阿新 • • 發佈:2017-06-05
分類
#縱向分類 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*清除默認的邊框*/ *{margin: 0px;padding: 0px;} /*不顯示li前面的.號 */ ul{list-style: none;width: 100px;} /* 取消a標簽的下劃線,把a標簽變成獨立的塊,text-indent:10px為向右縮進10px*/ a{text-decoration: none;display: block;} /*讓鼠標點上分類項時變色*/ a:hover{background-color: #00DB00;color: #fff;} </style> </head> <body> <ul> <li><a href="">首頁</a> </li> <li><a href="">玄幻</a> </li> <li><a href="">都市</a> </li> <li><a href="">言情</a> </li> </ul> </body> </html>
橫向:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} .fenlei{ width: 100%;background: green; overflow: hidden; margin-top: 100px; } ul{list-style: none;margin: 0 auto;width: 1000px;} \\註意:這裏如果不加*{margin:0;padding:0;}的話ul的外邊距會對a標簽產生影響,造成a標簽的每個塊不能占滿div的整塊, 所以要對ul去掉外邊距,讓a標簽的字體上下占滿class="fenlei"的div。 對比圖見圖1和圖2: a{ float: left; #向左浮動,橫向展示 width: 70px; #每個a標簽的寬度 text-decoration: none; #a標簽不顯示下劃線 color: white; text-align: center; #字體橫向居中 display: block; #塊狀顯示 padding: 10px; #內邊距大小 font-size: 16px; #字體大小 font-weight: bold; #字體粗細 } a:hover{background-color: #00DB00;} </style> </head> <body> <div class="fenlei"> <ul> <li><a href="#">首頁</a> </li> <li><a href="#">玄幻</a> </li> <li><a href="#">都市</a> </li> <li><a href="#">言情</a> </li> </ul> </div> </body> </html>
圖1:
圖2:
圓角菜單:
圓角菜單的原理就是制作一個圖片,上面白色圓角,下面是綠色圓角。a標簽的高度正好是圖像的一半高度,a標簽的寬等於圖像的寬度,當鼠標點上去時讓圖像上移一半的高度,這就實現了圓角變化。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>導航菜單</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} li{float:left} a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(test.jpg); margin-left:1px;} a.shouye, a:hover{ background-position:0 30px; color:#fff;} //這裏需要改變的就是background-position </style> </head> <body> <ul class="nav"> <li><a class="shouye" 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分類導航和圓角菜單的制作