html和css写淘宝的快速导航条

目录

1、css代码

2、html代码

1、css代码

 <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }

    .nav {
      width: 900px;
      height: 40px;
      background-color: rgb(247, 249, 250);
      margin: 50px auto;
      padding-left: 30px;
    }

    .nav>li {
      float: left;
      width: 100px;
      text-align: center;
    }

    a {
      color: rgb(82, 82, 83);
      border-right: 1px solid rgb(90, 88, 88);
      display: block;
      width: 100px;
      height: 20px;
      margin-top: 10px;
      text-align: center;

    }

    .first {
      color: red;
      font-weight: 800;
    }

    .two {
      color: green;
      font-weight: 800;
    }

    a:hover {
      color: red;
    }

    .three {
      border-right: none;
    }
  </style>

2、html代码

 <ul class="nav">
    <li><a href="" class="first">天猫</a></li>
    <li><a href="" class="first">聚划算</a></li>
    <li><a href="" class="two">天猫超市</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="" class="three">淘宝直播</a></li>
  </ul>