Web标准:六、html列表

知识点:

1.ul无序和ol有序列表
2.改变项目符号样式或用图片定义项目符号
3.横向图文列表
4.浮动后父容器高度自适应
5.IE6的双倍边距bug
 
1)ul无序和ol有序列表
无序列表:是以ul包含li的形式,默认每行前的符号是圆点,可通过样式改为无、方块、空心圆等。
有序列表:是以ol包含li的形式,是以数字为项目符号的,无序列表页可以用css定义显示为有序列表。
 
 
2)改变项目符号样式或用图片定义项目符号
ul项目符号默认是圆点,可以通过样式表改变它的样式。
1.通过更改ul的css样式来更改(参考教程:http://wenku.baidu.com/view/a2fe244dc850ad02de804163.html)
list-style-type的属性:
none:不使用项目符号
disc:实心圆(默认值)
circle:空心圆
square:实心方块
decimal:阿拉伯数字
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
list-style-image:更换项目符为图片,注意:有这个的时候默认会覆盖list-style-type的属性
 
2.第一种方式不是特别灵活,实际应用中一般用背景图片来实现。
说明:no-repeat是指图片不重复显示,只显示一次。0px 4px是距离左右的距离是0px,上下的距离是4px。
          加padding-left是为了让文字向右移动25px,否则会与图片重合。
 
3)横向图文列表
横向图文列表主要用到了float:left;给li设置一个宽度,并且设置float:left;即可。
注意:因为滑过的时候我们给img加了一个边框,所以高度会变高4px,这样我们就必须给li加一个高度,否则会出现当前所选li过高,导致下面一行的浮动有问题的现象,具体问题样式见下图:
 
4)浮动后父容器高度自适应
当一个容器内元素都浮动后,它的高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器,为了便于查看,我们给容器增加一个边框,显示如下图:
而这时候我们只要给容器增加一个样式overflow:auto;即可解决这个问题。
注意:overflow除了auto外还有其他的属性,比如scroll,是以滚轴的形式显示,但是使用scroll时必须给他容器加一个height。
 
5)IE6的双倍边距bug
这是IE6又一个著名的bug,如上例,当浮动设置左侧外边距时,最左侧将显示为双倍边距,比如设置20px,而在IE6下显示为40px,解决这个问题只需要一个样式即可,display:inline;
IE6下没加样式前的显示样式:
加了该样式后即可解决左侧双倍间距的问题。

Web标准:六、html列表的更多相关文章

  1. web标准(复习)--6 html列表

    今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序 ...

  2. 我所理解的RESTful Web API [Web标准篇]

    REST不是一个标准,而是一种软件应用架构风格.基于SOAP的Web服务采用RPC架构,如果说RPC是一种面向操作的架构风格,而REST则是一种面向资源的架构风格.REST是目前业界更为推崇的构建新一 ...

  3. 对WEB标准以及W3C的理解与认识

    按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^).但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性.web标准简而言之就是将页 ...

  4. web标准的可用性和可访问性

    在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...

  5. 【转】Web标准中的常见问题

    本文转自http://www.tracefact.net/Misc/Common-Problems-Of-Web-Standard.aspx 引言 大概在2004年的时候,Web标准的概念藉由一本名为 ...

  6. WEB标准:标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范

    1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页 ...

  7. 2014第8周三杂记及web标准学习

    昨天遇到一个问题,安卓中mp3默认打开方式的设置,本来如果直接用播放器来查找文件打开没问题,但不知为何播放器只能在历史文件夹中查找,那么在ES文件管理器中找到对应mp3文件后却总是被默认的ES播放器打 ...

  8. 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华

    以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...

  9. html5与css 1. web标准及组成

    学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML ...

随机推荐

  1. 【Active入门-3】ActiveMQ学习-发布者与订阅者

    2015年4月28日 1个发布者,1个订阅者,topic 方式1: 先发布消息: 然后订阅消息: 方式2: 先订阅消息: 然后发布消息:订阅者如下: 结论1: 从上面可以看出,消息发布需要在线发布. ...

  2. 从Exchager数据交换到基于trade-off的系统设计

    可以使用JDK提供的Exchager类进行同步交换:进行数据交换的双方将互相等待对方,直到双方的数据都准备完毕,才进行交换.Exchager类很少用到,但理解数据交换的时机却十分重要,这是一个基于tr ...

  3. WAP网站WML或HTML页面自适应手机屏幕实现方法

     把图片和div的宽度都设置成:width:100%就可以了

  4. phpexcel导入数据出现PHPExcel_RichText Object解决办法

    在导入excel的时候会出现异常情况,有的问题出现PHPExcel_RichText object,错误代码如下 PHPExcel_RichText Object ( [_richTextElemen ...

  5. Xshell批量导入IP地址

    我的xshell被覆盖了~~~结果原来的host没了,很郁闷要一个一个添加,网上找了很长时间在Xshell中批量添加IP的文章,结果都不行. 最后找到了https://blog.netsarang.c ...

  6. js常见兼容

    滚动条的兼容写法(谷歌chrome) document.documentElement.scrollTop || document.body.scrollTop   阻止浏览器默认行为的兼容写法  e ...

  7. SPM——Using Maven+Junit to test Hello Wudi

    Last week, ours teacher taught us 'Software Delivery and Build Management'. And in this class, our t ...

  8. C# window Service实现调用有UI的应用程序(关于win xp以后的window系统)

    我开发的系统中有一接口程序(这里就称Task,是一个C#的Console Application)经常无故的死掉,导致第二天的数据不能正常解析,所以,我写了一个window service去监视Tas ...

  9. selenium+python自动化95-弹出框死活定位不到

    前言 部分小伙伴学了selenium的alert后,就不管啥弹出框都去用alert,这是行不通的,看到弹出框,先要确定是不是alert,是才能用,不是的话肯定不能用. 有些弹出框是div层,这种跟平常 ...

  10. 安全svn快速安装

    按照如下步骤快速搭建centos6下的svn系统并支持https协议checkout和import代码,亲测成功! 1.[基本包yum安装] yum httpd subversion mod_dav_ ...