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

PS 的图片

运行结果：

加入hover 

切一张图

html:

软件资讯

• 资讯
• 应用
• 设计

音乐识别APP下载

围棋巅峰对决！Alphago将于柯洁正面对决

• 地图APP那些深藏小功能！
• 易到被爆司机不能提现
• 一分钟让Win10天气进化！
• ALphGo或下月挑战柯洁
• 微信能干这些事你知道么
• 安全行业也开始洗牌了？

• QQ新闻推送分成人少儿 版
• 微软终止win vista服务
• 谈谈正版游戏的坑爹事
• win10改进高分辨率显示
• 用App目睹传说的中建筑
• 估值第一的中国企业是？

CSS:

* {

padding: 0;

margin: 0;

}

.demo {

margin: 200px auto;

width: 768px;

height: 295px;

/*background: salmon;*/

}

.top {

width: 750px;

height: 55px;

/*background: skyblue;*/

margin: 0 auto;

border-bottom: 3px solid #e5e5e5;

}

.p1 {

font-family: "微软雅黑";

font-size: 27px;

height: 27px;

line-height: 27px;

color: #0077dd;

margin: 10px 0 0 16px;

float: left;

}

.right {

float: right;

}

.right>li {

list-style: none;

float: left;

font-family: "微软雅黑";

font-size: 12px;

line-height: 12px;

height: 12px;

color: #999999;

margin: 33px 11px 0 0;

cursor: pointer;

}

.bottom {

width: 768px;

height: 240px;

/*background: seagreen;*/

}

.tu {

width: 350px;

height: 200px;

/*background: springgreen;*/

float: left;

margin: 20px 0 0 6px;

position: relative;

overflow: hidden;

cursor: pointer;

}

.tu>img {

width: 350px;

height: 200px;

vertical-align: top;

}

.tu>p {

width: 350px;

height: 200px;

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

color: #FFFFFF;

font-family: "微软雅黑";

font-size: 12px;

line-height: 30px;

text-align: center;

position: absolute;

top: 170px;

transition: all 0.4s;

}

.tu:hover p {

top: 0;

}

.botttomright {

width: 356px;

height: 198px;

/*background: silver;*/

float: right;

margin: 22px 26px 0 0;

}

.biaoti {

color: #FF3333;

font-family: "微软雅黑";

font-size: 16px;

margin: 0 0 0 14px;

cursor: pointer;

}

.bt-left {

float: left;

}

.bt-left>li {

list-style: none;

margin: 0 0 18px 0;

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

cursor: pointer;

}

.bt-left>li:first-child{

margin-top: 15px;

}

.bt-right{

float: right;

}

.bt-right>li{

list-style: none;

margin: 0 0 18px 0;

font-family: "微软雅黑";

font-size: 12px;

height: 12px;

line-height: 12px;

cursor: pointer;

}

.bt-right>li:first-child{

margin-top: 15px;

}