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

图片

练习

HTML：

聚超值

爆款推荐

乐视发布新机：功能劲爆

球迷福音！ Xplay6限量售

没想到它手感这么好！

破吉尼斯最快自拍竟是它

儿时记忆，尖头不对起飞

我和海边有个约会

CSS：

* {

padding: 0;

margin: 0;

}

.container {

width: 1120px;

height: 207px;

/*background: salmon;*/

margin: 200px auto;

}

.top {

width: 1120px;

height: 49px;

background: white;

}

.tupain {

margin: 10px 0 0 5px;

float: left;

width: 40px;

height: 29px;

}

.top>p {

font-size: 28px;

color: #0077dd;float: left;

margin: 12px 0 0 10px;

line-height: 28px;

height: 28px;

}

.dot {

float: left;

margin: 22px 0 0 6px;

}

.xian {

width: 1110px;

height: 3px;

background: #e5e5e5;

float: left;

margin: 7px 0 0 5px;

}

.top>ul {

float: right;

margin: 20px 10px 0 0px;

}

.top>ul>li {

list-style: none;

float: left;

margin: 0 5px 0 0;

cursor: pointer;

width: 12px;

height: 12px;

background: #e5e5e5;

border-radius: 50%;

}

.top>ul>li:hover {

background: #288bde;

}

.bottom {

width: 1110px;

height: 158px;

/*background: seagreen;*/

margin: 0 auto;

}

.demo {

width: 170px;

height: 130px;

background: salmon;

margin: 20px 18px 0 0;

float: left;

position: relative;

overflow: hidden;

}

.demo>img {

width: 170px;

height: 130px;

vertical-align: top;

}

.demo>p {

width: 170px;

height: 130px;

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

font-family: "微软雅黑";

font-size: 12px;

line-height: 30px;

color: #FFFFFF;

text-align: center;

position: absolute;

top: 100px;

cursor: pointer;

transition: all 0.4s;

}

.demo:hover p {

top: 0;

}

.bottom>.demo:last-child {

margin: 21px 0 0 0;

}

运行结果