圖片：
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>游戲體驗(yàn)棒呆 發(fā)燒首選</li>
<li><span class="dots"></span>作為一個(gè)玩家，我選它赃春！</li>
<li><span class="dots"></span>熱升華機(jī)械鍵盤不二之選</li>
<li><span class="dots"></span>小鮮肉的專屬清新味道</li>
</ul>
<ul class="right">
<li><span class="dots"></span>黑科技跑鞋你穿過(guò)沒(méi)厉碟？</li>
<li><span class="dots"></span>值籍凝！小狗吸塵器僅售99</li>
<li><span class="dots"></span>瞬間提高逼格的方式之一</li>
<li><span class="dots"></span>送女票禮物買它就對(duì)了</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;
}
運(yùn)行結(jié)果：
