27
2020
05

瀑布流照片页代码


网上看到这样一种页面照片排版效果，觉得很不错。研究了一下，其实很简单。用下面的代码就可以了。但是图片少于4张的时候，排版会有些错乱。所以，最好是四张图片以上的页面用这种排版模式。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>瀑布流照片页代码</title>


<!--瀑布流样式定义开始-->
<style type="text/css">
.container {
width: 75%;
margin: 0 auto;
}

.waterfall {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

.pin {
padding: 1em;
border-radius: 8px;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: white;
-moz-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}
.pin img {
width: 100%;
padding-bottom: 1em;
margin-bottom: 0.5em;
border-bottom: 1px solid #cccccc;
}
</style>

<!--瀑布流样式定义结束-->


</head>



<body>


<!--瀑布流框架开始-->

<div class="tk_liebiao container">
<div class="waterfall">


<!--添加照片，循环复制下面整个dl框架即可-->

<dl class="pin">
<dt><img src="1.jpg"></dt>
<dd>测试图1</dd>
</dl>


<dl class="pin">
<dt><img src="2.jpg"></dt>
<dd>测试图1</dd>
</dl>


<dl class="pin">
<dt><img src="3.jpg"></dt>
<dd>测试图1</dd>
</dl>


<dl class="pin">
<dt><img src="4.jpg"></dt>
<dd>测试图1</dd>
</dl>


<dl class="pin">
<dt><img src="5.jpg"></dt>
<dd>测试图1</dd>
</dl>


</div>
</div>

<!--瀑布流框架结束-->

</body>
</html>

发布:dizzy | 分类:CSS3 | 评论:0 | 浏览:
« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。