First:
试着利用无序列表设置下图的页面布局:
<!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{
width: 220px;
height: 300px;
margin: 0px auto;
border:3px solid rgb(112, 6, 112);
}
.a{
padding-left: 30px;
list-style-image: url(images/clock.png);
color: rgb(112, 6, 112);
}
.b{
width: 140px;
height: 40px;
padding-left: 30px;
list-style-image:url(images/icon.png);
color:whitesmoke;
background-color: rgb(112, 6, 112);
border: 3px solid white;
line-height: 10px;
}
.c{
padding-left: 30px;
list-style-image: url(images/back.png);
}
</style>
</head>
<body>
<ul>
<div class="a"> <li >7月30日0:00开团</li></div>
<div class="b"> <li >新品团</li> </div>
<div class="b"> <li >尝鲜团</li> </div>
<div class="b"> <li >秒杀团</li> </div>
<div class="b"> <li >清仓团</li> </div>
<div class="c"> <li >返回顶部</li></div>
</ul>
</body>
</html>
补充一点:
对于上面无序列表的做法,是很方便的,如果你不想用无序列表的话,下面还提供一种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第四周作业</title>
<style>
div {
width: 220px;
height: 300px;
border: 2px solid rgb(112, 6, 112);
padding: 2px;
}
.zi {
color: rgb(112, 6, 112);
}
.bai {
color: rgb(252, 250, 250);
}
.z {
width: 120px;
height: 35px;
bottom: 5px;
margin: 7px;
background-color: rgb(112, 6, 112);
}
</style>
</head>
<body>
<div>
<ul>
<img src="images/clock.png">
<span class="zi">
7月30日0:00开团
</span>
<div class="z">
<img src="images/icon.png">
<span class="bai">
新品团
</span>
</div>
<div class="z">
<img src="images/icon.png">
<span class="bai">
尝鲜团
</span>
</div>
<div class="z">
<img src="images/icon.png">
<span class="bai">
秒杀团
</span>
</div>
<div class="z">
<img src="images/icon.png">
<span class="bai">
清仓团
</span>
</div>
<img src="images/back.png">
<span class="zi">
返回顶部
</span>
</ul>
</div>
</body>
</html>
second:
设置如下图的页面布局:
<!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;
}
ol{
width: 300px;
height: 270px;
margin: 20px auto;
border: #f1f1f1 1px solid;
}
li{
width: 290px;
height: 30px;
color: #519b9f;
padding: 10px 10px;
list-style-position: inside;
background: url(images/icon.png) no-repeat 170px 14px;
}
.one{
background: url(images/clock.png) no-repeat 170px 14px;
}
</style>
</head>
<body>
<ol>
<li>小苹果</li>
<li class="one">因为爱情</li>
<li>错错错</li>
<li class="one">会不会</li>
<li>丫头</li>
</ol>
</body>
</html>