1. <style>
  2.     ul{/*设置导航栏的框框*/
  3.         margin: 30px auto;
  4.         width: 600px;
  5.         height: 350px;
  6.         padding: 0px;
  8.     }
  9.     ul li{
  10.         list-style-type: none;
  11.         float: left;
  12.     }
  13.     ul>li a{
  14.         display: block;
  15.         width: 100px;
  16.         height: 50px;
  17.         font-family: Microsoft Yahei;
  18.         line-height: 50px;
  19.         background-color: crimson;
  20.         margin: 0px 0px;
  21.         color: #fff;
  22.         text-align: center;
  23.         text-decoration: none;
  24.         font-size: 15px;
  25.     }
  26.     ul>li a:hover {
  27.         background-color: white;
  28.         color:red;
  29.     }
  30. </style>
  31. ``````html
  32. <ul>
  33.     <li><a href="#">首页</a></li>
  34.     <li><a href="#">前言</a></li>
  35.     <li><a href="#">前端</a></li>
  36.     <li><a href="#">后端</a></li>
  37.     <li><a href="#">云计算</a></li>
  38.     <li><a href="#">大数据</a></li>
  39. </ul>