<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>