如上圖所示的導(dǎo)航要怎么編寫(xiě)
<!DOCTYPE html> <html> <head> <title>導(dǎo)航欄的做法之一</title> <style> /*這是導(dǎo)航條****************************************************************************/ /*容器是用來(lái)裝那個(gè)存放了a標(biāo)簽的div*/ .rongqi{ background:#2C323B; height:55px; width:100%; margin:80px 0px; } /*導(dǎo)航條里面各個(gè)a標(biāo)簽的總寬度，當(dāng)前是六個(gè)a的寬度，每個(gè)a寬度默認(rèn)是200px*/ #top{ //border:solid #fff 1px; margin:0px auto; width:1200px; height:55px; } /*hanghang是a標(biāo)簽的class*/ .hanghang{ font-size:20px; color:#DDDDDD; text-align:center; line-height:50px; float:left; width:200px; height:55px; margin-left:0px; list-style-type:none; background:#2C323B; text-decoration:none; } .hanghang:hover{ list-style-type:none; color:#ffffff; font-weight:800; background:#0C8ED9; } /*****************************************************************************這是導(dǎo)航條/ </style> </head> <body> <!--這是導(dǎo)航條***************************************************************************--> <div class="rongqi"> <div id="top"> <a class="hanghang" href="#">首頁(yè)</a> <a class="hanghang" href="#">導(dǎo)航1</a> <a class="hanghang" href="#">導(dǎo)航2</a> <a class="hanghang" href="#">導(dǎo)航3</a> <a class="hanghang" href="#">導(dǎo)航4</a> <a class="hanghang" href="#">導(dǎo)航5</a> </div> </div> <!--***************************************************************************這是導(dǎo)航條--> </body> </html>
當(dāng)然了，背景圖的變化我們也可以用自己喜歡的圖片，當(dāng)鼠標(biāo)Hover的時(shí)候就換一張背景圖background:url(圖片的Url路徑)；一樣可以做出很炫的效果。
【 微信掃一掃 】
