HTML5+CSS3熱門活動頁面


<!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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM