標籤：one line pre hover tle class set ice 連結
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; /*盒子外邊距*/ padding: 0px; /*盒子內邊距*/ } .NavigatorView { width: 100%; height: 50px; background-color:cadetblue; } .NavigatorView div{ height: 50px; width: 80%; margin-left: 17%; margin-right: 17%; } .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; } .NavigatorView div ul li a:hover{ background-color: YellowGreen; height: 50px; width: 130px; text-align:center; display: block; } .head { height: 120px; width: 100%; background-color: aliceblue; } </style> </head> <body> <div class="head"></div> <div class="NavigatorView"> <div> <ul> <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> <li><a href="#">加入我們</a></li> </ul> </div> </div> </body></html>
HTML/CSS 項目
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
