图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街
原理图:
在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果。
使用CSS3S实现只需要如下4步:
1. 准备图片素材
2. 书写相应HTML结构
3. 了解CSS 多栏(Multi-column) 属性
4. 使用CSS 多栏属性完成瀑布流布局
一、第一步 —— 准备图片素材
目标 : 准备图片素材,每张图片的宽度长度最好都不要同样大小的,另外,图片宽度高度也不宜太大
小结 : 准备多张图片素材,宽度高度不宜超过1000像素
二、第二步 —— 书写相应HTML结构
目标 : 在HTML页面中插入多个图片标签img,并正确通过src属性引入鼠标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div class="box"><img src="data:images/P_001.jpg"/><img src="data:images/P_002.jpg"/><img src="data:images/P_003.jpg"/><img src="data:images/P_004.jpg"/><img src="data:images/P_005.jpg"/><img src="data:images/P_006.jpg"/><img src="data:images/P_007.jpg"/><img src="data:images/P_008.jpg"/><img src="data:images/P_009.jpg"/><img src="data:images/P_010.jpg"/><img src="data:images/P_011.jpg"/><img src="data:images/P_012.jpg"/><img src="data:images/P_013.jpg"/><img src="data:images/P_014.jpg"/><img src="data:images/P_015.jpg"/><img src="data:images/P_016.jpg"/><img src="data:images/P_017.jpg"/><img src="data:images/P_018.jpg"/><img src="data:images/P_019.jpg"/><img src="data:images/P_020.jpg"/></div>
</body>
</html>
小结 : 通过img标签的src属性正确引入图片,需要多个img标签,因为我们需要多个图片
三、第三步 —— 了解CSS 多栏(Multi-column) 属性
小结 :
l column-count指定元素应该被分割的列数
l column-width指定列的宽度
l column-gap指定列与列之间的间隙
四、第四步 —— 使用CSS 多栏属性完成瀑布流布局
目标 : 使用CSS多栏属性实现我们的图片瀑布流布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*清除所有标签的内外边距*/*{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;}</style>
</head>
<body><div class="box"><img src="data:images/P_001.jpg"/><img src="data:images/P_002.jpg"/><img src="data:images/P_003.jpg"/><img src="data:images/P_004.jpg"/><img src="data:images/P_005.jpg"/><img src="data:images/P_006.jpg"/><img src="data:images/P_007.jpg"/><img src="data:images/P_008.jpg"/><img src="data:images/P_009.jpg"/><img src="data:images/P_010.jpg"/><img src="data:images/P_011.jpg"/><img src="data:images/P_012.jpg"/><img src="data:images/P_013.jpg"/><img src="data:images/P_014.jpg"/><img src="data:images/P_015.jpg"/><img src="data:images/P_016.jpg"/><img src="data:images/P_017.jpg"/><img src="data:images/P_018.jpg"/><img src="data:images/P_019.jpg"/><img src="data:images/P_020.jpg"/></div>
</body>
</html>
小结 : 注意属性名与取值不要写错,每个css属性值后面都有一个英文状态的分号
总结
使用CSS3可以轻松实现瀑布流布局,但 Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
我们再来回顾一下,我们刚刚实现的步骤:
1. 准备图片素材
2. 书写相应HTML结构 : 使用多张图片,放在同一个大盒子中
3. 了解CSS 多栏(Multi-column) 属性
– column-count 把指定盒子中的内容最多分为多少列,会根据浏览器的大小变化,但是不会超过我们指定的列数
– column-width 规定每列列宽最小为多少
– column-gap 规定每列的间隙
4. 使用CSS 多栏属性完成瀑布流布局
原作者:黑马程序员
原平台:传智播客官网
原链接:Web前端培训:如何使用CSS3实现瀑布流效果?
图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?相关推荐
- 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- css3 下边框缓缓划过_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 25个Web前端开发工程师必看的国外大牛和酷站
逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜---- Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...
- web前端开发工程师必会的5种网页布局方法?
作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些前端开发工程师不可不知的5种布局方式! 一.静态布局(static la ...
- web前端开发初学者必看的学习路线图课程内容分享
随着web前端需求量的日益增加,企业对前端人员的技能要求也越来越高,我们如何能学到满足企业的web前端技能,向着高薪前进,那你就的了解企业需要的人才需求,还的提升自身的技术能力,那么想从事web前端行 ...
- web前端项目实例网站_招聘 | 北京 | tSynsth系联设计 建筑设计师 / 室内设计师 / 项目负责人 / WEB前端开发工程师 / 实习生...
关于我们 系联设计(Tuning Synesthesia ,tSynsth, TS)是一支由多元背景的设计师与软件工程师组成的国际团队,致力于想法与过程让设计 "可持续". 系联专 ...
- 前端改变div排序_转行学习web前端开发,需要哪些工具和需要学习什么?
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
- 前端工程师需要学习ps 吗_转行学习web前端开发,需要哪些工具和需要学习什么?...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
- 两张图让你了解,Web前端开发就业前景及薪资究竟如何!
Web前端并不算新兴行业,在国内也已经发展好些年了,随着互联网电商项目的不断发展,让企业越来越重视用户体验,而Web前端开发工程师正是实现这样一切的关键.在越来越多的人转行进入前端行业时,Web前端工 ...
最新文章
- java 继承 接口 练习,java:面向对象-抽象类、继承、接口结合练习
- 以array开头的php函数,PHP函数、数组
- spirng 如何把404转到特定的页面展示
- 2016/8/18 Linux常用命令 :目录、文件处理命令
- 搭建K8s集群(kubeadm方式)-部署master节点
- flume+elasticsearch日志收集分析
- NEKO's Maze Game(思维)
- 百度网盘7.3.1.10版本增加工作空间功能,可实现百度网盘与电脑文件夹同步
- Javascript JSON格式
- Android ImageView的scaleType(图片比例类型)属性与adjustViewBounds(调整视图边界)属性
- 《剑指offer》第二章小结(1)——链表的基本操作
- HTML的form表单标签
- RS485绝对值编码器Arduino数据读取
- 这次是100秒 蓝箭航天80吨液氧甲烷发动机100%推力试车
- Linux MMC 框架源码分析
- python调用手机摄像头识别二维码_JS调用安卓手机摄像头扫描二维码
- 74HC165基础篇(一)
- 万物互联时代的兴起及其边缘算法效应
- np.power与np.linalg.inv
- Android客户端 和 pc服务器 建立socket连接并发送数据
热门文章
- java计算点在圆内外_java – 在O((n s)log n中计算圆交叉点)
- python棋子判定_python微信跳一跳系列之棋子定位颜色识别
- 信息源按加工深度划分_工程勘察时如何划分地层?勘查总工实力整理
- 存储过程系列之存储过程返回值总结
- 伟大的RAC和MVVM入门(二)
- Windows 系统部署之创建应答文件
- cisco 2610 2950 单臂路由得一些心得
- android studio maven gradle,Maven Dependencies with Android Studio / Gradle
- python管道pipe_Python multiprocessing模块中的Pipe管道
- html 画布 重置,html5清空画布的方法有哪些