html学习--------小米官网侧边栏模仿

最新推荐文章于 2023-05-27 19:53:49 发布

魔术师Y

最新推荐文章于 2023-05-27 19:53:49 发布

阅读量1.1k

点赞数 1

文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_44683094/article/details/113808764

版权

在这里插入图片描述

效果图如上

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="learn.css"> -->
    <style>
        ul {
            /* 消除列表项前面的小黑点 */
            list-style: none;        
        }

        .nav {
            /* 设置类名为nav的div宽230px,高440px */
            width: 230px;
            height: 440px;
        }

        .nav ul {
            padding: 0 0;
        }

        .nav ul li a {
            display: block;
            width: 230px;
            height: 40px;
            line-height: 40px;
            color: #ccc;
            text-decoration: none;
            background-color: #55585a;
            text-indent: 40px;
        }

        .nav ul li div {
            width: 230px;
            height: 20px;
            background-color: #55585a;
        }

        .nav ul li a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <!-- 用一个div，里面放一个无序列表，每一个列表项里放一个链接（除了首位列表项） -->
   <div class="nav">        
       <ul>
           <li><div></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="#">出行 穿戴</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><div></div></li>
       </ul>
   </div>
</body>

</html>

有问题可直接私信或评论问我，做的一般，请大佬们轻点喷。。。。。。

魔术师Y

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
html学习--------小米官网侧边栏模仿

效果图如上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <link rel="style..
复制链接

扫一扫