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

目标图片：

目标

切图1

切图2

切图05

切图06

切图07

html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="p1">太平洋网络推荐</p>

</div>

</div>

</div>

</div>

</div>

</ul>

</div>

<p>广汽菲克Jeep</p>

</div>

<li>

<div class="hui3px"></div>轩逸最高优惠3.1万</li>

<li>

<div class="hui3px"></div>大众Polo最高优惠0.8万</li>

</ul>

</div>

<p class="md_right_p1">Jeep75周年庆 0元开走Jeep</p>

<li>

<div class="hui3px"></div>帕萨特最高优惠2.5万</li>

<li>

<div class="hui3px"></div>宝来最高优惠1.15万</li>

</ul>

</div>

<p>上汽通用雪佛兰探界者</p>

</div>

<li>

<div class="hui3px"></div>帕萨特最高优惠2.5万</li>

<li>

<div class="hui3px"></div>宝来最高优惠1.15万</li>

</ul>

<p>东风日产新款奇骏</p>

</div>

<li>

<div class="hui3px"></div>英菲尼迪新款Q60上市</li>

<li>

</ul>

</div>

</body>

</html>

CSS:

* {

padding: 0;

margin: 0;

}

.demo {

margin: 200px auto;

width: 1120px;

height: 313px;

/*background: salmon;*/

}

.top {

width: 1110px;

height: 52px;

background: white;

margin: 0 auto;

border-bottom: 3px solid #e5e5e5;

z-index: 1;

}

.top>img {

margin: 14px 0 0 10px;

float: left;

}

.p1 {

font-family: "微软雅黑";

font-size: 27px;

line-height: 27px;

height: 27px;

color: #0077dd;

float: left;

margin: 14px 0 0 5px;

}

.xiaogezi {

width: 54px;

height: 24px;

/*background: skyblue;*/

float: right;

margin-top: 28px;

margin-left: 2px;

z-index: 2;

position: relative;

}

.xiaogezi>p {

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

text-align: center;

color: #333333;

cursor: pointer;

}

.lvse3px {

background: #77c210;

width: 100%;

height: 3px;

float: left;

position: absolute;

bottom: -3px;

}

.huangse3px {

background: #ffd15f;

width: 100%;

height: 3px;

float: left;

position: absolute;

bottom: -3px;

}

.fense3px {

background: #eb5da7;

width: 100%;

height: 3px;

float: left;

position: absolute;

bottom: -3px;

}

.juse3px {

background: #ff954d;

width: 100%;

height: 3px;

float: left;

position: absolute;

bottom: -3px;

}

.lanse3px {

background: #559eea;

width: 100%;

height: 3px;

float: left;

position: absolute;

bottom: -3px;

}

.bottom {

width: 1110px;

height: 243px;

/*background: slateblue;*/

margin: 0 auto;

}

.left {

float: left;

width: 350px;

height: 222px;

background: white;

margin-top: 20px;

}

.left>img {

width: 350px;

height: 200px;

}

.xulleft {}

.xulleft>li {

list-style: none;

width: 12px;

height: 12px;

background: #e5e5e5;

border-radius: 50%;

float: left;

cursor: pointer;

margin-right: 5px;

}

.xulleft>li:first-child {

margin-left: 133px;

}

.xulleft>li:hover {

background: #288bde;

}

.md {

width: 348px;

height: 220px;

background: white;

float: left;

margin-top: 21px;

margin-left: 30px;

position: relative;

}

.bottomP1 {

float: left;

font-family: "微软雅黑";

font-size: 15px;

height: 15px;

line-height: 15px;

color: #999999;

margin-top: 5px;

}

.bottomP2 {

float: left;

font-family: "微软雅黑";

font-size: 19px;

height: 19px;

line-height: 19px;

color: #0077dd;

margin-left: 19px;

}

.md_left {

width: 160px;

height: 180px;

/*background: seagreen;*/

float: left;

position: absolute;

top: 40px;

}

.wunai {

position: relative;

width: 160px;

height: 120px;

overflow: hidden;

}

.wunai>img {

width: 160px;

height: 120px;

vertical-align: top;

}

.wunai>p {

width: 160px;

height: 120px;

background: rgba(0, 0, 0, 0.4);

/*color: floralwhite;*/

text-align: center;

font-family: "微软雅黑";

font-size: 12px;

position: absolute;

top: 90px;

line-height: 30px;

transition: top 1s;

color: #FFFFFF;

}

.wunai:hover>p {

top: 0;

}

.md_ul {

float: left;

position: relative;

}

.md_ul>li {

list-style: none;

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

float: left;

margin-top: 18px;

position: relative;

}

.hui3px {

width: 3px;

height: 3px;

background: #dbdbdb;

margin-top: 4px;

margin-right: 7px;

float: left;

}

.md_right {

width: 168px;

height: 180px;

/*background: seagreen;*/

position: absolute;

right: 0;

top: 40px;

}

.md_right_p1 {

font-family: "微软雅黑";

font-size: 15px;

height: 15px;

line-height: 21px;

font-weight: 600;

}

.md_right_p2 {

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

margin-top: 37px;

color: #333333;

}

.md_right_p3 {

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

margin-top: 10px;

color: #333333;

}

.submit {

width: 90px;

height: 25px;

background: #ff8800;

border: 0;

cursor: pointer;

color: #ffffff;

border-radius: 3px;

margin-top: 9px;

}

.right {

width: 330px;

height: 221px;

/*background: seagreen;*/

float: right;

margin-top: 20px;

position: relative;

}

.right_P {

font-family: "微软雅黑";

font-size: 20px;

line-height: 20px;

height: 20px;

color: #0077dd;

float: left;

}

.tupian {

width: 160px;

height: 120px;

margin-top: 40px;

position: relative;

overflow: hidden;

}

.tupian>img {

width: 160px;

height: 120px;

vertical-align: top;

}

.tupian>p {

width: 160px;

height: 120px;

background: rgba(0, 0, 0, 0.4);

color: #FFFFFF;

font-family: "微软雅黑";

font-size: 12px;

line-height: 30px;

text-align: center;

position: absolute;

top: 90px;

transition: top 1s;

}

.tupian:hover>p {

top: 0;

}

.right_ul {

/*float: left;*/

}

.right_ul>li {

list-style: none;

font-family: "微软雅黑";

font-size: 12px;

line-height: 12px;

margin-top: 18px;

}

.tupian1 {

width: 160px;

height: 120px;

margin-top: 40px;

position: relative;

overflow: hidden;

left: 170px;

bottom: 220px;

}

.tupian1>img {

width: 160px;

height: 120px;

vertical-align: top;

}

.tupian1>p {

width: 160px;

height: 120px;

background: rgba(0, 0, 0, 0.4);

color: #FFFFFF;

font-family: "微软雅黑";

font-size: 12px;

line-height: 30px;

text-align: center;

position: absolute;

top: 90px;

transition: top 1s;

}

.tupian1:hover>p {

top: 0;

}

.lastul {

position: absolute;

top: 158px;

left: 170px;

}

.lastul>li {

list-style: none;

font-family: "微软雅黑";

font-size: 12px;

line-height: 12px;

margin-top: 18px;

}

运行结果

达到自己预期，但是我觉得还需要练习

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

推荐阅读更多精彩内容