干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街
原理图:
在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果。
使用CSS3S实现只需要如下4步:
1. 准备图片素材
2. 书写相应HTML结构
3. 了解CSS 多栏(Multi-column) 属性
4. 使用CSS 多栏属性完成瀑布流布局
一、第一步 —— 准备图片素材
目标 : 准备图片素材,每张图片的宽度长度最好都不要同样大小的,另外,图片宽度高度也不宜太大
小结 : 准备多张图片素材,宽度高度不宜超过1000像素
二、第二步 —— 书写相应HTML结构
目标 : 在HTML页面中插入多个图片标签img,并正确通过src属性引入鼠标
Document
小结 : 通过img标签的src属性正确引入图片,需要多个img标签,因为我们需要多个图片
三、第三步 —— 了解CSS 多栏(Multi-column) 属性
小结 :
l column-count指定元素应该被分割的列数
l column-width指定列的宽度
l column-gap指定列与列之间的间隙
四、第四步 —— 使用CSS 多栏属性完成瀑布流布局
目标 : 使用CSS多栏属性实现我们的图片瀑布流布局
Document
/*清除所有标签的内外边距*/
*{
margin: 0;
padding: 0;
}
/*选中.box标签*/
.box{
/*把.box中的内容最多分为4列,会根据浏览器的大小变化,但是不会超过4列*/
column-count: 4;
/*规定每列列宽最小为200px*/
column-width: 200px;
/*规定每列的间隙为1em*/
column-gap: 1em;
/*盒子宽度为1000px*/
width: 1000px;
/*实现盒子水平居中*/
margin:0 auto;
}
/*选中.box下的所有img标签*/
.box img{
/*上下左右5px的内填充*/
padding:5px;
/*上下左右5px的外边距*/
margin:5px;
/*圆角边框*/
border-radius:5px;
/*盒子阴影*/
box-shadow:0px 0px 5px gray;
}
小结 : 注意属性名与取值不要写错,每个css属性值后面都有一个英文状态的分号
总结
如果大家对于学习web前端有任何问题(学习方法,学习效率,如何就业),
可以随时来咨询我,这是我的web前端交流学习裙:前面是四八四,中间七五七,最后七六零,
多多交流问题,互帮互助,群里有学习教程和开发工具
使用CSS3可以轻松实现瀑布流布局,但 Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
我们再来回顾一下,我们刚刚实现的步骤:
1. 准备图片素材
2. 书写相应HTML结构 : 使用多张图片,放在同一个大盒子中
3. 了解CSS 多栏(Multi-column) 属性
– column-count 把指定盒子中的内容最多分为多少列,会根据浏览器的大小变化,但是不会超过我们指定的列数
– column-width 规定每列列宽最小为多少
– column-gap 规定每列的间隙
4. 使用CSS 多栏属性完成瀑布流布局
- 如何使用CSS3的transition实现动画效果?
- css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 使用CSS3可以实现的五种很酷很炫的效果
- 使用Jquery,CSS3实现像GooglePlus那样的圆圈效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- 简单使用CSS3实现炫酷读者墙效果
- 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)
- 使用RDRDVTabBarController第三方方法,如何实现中间tab突出显示的效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
- 超慢速移动动画使用CSS3实现流畅效果
- 使用StaggeredGridLayoutManager实现瀑布流效果
- 使用 CSS3 实现 3D 图片滑块效果
- js实现瀑布流效果(使用绝对定位)
- 使用CSS3实现超炫的Loading(加载)动画效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- iphone手机桌面滑动效果使用css3实现