学习HTML5+CSS3 (8.2)将图片转成HTML

图片：

练习

HTML：

• 游戏体验棒呆 发烧首选
• 作为一个玩家，我选它！
• 热升华机械键盘不二之选
• 小鲜肉的专属清新味道

• 黑科技跑鞋你穿过没？
• 值！小狗吸尘器仅售99
• 瞬间提高逼格的方式之一
• 送女票礼物买它就对了

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;

}

运行结果：