css页面特效--多列与瀑布流效果

最新推荐文章于 2024-05-06 10:13:17 发布

hepei_i

最新推荐文章于 2024-05-06 10:13:17 发布

阅读量4.4k

点赞数

分类专栏：前端基础文章标签： css 动画瀑布流效果多列

本文链接：https://blog.csdn.net/qq_41787619/article/details/80232542

版权

前端基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、多列

在css3中，可以创建多列来对文本或者区域进行布局

属性：

column-count：列数

column-gap：距离

column-rule：线及线的颜色

HTML文件为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div1">
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。

</div>
</body>
</html>

css文件为：

.div1{
    column-count: 4;
    -webkit-column-count: 4;
    -webkit-column-gap: 30px;
    column-gap: 30px;
    column-rule: 5px outset red;
    -webkit-column-rule: 5px outset red;
}

显示效果为：

可以看出对多行的文字进行了分列展示。

2、css瀑布流效果

瀑布流就是在网页中每张图片依次按照宽度相同但是高度不同排放

HTML文件为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css瀑布流效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
    <div><img src="image/1.jpg"/></div>
    <div><img src="image/2.jpg"/></div>
    <div><img src="image/3.jpg" /></div>
    <div><img src="image/4.jpg"/></div>
    <div><img src="image/5.jpg"/></div>
    <div><img src="image/6.jpg"/></div>
    <div><img src="image/7.jpg"/></div>
    <div><img src="image/5.jpg"/></div>
    <div><img src="image/6.jpg"/></div>
    <div><img src="image/1.jpg"/></div>
    <div><img src="image/2.jpg"/></div>
    <div><img src="image/3.jpg"/></div>
    <div><img src="image/4.jpg"/></div>
</div>
</body>
</html>

css样式为：

.container{
    column-width: 200px;
    -webkit-column-width:200px;
    column-gap: 5px;
    -webkit-column-gap: 5px;
}
.container div{
    width: 200px;
    margin: 5px 0;
}

主要应用多列column设定固定宽度从而实现瀑布流效果。

显示的瀑布流效果为：

hepei_i

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css页面特效--多列与瀑布流效果

1、多列在css3中，可以创建多列来对文本或者区域进行布局属性： column-count：列数 column-gap：距离 column-rule：线及线的颜色HTML文件为：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;tit
复制链接

扫一扫

专栏目录