图片：
HTML：
<div class="demo">
<div class="top1">
<img src="img/parter2-1.png" / class="img1">
<img src="img/parter2-2.png" />
</div>
<div class="top2">
<img src="img/parter2-3.png" class="img2" />
<img src="img/parter2-4.png" />
</div>
<ul class="left">
<li><span class="dots"></span>游戏体验棒呆 发烧首选</li>
<li><span class="dots"></span>作为一个玩家，我选它！</li>
<li><span class="dots"></span>热升华机械键盘不二之选</li>
<li><span class="dots"></span>小鲜肉的专属清新味道</li>
</ul>
<ul class="right">
<li><span class="dots"></span>黑科技跑鞋你穿过没？</li>
<li><span class="dots"></span>值！小狗吸尘器仅售99</li>
<li><span class="dots"></span>瞬间提高逼格的方式之一</li>
<li><span class="dots"></span>送女票礼物买它就对了</li>
</ul>
</div>
CSS：
* {
padding: 0;
margin: 0;
}
.demo {
width: 367px;
height: 425px;
/*background: salmon;*/
margin: 200px auto;
border: 1px dashed blue;
}
.top1 {
width: 367px;
height: 144px;
background: white;
}
.img1 {
margin: 14px 10px 0 6px;
}
.top2 {
width: 367px;
height: 140px;
background: white;
}
.img2 {
margin: 10px 10px 0 6px;
}
.dots {
float: left;
width: 3px;
height: 3px;
background: #dbdbdb;
margin: 5px 7px 0 0;
display: block;
}
.left {
float: left;
list-style: none;
margin-right: 10px;
margin-top: 19px;
}
.left>li {
list-style: none;
width: 170px;
height: 14px;
font-size: 14px;
line-height: 14px;
color: #333333;
margin-bottom: 16px;
}
.right {
float: left;
list-style: none;
margin-top: 19px;
}
.right>li {
list-style: none;
width: 170px;
height: 14px;
font-size: 14px;
line-height: 14px;
color: #333333;
margin-bottom: 16px;
}
运行结果：
