<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<div class="cont">
<div class="top">
<ul>
<li class="goods">商品分类</li>
<li>春节特卖</li>
<li>会员特价</li>
<li>鲜果时光</li>
<li>机友必看</li>
</ul>
</div>
<div class="left">
<ul>
<li>女装/内衣</li>
<li>男装/户外</li>
<li>女鞋/男鞋</li>
<li>手表/饰品</li>
<li>美妆/家居</li>
<li>零食/鲜果</li>
<li>电器/手机</li>
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.cont{
width: 700px;
height: 450px;
background: url("../img/bg1.jpg") no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.top{
height: 40px;
background: red;
}
.left{
width: 180px;
}
.top ul li{
float: left;
list-style-type: none;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: 5px;
text-align: center;
}
.left ul li{
border: 1px dashed red;/*虚线*/
list-style-position: inside;
height: 40px;
margin-top: 6px;
border-radius: 6px;
list-style-image: url("../img/list1.png");
text-align: center;
}
.left ul li:hover{/*鼠标移动*/
background-color: aliceblue;
list-style-image: url("../img/list2.png");
}
.goods{
padding-left: 16px;
}
9171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
