Tab切换示例

最新推荐文章于 2024-09-02 07:00:00 发布

诗风乐雨

最新推荐文章于 2024-09-02 07:00:00 发布

阅读量95

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45119312/article/details/124268919

版权

1.Tab切换

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=egde">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title></title>
     <style>
       *{
           margin: 0;
           padding: 0;
       }
       ul{
           list-style: none;
           background-color: pink;
       }
       a{
           text-decoration: none;
           color: black;
       }
       .clearfix::after{
           content: "";
           display: block;
           clear: both;
       }
       /* .left{
           float: left;
       } */
      li{
          float: left;
          margin-left: 20px;
      }
      .item{
          width: 300px;
          height: 300px;
          border: 1px solid black;
          position: absolute;
          top: 30px;
          /* display:none 让元素隐藏 */
          display: none;
      }
      .first:hover .item{
          display: block;
      }
      .first{
          position: relative;
      }
      
     </style>
 </head>
 
 <body>
    <ul class="clearfix">
        <!-- li*5>a[href="#"]{百度一下$$} -->
        <li class="first"><a href="">百度一下01</a>
        <div class="item">
            我是详细内容
        </div>
        </li>
        <li><a href="#">百度一下02</a></li>
        <li><a href="#">百度一下03</a></li>
        <li><a href="#">百度一下04</a></li>
        <li><a href="#">百度一下05</a></li>
    </ul>
 </body>
 
 </html>