浮动之摄影社区热门小镇

最新推荐文章于 2022-05-16 10:32:29 发布

qq_33151859

最新推荐文章于 2022-05-16 10:32:29 发布

阅读量6.7k

点赞数 4

分类专栏： HTML基础编程题

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

版权

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

32 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>摄影社区热门小镇页面</title>
		<link href="css/Page_247_3.css" rel="stylesheet" type="text/css" />"
	</head>
	<body>
		<div class="container">
			<!--标题-->
			<div class="top">
				<h1>摄影社区热门小镇</h1>
			</div>
			<!--内容-->
			<div class="bottom">
				<div class="pic1">
					<img src="img1/pic_01.jpg"  />
					<ul>
						<li><h4><a href="#">风景狙击手</a></h4></li>
						<li>成员：80</li>
						<li>作品：276</li>
					</ul>
				</div>
				<div class="pic2">
					<img src="img1/pic_02.jpg"  />
					<ul>
						<li><h4><a href="#">叙事感</a></h4></li>
						<li>成员：235</li>
						<li>作品：116</li>
					</ul>
				</div>
				<div class="pic3">
					<img src="img1/pic_03.jpg"  />
					<ul>
						<li><h4><a href="#">定焦视界</a></h4></li>
						<li>成员：56</li>
						<li>作品：456</li>
					</ul>
				</div>
				<div class="pic4">
					<img src="img1/pic_04.jpg"  />
					<ul>
						<li><h4><a href="#">中画幅乐园</a></h4></li>
						<li>成员：130</li>
						<li>作品：239</li>
					</ul>
				</div>
				<div class="pic5">
					<img src="img1/pic_05.jpg"  />
					<ul>
						<li><h4><a href="#">《卡啪》先锋...</a></h4></li>
						<li>成员：78</li>
						<li>作品：125</li>
					</ul>
				</div>
				<div class="pic6">
					<img src="img1/pic_06.jpg"  />
					<ul>
						<li><h4><a href="#">植物的无声世界</a></h4></li>
						<li>成员：235</li>
						<li>作品：1258</li>
					</ul>
				</div>
				
			</div>
		</div>
	</body>
</html>

//CSS样式
body{
	
	padding: 0; 
	background: pink;
}
.container{
	border: 1px solid red;
	width: 500px;
	overflow: hidden;
	/*padding: 0px 10px 10px 10px;*/
	border: 1px solid #d0d0d0;
	margin: 0px auto;
	background: white;
}
.top h1{
	font-size: 12px;
	margin-bottom: 20px;
	padding-left: 10px;
}
.pic1,.pic2,.pic3,.pic4,.pic5,.pic6{
	/*border: 1px dashed gray;*/
	width: 30%;
	overflow: hidden;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
}

ul{
	list-style: none;
	float: left;
	padding-left: 8px;
	margin-top: 0px;
	
	
}

li{
	font-size: 9px;
	line-height:20px;
}

img{
	display: inline-block;
	float: left;
	border: 1px solid #d0d0d0;
	padding: 5px;
	border-radius:3px ;
	margin-top: 12px;
}
a{
	text-decoration: none;
}
h4{
	font-size: 10px;
	margin-bottom: 0px;
}
a:hover{
    text-decoration: underline;
}