一、效果图

二、思路

  1. 通过display:inline-block来将ul中原本li纵向排列的item，调整为模向排列。
  2. 设置导航栏container的宽高及背景色，注意对齐方式及内边距的问题。
  3. 通过设置li中的padding，来调整文字在导航栏中的位置及间隔。
  4. 通过设置border-right-style: solid;来展示分隔符的效果。
  5. 设置li:hover的颜色值并取消a标签中的下划线效果。

三、源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航栏</title>
  6.     <style>
  7.         .container {
  8.             width: 100%;
  9.             height: 40px;
  10.             background-color: red;
  11. /*            border: 1px solid blue;*/
  12.             padding: 10px 0;
  13.             text-align: left;
  14.         }
  15.         .nav{
  16.             padding: 0;
  17.             margin: 0;
  18.         }
  19.         .nav li{
  20.             /*background-color: purple;*/
  21.             display: inline-block;
  22.             padding: 8px 60px;
  23.             color: #FFFFFF;
  24.             font-size: 20px;
  25.             border: 1px none #FFFFFF;
  26.             border-right-style: solid;
  27.         }
  28.         li:hover{
  29.             color: #1d7fb3;
  30.         }
  31.         a{
  32.             text-decoration: none;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="container">
  38.         <ul class="nav">
  39.             <li>首页</li>
  40.             <li><a>前沿</a></li>
  41.             <li><a>前端</a></li>
  42.             <li><a>后端</a></li>
  43.             <li><a>云计算</a></li>
  44.             <li><a>产品设计</a></li>
  45.             <li><a>联系我们</a></li>
  46.         </ul>
  47.     </div>
  48. </body>
  49. </html>