HTML和CSS实现电商网站左侧边栏导航

最新推荐文章于 2022-10-19 00:30:22 发布

夹心776655

最新推荐文章于 2022-10-19 00:30:22 发布

阅读量726

点赞数 1

分类专栏：代码实例文章标签： html css

本文链接：https://blog.csdn.net/qq_37086980/article/details/109692275

版权

代码实例专栏收录该内容

72 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置浏览器的默认样式 */
        *{
            margin: 0;padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        /* --------------------- */
        .wrap{
            width: 190px;
            height: 482px;
            background-color: #252221;
        }
        .wrap li{
            height: 32px;
            line-height: 32px;
            text-indent: 10px;
        }
        .wrap li:hover{
            background-color: #fff;
            
        }
        .wrap li:hover a{
            color: #333;
        }
        .wrap li a{
            color: #fff;
            font-size: 12px;
        }
        .wrap li a:hover{
            color: #ff6600;
        }
        .wrap li span{
            color: #efefef;
            padding: 0px 8px 0px 6px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="wrap">
       <ul class="sidenav">
                <li><a href="./html/list.html">手机</a><span>|</span><a href="#">运营商</a><span>| </span><a href="#inteldigit">智能数码</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="#">DIY</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><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><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><span>|</span><a href="#">文学</a></li>
                <li><a href="#">医药健康</a><span>|</span><a href="#">计生情趣</a><span>|</span></li>
                <li><a href="#">理财</a><span>|</span><a href="#">分期</a><span>|</span><a href="#">保险</a></li>
            </ul>
    </div>
</body>
</html>

夹心776655

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS实现电商网站左侧边栏导航

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 重置浏览器的默认样式 *...
复制链接

扫一扫