瀑布流

<!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. 「JSOI2015」子集选取

    「JSOI2015」子集选取 传送门 看到这个数据范围,就知道肯定是要找规律. 如果把集合看成一个长度为 \(n\) 的 \(01\) 串, \(0\) 表示没有这个元素, \(1\) 表示有这个元素 ...

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

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

  3. [0CTF 2016] piapiapia

    一道非常有意思的反序列化漏洞的题目 花费了我不少时间理解和记忆 这里简单记录其中精髓 首先打开是一个登陆页面 dirsearch扫描到了www.zip源码备份 update.php <?php ...

  4. FastDFS上传文件访问url地址直接下载

    fdfs 存储节点storage安装nginx,修改nginx配置文件 location ~/group[1-9]/M00 {  if ( $query_string ~* ^(.*)paramete ...

  5. GO ERR

    o 语言通过内置的错误接口提供了非常简单的错误处理机制. error类型是一个接口类型,这是它的定义: type error interface { Error() string } 我们可以在编码中 ...

  6. ElasticSearch应用

    1.什么是ElasticSearch Elaticsearch,简称为es, es是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本 身扩展性很好,可以扩展到上百台服务器,处理 ...

  7. python爬虫（八） requests库之 get请求

    requests库比urllib库更加方便,包含了很多功能. 1.在使用之前需要先安装pip,在pycharm中打开: 写入pip install requests命令,即可下载 在github中有关 ...

  8. idea提交项目到码云

    1.安装Git 2.在码云上创建项目 3.在IDEA提交项目到码云

  9. Faster-RCNN Pytorch实现的minibatch包装

    实际上faster-rcnn对于输入的图片是有resize操作的,在resize的图片基础上提取feature map,而后generate一定数量的RoI. 我想首先去掉这个resize的操作,对每 ...

  10. JavaScript 引擎「V8」发布 8.0 版本，内存占用量大幅下降

    上周,JavaScript 引擎「V8」的开发团队在该项目官方网站上正式宣布推出最新的 8.0 版本.这次更新的重点主要集中在错误修复及性能改善上,正式的版本将在数周后随着谷歌 Chrome 80 稳 ...