使用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. zz:NETCONF协议详解

    随着SDN的大热,一个诞生了十年之久的协议焕发了第二春,它就是NETCONF协议.如果你在两年前去搜索NETCONF协议,基本得到的信息都是"这个协议是一个网管协议,主要目的是弥补SNMP协 ...

  2. mybatis错题

    第一题 解析: MyBatis的动态SQL中没有else元素,when元素的test属性中直接书写表达式即可,即test=”表达式”. 第二题 解析: resource属性和url属性是必须的属性,但 ...

  3. 第5节：Java基础 - 必知必会（下）

    第5节:Java基础 - 必知必会(下) 本小节是Java基础篇章的第三小节,主要讲述Java中的Exception与Error,JIT编译器以及值传递与引用传递的知识点. 一.Java中的Excep ...

  4. Python爬虫技术：爬虫时如何知道是否代理ip伪装成功？

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. python爬虫时如何知道是否代理ip伪装成功: 有时候我们的爬虫程序添加了 ...

  5. USB工业摄像头设计之上位机

    在工业相机中对摄像头要求较高,且采集的图像数据要求是源数据,未经过任何处理. 为了兼容xp.win7(32bit 64bit) 程序采用VS2008  MFC编制,参考网上一些应用. CYUSB驱动与 ...

  6. 制作Win10系统安装U盘和安装纯净版Win10

    重要提示 (以下为操作或安装前的必读提示) 1.准备8G或8G以上的U盘(32G以内).制作U盘会格式化U盘,此U盘内的数据需要提前备份至其他U盘或移动硬盘. 2.在格式化.删除分区和重新安装操作系统 ...

  7. 使用between操作符过滤数据

    select prod_name,prod_price from products where prod_price between 5 and 10; 就可以查询处5-10之间的所有数据 betwe ...

  8. wc命令统计目录下所有文件行数

    想统计一下最近一个项目的代码行数,一个一个文件统计显然不是程序员的思维,wc命令可以统计一个文本的行数,结合find命令可以实现我的需求(注意符号):

  9. QQ音乐接口api,包括付费音乐、无损音乐、高品质音乐地址解析接口api

    QQ音乐网站所有音乐(包括付费.无损等版权音乐解析接口地址url). mp3 普通高品 http://dl.stream.qqmusic.qq.com/M5000012gqVh4fFvVK.mp3?v ...

  10. 天天动听API

    本次分析的是天天动听API,天天动听有一点比较好,就是搜索返回直接有歌曲播放的地址了,并且有无损的音频 搜索歌曲API:http://so.ard.iyyin.com/s/song_with_out? ...