热门活动页面"/>
浮动之热门活动页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>热门活动页面</title><link href="css/Page_232_2.css" rel="stylesheet" type="text/css" /> </head><body><div id="list"><div id="title"><h1>热门活动</h1><h1 class="more"><a href="#">更多</a></h1></div><div id="list1"><ul class="pic1"><li><img src="img/img1.png" /></li><li>推荐活动 |原创音乐现金榜T榜</li></ul><!--<div></div>--><ul class="pic2"><li><img src="img/img2.png" /></li><li>推荐节目|《TAImusic》爆笑来袭</li></ul><!--<div></div>--></div><div id="list2"><ul class="pic3"><li><img src="img/img3.png" /></li><li>推荐歌单 | 继续宠爱张国荣</li></ul><!--<div></div>--><ul class="pic4"><li><img src="img/img4.png" /></li><li>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</li></ul><!--<div></div>--></div></div></body>
</html>//CSS样式
#list{width: 680px;/*border:1px solid black;*/margin: 0px auto;overflow: hidden;
}
#list1{/*border: 1px solid green;*/overflow: hidden;width: 640px;margin: 0px auto;
}#list2{/*border: 1px solid red;*/overflow: hidden;width: 640px;margin: 0px auto;
}
#title{overflow: hidden;
}
/*更多*/
.more{float: right;
}
h1:nth-of-type(1){margin-left: 50px;
}
h1{/*border: 1px dashed black;*/float: left;font-size: 14px;
}
ul{/*border: 1px dashed gray;*/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;
}更多推荐
浮动之热门活动页面
发布评论