瀑布流

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>瀑布流</title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

        li {

            list-style: none;

        }

        #div1 {

            width: 950px;

            height: auto;

            margin: 20px auto;

        }

        ul {

            width: 250px;

            float: left;

        }

        img {

            width: 230px;

            height: 150px;

        }

    </style>

</head>

<body>

    <div id="div1">

        <ul>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

        </ul>

        <ul>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

        </ul>

        <ul>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

        </ul>

    </div>

</body>

</html>

css 瀑布流的更多相关文章

  1. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  2. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  3. css浮动+应用（瀑布流效果的实现）

    首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  6. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  7. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  8. 基于CSS多列实现瀑布流

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

随机推荐

  1. 操作系统OS - 阻塞(Blocking)非阻塞(Non-Blocking)与同步(Synchronous)异步(Asynchronous)

    参考: http://blog.jobbole.com/103290/ https://www.zhihu.com/question/19732473/answer/23434554 http://b ...

  2. JavaSE复习~方法基础

    方法的概念 方法:就是讲一个功能抽取出来,把代码单独定义在其中,形成一个单独的功能 我们需要这个功能的时候,就可以去调用,实现了代码的复用性,也解决了代码冗余的问题 方法的定义 定义的一般格式:jav ...

  3. JS bind()方法、JS原生实现bind()

    一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...

  4. nm

    nm是names的缩写,功能是列出目标文件的符号清单,常用来查看动态链接库中的函数. nm选项 -a   按照man手册,仅列出调试信息,实际上却是调试信息+正常信息 -A   增加一列显示目标文件, ...

  5. OPENTSDB: Request failed: Internal Server Error net.opentsdb.core.IllegalDataException

    今天Opentsdb补传历史数据的时候,出现了如下的错误: Request failed: Internal Server Error net.opentsdb.core.IllegalDataExc ...

  6. Python 基础之正则之一 单字符,多字符匹配及开头结尾匹配

    一.正则表达式之单个字符匹配 格式:lst = re.findall(正则表达式,要匹配的字符串)预定义字符集 匹配内容 .匹配任意字符,除了换行符\n \d匹配数字 \D匹配非数字 \w匹配字母或数 ...

  7. 利用DFS算出有多少个连通图

    以下面一个题目为例,[题目链接]: https://www.luogu.com.cn/problem/P4961 题目中涉及求出八联通图的个数,这里给出这步的代码: memset(vis, 0, si ...

  8. 吴裕雄--天生自然ORACLE数据库学习笔记：优化SQL语句

    create or replace procedure trun_table(table_deleted in varchar2) as --创建一个存储过程,传入一个表示表名称的参数,实现清空指定的 ...

  9. [蓝桥杯2017初赛]跳蚱蜢 BFS

    题目描述 如图所示: 有9只盘子,排成1个圆圈.其中8只盘子内装着8只蚱蜢,有一个是空盘. 我们把这些蚱蜢顺时针编号为 1~8.每只蚱蜢都可以跳到相邻的空盘中,也可以再用点力,越过一个相邻的蚱蜢跳到空 ...

  10. 穿越雷区--蓝桥杯--DFS/BFS

    题目描述 X星的坦克战车很奇怪,它必须交替地穿越正能量辐射区和负能量辐射区才能保持正常运转,否则将报废. 某坦克需要从A区到B区去(A,B区本身是安全区,没有正能量或负能量特征),怎样走才能路径最短? ...