CSS的简单练习

来源：互联网发布：系统动力学软件编辑：程序博客网时间：2024/05/12 05:45

<!DOCTYPE html>
<html>
<head>
<title>作业</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0px;
padding: 0px;
width: 1020px;
height: 422px;
margin: auto;
}
.Div{
width: 1010px;
height: 422px;
margin: 5px;

}
.div1{
width: 1015px;
height: 50px;
border-top: 1px solid #DDDDDD;


}

.div1-2{
font-weight: bold;
font-size: 26px;
font-family: "黑体";
color: #5A6A5D ;
cursor: pointer;
margin-left: 5px;
}
.div1-3{
font-weight: bold;
font-size: 14px;
font-family: "黑体";
color: #E4412E;
cursor: pointer;
margin-left: 113px;
}
.div1-4{
font-weight: bold;
font-size: 14px;
font-family: "黑体";
color: #5A6A5D ;
cursor: pointer;
margin-left: 102px;
}
.div1-5{
font-weight: bold;
font-size: 14px;
font-family: "黑体";
color: #5A6A5D ;
cursor: pointer;
margin-left: 102px;
}
.div1-6{
font-weight: bold;
font-size: 14px;
font-family: "黑体";
color: #5A6A5D ;
cursor: pointer;
margin-left: 102px;
}
.div1-7{
font-weight: bold;
font-size: 14px;
font-family: "黑体";
color: #5A6A5D ;
cursor: pointer;
margin-left: 102px;
}
.div2{
width: 213px;
height: 364px;
background-image: url(12.jpg);
float: left;
line-height: 24px;
}

li{ color: #676767;list-style-type: none;font-size: 12px;cursor: pointer;}
.div3{
width: 790px;
height: 363px;
float: left;


}
.div3-1{
width: 157px;
height: 364px;
float: left;
}
.div3-1-1{
width: 157px;
height: 182px;

}
.div3-1-2{
width: 157px;
height: 182px;


}
.div3-2{
width: 157px;
height: 364px;
float: left;
}
.div3-3{
width: 157px;
height: 364px;
float: left;
}
.div3-3-1{
width: 155px;
height: 182px;

}
.div3-3-2{
width: 157px;
height: 182px;
}
.div3-4{
width: 157px;
height: 363px;
float: left;
}
.div3-5{
width: 157px;
height: 364px;
float: left;
}
.div3-5-1{
width: 155px;
height: 182px;

}
.div3-5-2{
width: 157px;
height: 182px;
}
</style>
</head>
<body>
<div class="Div">
<div class="div1">

<img src="1.jpg" class="1-1">
<span class="div1-2">服饰鞋包</span>
<span class="div1-3">特价商品</span>
<span class="div1-4">品牌男装</span>
<span class="div1-5">品牌女装</span>
<span class="div1-6">鞋靴箱包</span>
<span class="div1-7">户外运动</span>
</div>
<div class="div2">
<ul class="div2-1">
<li>男装</li>
<li>女装</li>
<li>服装配饰</li>
<li>内衣</li>
<li>女鞋</li>
<li>男鞋</li>
<li>设计师</li>
<li>功能箱包</li>
<li>潮流女包</li>
<li>时尚男包</li>
<li>户外鞋服</li>
<li>户外装备</li>
<li>运动器械</li>
<li>新版运动馆</li>
</ul>
</div>
<div class="div3">
<div class="div3-1">
<div class="div3-1-1">
<img src="2.jpg">
</div>
<div class="div3-1-2">
<img src="7.jpg">
</div>
</div>
<div class="div3-2">
<img src="3.jpg">
</div>
<div class="div3-3">
<div class="div3-3-1">
<img src="4.jpg">
</div>
<div class="div3-3-2">
<img src="8.jpg">
</div>
</div>
<div class="div3-4">
<img src="5.jpg">
</div>
<div class="div3-5">
<div class="div3-5-1">
<img src="6.jpg">
</div>
<div class="3-5-2">
<img src="9.jpg">
</div>
</div>

</div>
</div>
</body>
</html>

0 0