<!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>
</head>
<style type="text/css">
.div1{
margin: 0 auto; width:600px; border:5px solid#ccc;padding: 20px;}
.div2{
margin:0 auto; width:500px; border:1px solid#ccc;padding: 20px;}
li{
text-align: left;
color:#122e67;
height:20px;
padding-bottom: 1px;
border-bottom-style:dotted;
border-bottom-color: #ccc;
list-style-image: url("images/disc.jpg");
}
</style>
<body>
<div class="div1" >
<div class="div2" align="left" >
<ul>
<li>
6+6666666666666666
</li>
<li>
555555555555555555
</li>
<li>
4444444444444444444
</li>
<li>
333333333333333
</li>
<li>
22222222222222
</li>
<li>
11111111111111
</li>
</ul>
</div>
</div>
</body>
</html>
<!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>
</head>
<style type="text/css">
body{
margin:0 auto;
background-color: #ccc;
}
img{
width:154px;
padding-left: 60px;
}
li{
background-color: white;
height:200px;
width:216px;
padding-left: 20px;
padding-top: 20px;
display:inline-block;
overflow: hidden;
}
.span1{
display:block;
font-size: 18px;
color:#000;
}
.span2{
display:block;
font-size:14px;
color:#64C333;
}
</style>
<body>
<ul align="center">
<li>
<span class="span1">
抱抱果新首发
</span>
<span class="span2">
抱―下就幸福
</span>
<img src="images/1.jpg">
</li>
<li>
<span class="span1">
天猫冰箱节
</span>
<span class="span2">
智由随风
</span>
<img src="images/2.jpg">
</li>
<li>
<span class="span1">
西门子全球精选
</span>
<span class="span2">
旗般精品享你所想
</span>
<img src="images/3.jpg">
</li>
<li>
<span class="span1">
进口葡萄酒专场
</span>
<span class="span2">
原瓶进口品质保证
</span>
<img src="images/4.jpg">
</li>
<li>
<span class="span1">
手机专场
</span>
<span class="span2">
原装正品
</span>
<img src="images/5.jpg">
</li>
</ul>
</body>
</html
<!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>
</head>
<style>
div{
margin-left: 50%;
margin: 0 auto;
}
.h1{
line-height: 32px;
font-size:14px;
color:#666;
font-weight: bold;
}
.h2{
line-height: 25px;
font-size:12px;
color:#66667F
}
li{
margin: 10px;
height:320px;
width:250px;
padding: 10px;
border:solid 1px#ccc;
overflow: hidden;
}
strong{
color:#FF5584;
}
</style>
<body>
<div align="center">
<ul>
<li>
<img src="images/pic1.jpg" width="250px" height="188px">
<span class="h1">动画便利店X果壳网《西门子洗碗机...</span>
<p class="h2"><h class="h2"><strong> 原创作品</strong></h>-影视-Motion Graphic</p>
<span class="h2">2小时前上传</span>
<sapn class="h2">
<strong>1284 </strong> 人气/<strong>11 评论/<strong>47 </strong> 推荐
</p>
<img src="images/play.png">
</li>
<li>
<img src="images/pic2.gif" width="250px" height="188px">
<span class="h1">动画便利店X果壳网《到底工资怎么发...</span>
<p class="h2"><h class="h2"><strong> 原创作品</strong></h>-影视-Motion Graphic</p>
<span class="h2">3小时前上传</span>
<sapn class="h2">
<strong>1569 </strong> 人气/<strong>50 评论/<strong>125 </strong> 推荐
</p>
<img src="images/play.png">
</li>
</ul>
</div>
</body>
</html>