美文网首页
css a标签和ul标签组成导航栏代码

css a标签和ul标签组成导航栏代码

作者: nickNic | 来源:发表于2019-07-29 14:34 被阅读0次
    76EE980C-C8D5-4613-9BFF-C0745A05F5A1.png

    上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    
    <style>
    *{
      margin: 0px;
      padding: 0px;
    }
    
    ul{
      width: 960px;
      height: 40px;
      margin: 100px auto;
      background: red;
    }
    li{
      width: 120px;
      height: 40px;
      list-style: none;
      display:block;
      float: left;
      text-align: center;
      line-height: 40px;
    }
    a{
      text-decoration: none;
      background-color: yellow;
      display:block;
      width: 120px;
      height: 40px;
    }
    
    
    a:hover
    {
      background-color: #FF00FF
    }   /* 鼠标移动到链接上 */
    a:active 
    { 
      background-color: black
    }   /* 选定的链接 */
    
    
    </style>
    </head>
    <body>
    
    <ul>
      <li>
        <a href=""> 我是导航条</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=""> 我是导航条</a>
      </li>
      <li>
        <a href=""> 我是导航条</a>
      </li>
      <li>
        <a href=""> 我是导航条</a>
      </li>
    </ul>
    
    </body>
    </html>

    相关文章

      网友评论

          本文标题:css a标签和ul标签组成导航栏代码

          本文链接:https://www.haomeiwen.com/subject/syjbrctx.html