侧边展示

最新推荐文章于 2023-02-22 11:25:31 发布

清砚丶

最新推荐文章于 2023-02-22 11:25:31 发布

阅读量95

点赞数

分类专栏：初学那些事儿

本文链接：https://blog.csdn.net/czly0412/article/details/107712348

版权

初学那些事儿专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一个基础侧边暂时栏
<!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>
        ul{
            list-style: none;
        }
        div{
            width: 300px;
            height: 100px;
            margin: 0 auto;
            background-color: white;
        }
        a:hover{
            color: red;
        }
        li:hover{
            background-color: powderblue;
        }
        ul{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href='' class='jiayongdianqi'>家用电器</a></li>
            <li><a href='' class='shouji'>手机</a>
                <span>/</span>
            <a href='' class='yunyingshang'>运营商</a>
                <span>/</span>
            <a href='' class='shuma'>数码</a></li>
            <li><a href='' class='diannao'>电脑</a>
                <span>/</span>
            <a href='' class='bangong'>办公</a>
                <span>/</span>
            <a href='' class='dianjing'>电竞</a></li>
            
            <li><a href='' class='fangchan'>房产</a>
                <span>/</span>
            <a href='' class='qiche'>汽车</a>
                <span>/</span>
            <a href='' class='qicheyongpin'>汽车用品</a></li>
            <li><a href='' class='shipin'>食品</a>
            <span>/</span>
            <a href='' class='jiulei'>酒类</a>
            <span>/</span>
            <a href='' class='shegnxian'>生鲜</a></li>
            <li><a href='' class='tushu'>图书</a>
            <span>/</span>    
            <a href='' class='wenyv'>文娱</a>
            <span>/</span>  
            <a href='' class='dianzishu'>电子书</a></li>
            <li><a href='' class='jipiao'>机票</a>
            <span>/</span>    
            <a href='' class='lvyou'>旅游</a>
            <span>/</span>
            <a href='' class='shenghuo'>生活</a></li> 
            <li><a href='' class='jiaju'>家居</a>
            <span>/</span>
            <a href='' class='jiazhuang'>家装</a>
            <span>/</span>
            <a href='' class='chuju'>厨具</a></li>
        </ul>
    </div>
</body>
</html>