百度导航栏

来源：互联网发布：微信朋友圈的网络骗局编辑：程序博客网时间：2024/06/06 18:32

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>导航栏</title>    </head>    <link rel="stylesheet" href="./导航栏.css" media="screen" title="no title">    <body>        <div class="navBox">  <!-- 最外层盒子-->            <div class="nav">    <!--导航栏-->                <ul class="navList">  <!-- 列表 -->                    <li class="navItem">                        <a class="title">我的关注</a>                        <div class="detail"></div><!--增加样式-->                    </li>                    <li class="navItem">                        <a class="title">推荐</a>                        <div class="detail"></div>                    </li>                    <li class="navItem">                        <a class="title">导航</a>                        <div class="detail"></div>                    </li>                    <li class="navItem">                        <a class="title">视频</a>                        <div class="detail"></div>                    </li>                    <li class="navItem">                        <a class="title">购物</a>                        <div class="detail"></div>                    </li>                </ul>            </div>        </div>    </body></html>

样式：

*{    /*去除外边框*/    /*    *  在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。    *  在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。    */    padding: 0;    margin: 0;}.navBox{    width: 600px;    height: 400px;    /*整体居中：距离上下左右全部为0，自然居中*/    position: absolute;/*绝对定位，自身不占空间*/    margin: auto;    top: 0;    left: 0;    right: 0;    bottom: 0;}.navBox .nav{    height: 40px;    border: 1px solid lightgray;    color: darkgray    line-height: 40px;    background: white;}.navList{    width: 100%;    height: 100%;    list-style: none;/*去掉小点点*/}.navItem{    float: left;/*向左浮动，横向显示*/}.nav .title{    margin: 0 10px;/*标题间距*/}.navItem .detail{    width: 100%;    height: 360px;    position: absolute;    left: 0; /*距离左侧为0，不然会漏出来一块*/    z-index: 5;/*堆叠优先级*/}/*nth-child(k) 枚举子元素，赋予颜色*/.navItem:nth-child(1) .detail{    background: red;}.navItem:nth-child(2) .detail{    background: orange;}.navItem:nth-child(3) .detail{    background: yellow;}.navItem:nth-child(4) .detail{    background: green;}.navItem:nth-child(5) .detail{    background: blue;}/*hover 悬停事件*/.navItem:hover{    background: darkgray;    color: white;}.navItem:hover .detail{    z-index: 6;/*更改层叠优先级，使之显示在最上层*/}

0 0