<!DOCTYPE html><html><head><meta charset="utf-8" /><title>导航条</title><meta name="viewport" content="width=device-width, initial-scale=1"><style <style type="text/css">*{padding:0;margin:0;}.shape{margin:20px auto;width:1000px;height:40px;background-color:#6495ED;list-style:none;}.shape li{width:25%;text-align:center;padding-top:8px;padding-bottom:8px;float:left;}.shape li a{font-size:18px;display:block;width:100%;text-decoration:none;color:white;font-weight:bold;}.shape li:hover{background-color:#c00;}</style></head><body><ul class="shape"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
效果图:
鼠标移入效果：
