瀑布流

<!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. LLC半桥谐振变换器调试记录

    1.判断二极管是否击穿 2.判断mos管是否烧坏 直接用声音档,发出响声说明击穿了 3.测试二极管的正负极方法 将万用表调到二极管档 1.信号发生芯片周围的电阻 2.反馈部分的电阻 3.实验准备部分: ...

  2. win10配置cuda和pytorch

    简介 pytorch是非常流行的深度学习框架.下面是Windows平台配置pytorch的过程. 一共需要安装cuda.pycharm.anancoda.pytorch. 主要介绍cuda和pytor ...

  3. ZOJ1006 Do the Untwist

    简单模拟~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; unordered_map<char,int> ...

  4. Vue项目引进ElementUI组件

    1.https://blog.csdn.net/Mr_JavaScript/article/details/80741914 1.1 安装 npm install element-ui -save 1 ...

  5. lc 0222

    目录 ✅ 191. 位1的个数 描述 解答 cpp py ✅ 107. 二叉树的层次遍历 II 描述 解答 c todo 观赏 0222 py ✅ 806. 写字符串需要的行数 描述 解答 cpp j ...

  6. 刚下载好的 vscode 不能运行，一片黑 以及终端不能输入 解决办法

    1.鼠标右键vscode快捷方式点击属性,选择兼容性,勾选以兼容模式运行,下拉列表调整为windows vista (service pack 1)即可解决. 2.如果打开终端不能输入命令,首先点击属 ...

  7. 如何查看NXP产品的供货计划？

    大的半导体厂商一般会提供每个产品的生命周期计划,NXP的工业级IC一般供货10年,汽车级是15年,具体的时间可以在官网查询得到. 首先,打开NXP官网链接 产品长期供货计划,可以看到以下页面 接着,筛 ...

  8. JAVA性能优化工具小记

    好记性不如烂笔头,戊戌年的最后一个工作日,把自己平时在开发过程中使用的一些java性能优化工具做一个简单的小结, 主要包括 jvisualvm.jfr.gdb和查看内存对象信息的几个linux命令. ...

  9. Pandas 性能优化 学习笔记

    摘要 本文介绍了使用 Pandas 进行数据挖掘时常用的加速技巧. 实验环境 import numpy as np import pandas as pd print(np.__version__) ...

  10. 【规范建议】服务端接口返回字段类型与iOS端的解析

    一.本文档的写作目的 App需要跟产品.UI.后台.服务器.测试打交道,app的产出是其他端人员产出的综合体现.与其他端人员沟通就像是开发写接口,也就是面向接口编程的思想. 本文档讲解针对的是服务端返 ...