導航欄制作
阿新 • • 發佈：2017-08-02
float hit 左浮動 href ctype 制作 text gre tle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; /*盒子外邊距*/ padding: 0px; /*盒子內邊距*/ } .NavigatorView { width: 100%; height: 50px; background-color: WhiteSmoke; } .NavigatorView div{ height: 50px; width: 80%; margin-left: 12%; margin-right: 12%; } .NavigatorView div ul{ list-style-type: none; /*去掉ul的無標號的 點， 即 無標記 */ } .NavigatorView div ul li { float: left; /* 左浮動 */ } .NavigatorView div ul li a { display: block; /* 塊狀顯示，在元素後面換行，顯示下一個塊元素*/height: 50px; width: 130px; text-align:center; text-decoration: none; /*去除鏈接下的橫線*/ line-height: 50px; /*文本行高*/ color:black; } .a1 { background-color: YellowGreen; } .NavigatorView div ul li a:hover{ background-color: YellowGreen; height: 50px; width: 130px; text-align:center; display: block; text-decoration: none; /*去除鏈接下的橫線*/ line-height: 50px; color: black; } .head { height: 120px; width: 100%; background-color: aliceblue; } </style> </head> <body> <div class="head"></div> <div class="NavigatorView"> <div> <ul> <li><a class="a1" href="#">首頁</a></li> <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> </div> </body> </html>
導航欄制作