瀑布流

<!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. redhat 7.6安装kvm

    安装 yum install qemu-kvm libvirt virt-install virt-manager openssh-askpass yum install qemu-kvm-tools ...

  2. Plastic Bottle Manufacturer Tips - Attention To Plastic Bottle Processing Technology

    In fact, the processing technology of plastic bottles is actually quite strict. In fact, regular man ...

  3. RobotFramework+Selenium2环境搭建与入门实例

    一.安装包 1.Python(推荐使用ActivePython,这个版本PATH已经配好了,也安了一些像pip这样的包) ActivePython-2.7.2.5-win32-x86.msi 2.Wx ...

  4. map或者对象转换

    map或者对象转换为具有相同字段的对象 List<Example> errorCodeExcelBeanList = JSONObject.parseArray(((JSONObject) ...

  5. Cisco AP-如何识别思科胖瘦AP

    思科的胖瘦AP识别的方式不止一种,这里简单的总结一些我了解到的方式: 1.根据思科AP的型号 这个和思科不同时期的产品有关系,老一点的和新一些的AP命名上存在差别,这里简单举例: 类型1:AIR-LA ...

  6. I/O-<File实例>

    File n=new File("D:\2016.txt"); System.out.println("文件是否存在"+n.exists()); System. ...

  7. SVN中如何创建共享文件夹

    http://wenku.baidu.com/link?url=E8tC1idSdTABc3JzyqGYF8OXakDTIF_yWp8BvFqSX5dgcpkbm8Z57ursZtLpjmQAEABM ...

  8. Idea 隐藏不必要的文件或文件夹 eg:(.idea,.gitignore,*.iml)

    在使用Idea的时候,有一些文件是不必要的,可以将他们隐藏起来 方法:打开File–>Settings–>Editor如图,在File Types 中的 Ignore files and ...

  9. java窗口程序字符串时间转成时间戳

    pom.xml 文件: ?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  10. gitignore文件简单编写规则

    一.生成.gitignore文件 1.进入项目根目录,打开终端: 2.输入 vi .gitignore 创建并打开隐藏文件.gitignore: 二 . 设置要忽略上传的文件或文件夹 1.过滤整个文件 ...