瀑布流

<!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. SQLite3约束介绍

    SQLite 约束 约束是在表的数据列上强制执行的规则.这些是用来限制可以插入到表中的数据类型.这确保了数据库中数据的准确性和可靠性. 约束可以是列级或表级.列级约束仅适用于列,表级约束被应用到整个表 ...

  2. 例题3_1 TeX中的引号（TeX Quotes,UVa 272）

    在TeX中,左双引号是“``”,右双引号是“''”.输入一篇包含双引号的文章,你的任务是把它转换成TeX的格式. 样例输入: "To be or not to be,"quoth ...

  3. jdk基础提升

    1. treeMap,treesSet 作用:1具有对应普通的Map,Set的功能,2.能排序Map和Set  (依赖树的结构进行排序---中序循环) TreeSet<String> tr ...

  4. DVWA的文件上传漏洞（high）

    1.使用文件包含漏洞和文件上传漏洞,来连接shell 文件包含漏洞详细的漏洞介绍:https://blog.csdn.net/Vansnc/article/details/82528395 文件包含函 ...

  5. IPSec的高可用性技术

    IPSec VPN的高可用性技术:①.DPD(Dead Peer Detection)对等体检测                      ——旨在检查有问题的IPSec VPN网络,并快速的切换到备 ...

  6. Java中获取MongoDB连接的方法

    首先是所需jar包,Maven中的配置如下: <dependency> <groupId>org.mongodb</groupId> <artifactId& ...

  7. 基于Facebook开源框架SocketRocket的即时通讯

    SocketRocket 介绍: SocketRock 是 Facebook 开源的框架,基于 WebSocket 客户端类库,适用于 iOS.Mac OS.tv OS.GitHub 传送门:http ...

  8. Codeforces1140D. Minimum Triangulation

    题目链接 本题是区间dp里的三角剖分,板子题,dp[i][j]表示凸多边形i-j构成的最值,转移方程为dp[i][j] = min/max(dp[i][k]+dp[k][j]+w[i,j,k])(i& ...

  9. netty集成springboot

    一 前言 springboot 如何集成netty实现mapper调用不为null的问题让好多读者都头疼过,知识追寻者发了一点时间做了个基本入门集成应用给读者们指明条正确的集成方式,我相信,只要你有n ...

  10. Go语言学习笔记（四）

    一.字符串 1.字符串截取 可以使用len(字符串变量)获取字符串的字节长度,其中英文占1个字节长度,中文占用3个字节长度 可以使用变量名[n]获取到字符串第n+1个字节,返回这个字节对应的Unico ...