浮动之热门活动页面

最新推荐文章于 2024-06-16 23:57:52 发布

qq_33151859

最新推荐文章于 2024-06-16 23:57:52 发布

阅读量5.8k

点赞数 4

分类专栏： HTML基础编程题

本文链接：https://blog.csdn.net/qq_33151859/article/details/78240994

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

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