瀑布流

<!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. Java入门笔记 04-异常处理

    一. 异常概述: 1. 异常体系结构图: java.lang.Throwable          |-----java.lang.Error:一般不编写针对性的代码进行处理.          |- ...

  2. Linux - 查看文件、文件夹、磁盘大小命令

    1. ls -lsh 2. du -sh du == disk usage (磁盘使用量,占用的磁盘空间) 一个文件占用的磁盘空间和一个文件的大小是两码事情.占用空间取决于文件系统的块(block)的 ...

  3. 关于umask的计算方式（简单任性）

    1.对于文件夹[d]来说  用755-umask 3.对与文件[f]来说,在2的基础上减掉x属性就完事儿(有x的,减掉1,没有的,就什么也不管) 再来个手绘版本的举例

  4. matlab学习记录

    1.在命令框输入preferences,可以调整字体大小 2.产生正太分布函数 参考:https://blog.csdn.net/s334wuchunfangi/article/details/816 ...

  5. Web Storage API：localStorage 和 SessionStorage

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. 参考:https://developer.mozilla.org/zh-CN/ ...

  6. Jmeter在linux下的安装

    Apache Jmeter简介   Apache JMeter 是Apache组织的开放源代码项目,是一个100%纯Java桌面应用,用于压力测试和性能测量.它最初被设计用于Web应用测试但后来扩展到 ...

  7. 有个网站秒破mdb访问密码

    http://tools.bugscaner.com/crackmdb/网站

  8. JAVA接口测试类

    package etcom.servlet; import java.io.BufferedReader; import java.io.InputStreamReader; import java. ...

  9. 【PAT甲级】1066 Root of AVL Tree (25 分)（AVL树建树模板）

    题意: 输入一个正整数N(<=20),接着输入N个结点的值,依次插入一颗AVL树,输出最终根结点的值. AAAAAccepted code: #define HAVE_STRUCT_TIMESP ...

  10. nodejs的POST两种type类型提交（原生）

    POST数据的两种提交格式 application/x-www-form-urlencoded(上传数据中没有文件) multipart/form-data (文件上传) 获取POST数据,post数 ...