选项卡

最新推荐文章于 2023-07-12 23:55:28 发布

打马御街前

最新推荐文章于 2023-07-12 23:55:28 发布

阅读量149

点赞数 1

本文链接：https://blog.youkuaiyun.com/Meatball_MMY/article/details/89366049

版权

1.body部分代码来了~~

<body>
  <div class="block">
        <div class="block_left">
            <ul class="left_menu">
                <li><a href="#">家用电器</a>
                    <div class="li_child">1</div>
                </li>
                <li><a href="#">手机</a><span>/</span><a href="#">运营商</a><span>/</span><span>/</span><a href="#">数码</a>
                    <div class="li_child">2</div>
                </li>
                <li><a href="#">电脑</a><span>/</span><a href="#">办公</a>
                    <div class="li_child">3</div>
                </li>
                <li><a href="#">家居</a><span>/</span><a href="#">家具</a><span>/</span><a href="#">家装</a><span>/</span><a href="#">厨具</a>
                    <div class="li_child">4</div>
                </li>
                <li><a href="#">男装</a><span>/</span><a href="#">女装</a><span>/</span><a href="#">童装</a><span>/</span><a href="#">内衣</a></li>
                <li><a href="#">美妆</a><span>/</span><a href="#">个护清洁</a><span>/</span><a href="#">宠物</a></li>
                <li><a href="#">女鞋</a><span>/</span><a href="#">箱包</a><span>/</span><a href="#">钟表</a><span>/</span><a href="#">珠宝</a></li>
                <li><a href="#">男鞋</a><span>/</span><a href="#">运动</a><span>/</span><a href="#">户外</a></li>
                <li><a href="#">房产</a><span>/</span><a href="#">汽车</a><span>/</span><a href="#">汽车用品</a></li>
                <li><a href="#">母婴</a><span>/</span><a href="#">玩具乐器</a></li>
                <li><a href="#">食品</a><span>/</span><a href="#">酒类</a><span>/</span><a href="#">生鲜</a><span>/</span><a href="#">特产</a></li>
                <li><a href="#">艺术</a><span>/</span><a href="#">礼品鲜花</a><span>/</span><a href="#">农资绿植</a></li>
                <li><a href="#">医药保健</a><span>/</span><a href="#">计生情趣</a></li>
                <li><a href="#">图书</a><span>/</span><a href="#">文娱</a><span>/</span><a href="#">电子书</a></li>
                <li><a href="#">机票</a><span>/</span><a href="#">酒店</a><span>/</span><a href="#">旅游</a><span>/</span><a href="#">生活</a></li>
                <li><a href="#">理财</a><span>/</span><a href="#">众筹</a><span>/</span><a href="#">白条</a><span>/</span><a href="#">保险</a></li>
                <li><a href="#">安装</a><span>/</span><a href="#">维修</a><span>/</span><a href="#">清洗保养</a></li>
                <li><a href="#">工业品</a></li>
            </ul>
        </div>
        <div class="block_right"></div>
  </div>
</body>

文字挺繁杂的，最重要的部分是每一部分都记得写类，样式就可以在CSS里面编辑啦！！

目前不加样式效果如下：

2.通用部分样式

*{
            margin: 0;
            padding: 0;
        }
body{
            background-color: #dbdbdb;/*背景颜色*/
    }

3.写文字标签部分样式

.block{
            position: relative;/*相对定位*/
            margin: auto;
            width: 1190px;
            height: 500px;
        }
        .block_left{
            width: 200px;
            height: 500px;
            float: left;/*左浮动*/
            margin-right: 10px;
            background-color: white;/*左部分背景颜色*/
        }
        .block_right{
            width: 980px;
            height: 500px;
            background-color: yellow;/*右部分背景颜色*/
            float: left;/*左浮动*/
        }
        .left_menu>li{
            list-style: none;/*去掉列表前方小圆点*/
            padding-left: 20px;
            font-size: 14px;
            line-height: 27.5px;
        }
        .left_menu>li>a{
            text-decoration: none;/*设置文本装饰*/
            color: black;
        }
        .left_menu>li>span{
            display: inline-block;/*块级显示，可代替浮动属性*/
            padding: 0 2px;
            font-size: 12px;
        }
 .li_child{
            position: absolute;/*绝对定位*/
            left: 200px;
            top: 0;
            width:990px;
            height: 500px;
            background-color: white;
            border: 1px solid black;
            box-sizing: border-box;
            display: none;
        }

4.鼠标悬停设置

.left_menu>li>a:hover{
            color: red;
        }
        .left_menu>li:hover{
            background-color: #cecece;
        }
.left_menu>li:hover .li_child{
            display: block;/*块状显示*/
        }

最终效果如下图：