使用ul和li进行浮动布局（自适应）

1 图片上下两排：
首先盒子的宽度要给100%

ul包裹一个div，首先量好盒子的宽和高，并进行设置， margin 0 auto 盒子居中显示

每个li向左浮动，如果有间隔给一个margin-right即可，使用伪类选择器 nth-child来将不需要margin的元素选择出来并

去除相应的属性（如nth-child(n+4) 可以选中第4个到最后的li）

使用ul和li进行图片的布局的更多相关文章

  1. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  2. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  3. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  4. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  5. 如何去掉ul和li前面的小黑点

    做网站的时候经常会遇到如上图所示的小圆点,难看不说,还容易影响布局,下面就介绍几种消除小圆点的方法: 1. 找到相关CSS文件,在.ul 和.li 部分添加: 1 list-style: none; ...

  6. UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  7. ul、li模仿ios的TableView实现城市选择

    最近项目一个接着一个,之前说的精创环的项目还没做完,今天说先把那个放一下,先做访客系统,销售会见客户之后可以对客户进行一个跟踪记录,原型图也给了,今日头条的频道自定义页面一样. 如果是在IOS上让我来 ...

  8. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  9. css li 不换行（布局，内容）

    参考这里 ------ 不换行的策略: 不换行原理: ul 和 li 默认都是 display:block; 的标签, 可以通过2种方式实现 li 的 不换行显示: * 将 li 设为 display ...

随机推荐

  1. Hive Hadoop 解析 orc 文件

    解析 orc 格式 为 json 格式: ./hive --orcfiledump -d <hdfs-location-of-orc-file> 把解析的 json 写入 到文件 ./hi ...

  2. 地兵布阵 -----------HDU-1166

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  3. 洛谷 Atcoder 题解 AT2585 【Colorful Leaderboard】

    目测 普及/提高- 难度. 思路 将 9 种可能的等级存储在数组里,则 min 值为分数为 0 ~ 3199 的颜色种类个数,max 值为 min 值加上分数 >3200 的人数. 特判 若分数 ...

  4. Java并发编程系列-(1) 并发编程基础

    1.并发编程基础 1.1 基本概念 CPU核心与线程数关系 Java中通过多线程的手段来实现并发,对于单处理器机器上来讲,宏观上的多线程并行执行是通过CPU的调度来实现的,微观上CPU在某个时刻只会运 ...

  5. JDBC导致的反序列化攻击

    背景 上周BlackHat Europe 2019的议题<New Exploit Technique In Java Deserialization Attack>中提到了一个通过注入JD ...

  6. 解决oracle11g数据库监听连接不上问题

    java连接数据库报错12514,无法识别监听,但是PL客户端可以连接 oracle 监听 添加ip 同时修改tnsnames.ora.listener.ora将这两个文件中HOST后面的主机都修改为 ...

  7. 深入浅出Object.defineProperty()

    深入浅出Object.defineProperty() 红宝书对应知识点页码:139页 红宝书150页:hasOwnProperty( )方法可以检测一个属性是存在于实例中,还是存在于原型中,给定属性 ...

  8. 【Java Web开发学习】Spring环境profile

    [Java Web开发学习]Spring 环境profile 转载:http://www.cnblogs.com/yangchongxing/p/8890702.html 开发.测试.生产环境往往是不 ...

  9. BeetleX之TCP服务应用详解

    BeetleX是.net core平台下的一个开源TCP 通讯组件,它不仅使用简便还提供了出色性能的支持,可以轻易让你实现上百万级别RPS吞吐的服务应用.组件所提供的基础功能也非常完善,可以让你轻易扩 ...

  10. 《Java基础知识》Java多态对象的类型转换

    这里所说的对象类型转换,是指存在继承关系的对象,不是任意类型的对象.当对不存在继承关系的对象进行强制类型转换时,java 运行时将抛出 java.lang.ClassCastException 异常. ...