HTML5+CSS3热门活动页⾯<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
html网页设计css<title>热门活动页⾯</title>
<style type="text/css">
#list{
width: 680px;
margin: 0px auto;
overflow: hidden;
}
#list1{
overflow: hidden;
width: 640px;
margin: 0px auto;
}
#list2{
overflow: hidden;
width: 640px;
margin: 0px auto;
}
#title{
overflow: hidden;
}
/*更多*/
.more{
float: right;
}
h1:nth-of-type(1){
margin-left: 50px;
}
h1{
float: left;
font-size: 14px;
}
ul{
list-style: none;
}
.pic1,.pic2,.pic3,.pic4{
float: left;
}
.pic1{
margin-top:16px;
}
li{
font-size: 12px;
}
.pic3,.pic4{
margin-top: 0px;
}
a{
font-weight: normal;
color: #5b666b;
text-decoration: none;
}
</style>
</head>
<body>
<div id="list">
<div id="title">
<h1>热门活动</h1>
<h1 class="more"><a href="#"><h1>更多</h1></a></h1>
</div>
<div id="list1">
<ul class="pic1">
<li><img src="2/img1.png" /></li>
<li>推荐活动 |原创⾳乐现⾦榜T榜</li>
</ul>
<ul class="pic2">
<li><img src="2/img2.png" /></li>
<li>推荐节⽬|《TAImusic》爆笑来袭</li>
</ul>
</div>
<div id="list2">
<ul class="pic3">
<li><img src="2/img3.png" /></li>
<li>推荐歌单 | 继续宠爱张国荣</li>
</ul>
<ul class="pic4">
<li><img src="2/img4.png" /></li>
<li>推荐活动| 330⾦属⾳乐巡演成都⼩酒馆⾳乐空间</li>        </ul>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。