贴图看效果
截屏2020-07-16 下午5.48.10.png
<!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: 0px;
padding: 0px;
}
.nav{
width: 260px;
margin: 50px auto;
background-color:white;
}
a {
text-decoration: none;
}
a:hover {
color:skyblue;
}
.list {
list-style: none;
}
.list li div {
height: 40px;
line-height: 40px;
background-color: yellow;
padding-left: 40px;
}
.nav .list :hover div{
background-color: red;
}
</style>
</head>
<body>
<div class="nav">
<ul class="list">
<li><div><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a></div></li>
<li><div><a href="">电脑</a>/<a href="">办公</a></div></li>
<li><div><a href="">家居</a>/<a href="">家具</a>/<a href="">家装</a>/<a href="">厨具</a></div></li>
<li><div><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a></div></li>
<li><div><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a></div></li>
<li><div><a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a></div></li>
<li><div><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a></div></li>
<li><div><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a></div></li>
</ul>
</div>
</body>
</html>
很简单的代码 就是h5加点css配合实现的效果
网友评论