用html和CSS简单实现京东侧边栏

最新推荐文章于 2024-04-13 16:58:00 发布

诗霖雪

最新推荐文章于 2024-04-13 16:58:00 发布

阅读量217

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_56713342/article/details/133647993

版权

<!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>
        a{
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
      ul{
        width: 200px;
        background-color: wheat;
      }
      li:hover{
        background-color: rgb(215, 210, 210);
      }
    </style>
</head>
<body>
    <ul type="none">
        <li><a href="">家用电器</a></li>
        <li><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a></li>
        <li><a href="">电脑</a>/<a href="">办公</a></li>
        <li><a href="">家居</a>/<a href="">家具</a>/<a href="">家装</a>/<a href="">厨具</a></li>
        <li><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a></li>
        <li><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a></li>
        <li><a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a></li>
        <li><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a></li>
        <li><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a></li>
        <li><a href="">母婴</a>/<a href="">玩具乐器</a></li>
        <li><a href="">食品</a>/<a href="">酒类</a>/<a href="">生鲜</a>/<a href="">特产</a></li>
        <li><a href="">艺术</a>/<a href="">礼品鲜花</a>/<a href="">农资绿植</a></li>
        <li><a href="">医药保健</a>/<a href="">计生情趣</a></li>
        <li><a href="">图书</a>/<a href="">文娱</a>/<a href="">教育</a>/<a href="">电子书</a></li>
        <li><a href="">机票</a>/<a href="">酒店</a>/<a href="">旅游</a>/<a href="">生活</a></li>
        <li><a href="">支付</a>/<a href="">白条</a>/<a href="">保险</a>/<a href="">企业金融</a></li>
        <li><a href="">安装</a>/<a href="">维修</a>/<a href="">清洗</a>/<a href="">二手</a></li>
        <li><a href="">工业品</a>/<a href="">元器件</a></li>
    </ul>
</body>
</html>

效果图：