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. android 自定义radiogroup的两种方式

    这里先备注下 listview+radiobutton实现  浅显易懂 http://www.haolizi.net/example/view_3312.html 在radiogoup原生态源码的基础 ...

  2. Hyperic Sigar API 举例

    Hyperic HQ 是什么? Hyperic HQ 是一个开源的(General Public License,GPL授权)IT资源管理框架,让用户使用统一的界面来管理各种不同的IT资源的管理,Hy ...

  3. ASP.NET Web Pages:文件夹

    ylbtech-.Net-ASP.NET Web Pages:文件夹 1.返回顶部 1. ASP.NET Web Pages - 文件夹 本章介绍有关文件夹和文件夹路径的知识. 在本章中,您将学到: ...

  4. [转] AForge.NET 图像处理类

    https://www.nuget.org/packages?q=AForge.NET https://baike.baidu.com/item/AForge.NET/114415?fr=aladdi ...

  5. Linux下查看某个进程占用的CPU、内存

    1.用top命令指定固定的PID top -p 10997 查询指定进程的PID ps -ef | grep zookeeper jim 10997 1959 0 12月14 pts/2 00:00: ...

  6. [UE4]ue4 c++学习推荐

    我由易到难推荐,不过在此之前还是先看看官方对于VS设置的推荐: https://docs.unrealengine.com/latest/INT/Programming/Development/Vis ...

  7. Java常用的加密解密类(对称加密类)

    Java常用的加密解密类 原文转载至:http://blog.csdn.net/wyc_cs/article/details/8793198 原创 2013年04月12日 14:33:35 1704 ...

  8. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  9. js判断当前为pc端还是wap端

    var checkBrowser; function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); v ...

  10. 跳表(skiplist)Python实现

    # coding=utf-8 # 跳表的Python实现 import random # 最高层数设置为4 MAX_LEVEL = 4 def randomLevel(): ""& ...