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

图片：

练习使用PS 量图片 

运行结果：

图片转化HTML

热门笔记本

• 超极本
• 触控本
• 游戏本

• 1

  联想YOGA A12

  ￥2299

• 2

  联想小新Air 13 pro

  ￥5499

• 3

  三星8500 GM-X08

  ￥6399

• 4

  鸿基Swift 7

  ￥9999

• 5

  鸿基VX5-591G-58AX

  ￥5999

• 6

  戴尔 燃7000 14(i5-7200U/4G/128G+500)

  ￥5599

• 7

  联想Miix5(i5/8G/256G)

  ￥5499

CSS：

* {

padding: 0;

margin: 0;

}

.demo {

width: 335px;

height: 278px;

margin: 200px auto;

/*background: salmon;*/

}

.top {

width: 100%;

height: 42px;

/*background: aqua;*/

border-bottom: 1px solid #e5e5e5;

float: left;

}

.p1 {

font-family: "微软雅黑";

font-size: 19px;

line-height: 19px;

height: 19px;

margin-top: 12px;

margin-left: 11px;

color: #0077dd;

float: left;

font-weight: 600;

}

.right {

float: right;

}

.right>li {

list-style: none;

float: left;

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

color: #999999;

margin-top: 19px;

margin-right: 12px;

cursor: pointer;

margin-bottom: 11px;

}

.right>li:last-child {

margin-right: 16px;

}

.bottom {

width: 335px;

height: 236px;

/*background: aquamarine;*/

float: left;

}

.bottom>ul {

margin-top: 21px;

}

.bottom>ul>li {

list-style: none;

line-height: 12px;

margin-bottom: 18px;

width: 100%;

height: 12px;

}

.number1 {

color: #ff3333;

float: left;

margin-left: 8px;

margin-right: 8px;

}

.number2 {

color: #ff9600;

float: left;

margin-left: 8px;

margin-right: 8px;

}

.number3 {

color: #999999;

float: left;

margin-left: 8px;

margin-right: 8px;

}

.px {

float: left;

height: 12px;

font-size: 12px;

color: #333333;

}

.p3 {

float: right;

height: 9px;

font-size: 9px;

color: #999999;

}