css練習之導航條
阿新 • • 發佈：2018-12-26
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .nav{ /*去除專案符號*/ list-style: none; background-color: grey; width: 1000px; margin: 50px auto; /*解決高度塌陷問題*/ overflow: hidden; } .nav li{ float: left; /*佔父元素的25%*/ width: 25%; } .nav a{ /*將a轉化為塊元素*/ display: block; width: 100%; text-align: center; padding: 5px 0px; /*去除下劃線*/ text-decoration: none; color: white; font-weight: bold; } /*設定滑鼠移入的效果*/ .nav a:hover{ background-color: red; } </style> </head> <body> <ul class="nav"> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">聯絡</a></li> <li><a href="#">關於</a></li> </ul> </body> </html>
效果：
