<!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;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
