運(yùn)行結(jié)果：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/parter6.css" />
<title></title>
</head>
<body>
<div class="demo">
<div class="top">
<p class="p1">軟件資訊</p>
<ul class="right">
<li>資訊</li>
<li>應(yīng)用</li>
<li>設(shè)計(jì)</li>
</ul>
</div>
<div class="bottom">
<div class="tu">
<img src="img/parter6-01.png" />
<p>音樂識別APP下載</p>
</div>
<div class="botttomright">
<h4 class="biaoti">圍棋巔峰對決！Alphago將于柯潔正面對決</h4>
<ul class="bt-left">
<li>地圖APP那些深藏小功能！</li>
<li>易到被爆司機(jī)不能提現(xiàn)</li>
<li>一分鐘讓W(xué)in10天氣進(jìn)化！</li>
<li>ALphGo或下月挑戰(zhàn)柯潔</li>
<li>微信能干這些事你知道么</li>
<li>安全行業(yè)也開始洗牌了？</li>
</ul>
<ul class="bt-right">
<li>QQ新聞推送分成人少兒 版</li>
<li>微軟終止win vista服務(wù)</li>
<li>談?wù)務(wù)嬗螒虻目拥?lt;/li>
<li>win10改進(jìn)高分辨率顯示</li>
<li>用App目睹傳說的中建筑</li>
<li>估值第一的中國企業(yè)是？</li>
</ul>
</div>
</div>
</div>
</body>
</html>
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;
}
