简单实现侧边栏

最新推荐文章于 2024-04-21 21:33:30 发布

༒消逝的光芒

最新推荐文章于 2024-04-21 21:33:30 发布

阅读量833

点赞数 2

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_43350503/article/details/127120835

版权

1.侧边栏的用途

侧边栏在网页开发时会经常用到，例如淘宝，京东产品介绍等。

2.侧边栏的实现

侧边栏的实现主要用到了hover标签，hover标签的用途是鼠标移动到指定区域会进行相应变换。样式为

li:hover 鼠标经过li标签发生变化。

li:hover .z 鼠标经过li标签，.z盒子发生变化，前面是触发者，后面是显现者。

2.1主要使用ul列表将表单生成

 <ul>
        <li>
            <a href="#">
            家用电器
            </a>
        <div class="z"></div>
    </li>
        <li><a href="#">
            手机/运营商/数码
        </a></li>
        <li><a href="#">
            电脑/办公
        </a></li>
        <li><a href="#">
            家居/家具/家装/厨具
        </a></li>
        <li><a href="#">
            男装/女装/童装/内衣
        </a></li>
        <li><a href="#">
            美妆1个护清洁/宠物
        </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>
        <li><a href="#">
            理财/众筹/白条/保险
        </a></li>
        <li><a href="#">
            安装/维修1清洗/二手
        </a></li>
        <li><a href="#">
            工业品
        </a></li>
    </ul>

2.2 style样式

最主要的就是先把盒子隐藏，鼠标经过盒子在显现。

  <style>
      li:hover{
        /* 鼠标经过li标签改变背景颜色 */
        background-color: #fff;
      }
      li:hover .z{
        /* 鼠标经过将盒子显现 */
        display: block;

      }
      ul{
        background-color: antiquewhite;
        width: 220px;
      }
      li{
        list-style: none;
        width: 230px;
        padding: 10px 15px;
        margin-left: -40px;
        
      }
      a{
        padding-left: 50px;
        text-decoration: none;
        color: slategray;
      }
      
      /* 设置盒子的样式和位置 */
      .z{
        /* 把盒子隐藏 */
        display: none;
        position: absolute;
        top:16px;
        left:270px;
        width: 500px;
        height: 650px;
        background-color: blue;
      }
    </style>