博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
了解HTML列表
阅读量:6910 次
发布时间:2019-06-27

本文共 2004 字,大约阅读时间需要 6 分钟。

前面的话

  从某种意义上讲,不是描述性文本的任何内容都可以认为是列表。人口普查、太阳系、餐馆菜单等都可以表示为一个列表或列表的列表。列表分为无序列表、有序列表和定义列表三种

 

无序列表

  无序列表(unorder list)缩写为ul,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的HTML描述定义,但在其相关的CSS可以用list-style-type属性

【默认样式】 

//IE7-浏览器margin-left: 30pt;ul{    margin: 16px 0;    padding-left: 40px;    list-style-type: disc;}
  • Coffee
  • Milk

 

有序列表

  有序列表(order list)简写为ol,表示多个有序列表项。通常情况下,有序列表中显示在项前面的编号(a preceding numbering),可以是任何形式的,如数字、字母或罗马数字甚至简单的点。 在网页的 HTML 描述中并没有定义编号的样式,但可以用相关的CSS定义,使用 list-style-type 属性

【默认样式】

//IE7-浏览器margin-left: 30pt;ol{    margin: 16px 0;    padding-left: 40px;    list-style-type: decimal;}
  1. Coffee
  2. Milk

【属性】

  HTML5为ol新增了两个属性:reversed和start

  1、reversed

    降序(IE和safari不支持)

  2、start

    有序列表的起始项(没有start属性的CSS替代方案)

  1. 咖啡
  2. 牛奶
  3. 可乐

marker

  marker表示ol或ul中li的列表项标志,虽然list-style样式只能应用于display的值为list-item的元素,但由于该样式可继承,所以竟然将其应用在ol或ul,然后通过继承,使所有的li都获取设置的list-style样式。如果给某一个li设置list-style样式,将覆盖其从父级继承的list-style样式

list-style(列表项标志复合样式):list-style-type list-style-image list-style-position

  1、list-style-type:列表项标志类型

  2、list-style-image:列表项标志图像

  3、list-style-position:列表项标志位置

  [注意]当list-style-image不为none时,list-style-type值将被覆盖;通常提供一个作为“后路”的标志类型,应付图像未能加载的意外情况

  <演示框>点击下列相应属性值可进行演示

  [注意]IE7-浏览器不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian"

 

定义列表

  定义列表(define list)简写是dl,是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据(键-值对列表)

  定义元素(define list title)用于在一个定义列表中声明一个术语。该元素仅能作为dl的子元素出现。通常在该元素后面会跟着dd元素

  描述元素(define list describe)用来指明一个描述列表dl元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个dt元素

  [注意]一个dt可对应多个dd;<dl><dt><dd>的display都是block

【默认样式】

dl{    margin: 16px 0;}//IE7-浏览器margin-left: 30pt;    dd{    margin-left: 40px;}
Coffee
Black hot drink
Milk
White cold drink

转载于:https://www.cnblogs.com/xiaohuochai/p/5046656.html

你可能感兴趣的文章
Struts2 @ResultPath注释示例
查看>>
BZOJ 2822: [AHOI2012]树屋阶梯 [Catalan数 高精度]
查看>>
基本类型和装箱基本类型的区别
查看>>
剑指offer题目java实现
查看>>
ThreadLocal
查看>>
抽象工厂类--一个简单的例子
查看>>
配置toad远程连接oracle
查看>>
028 Partitioner:数据分区器
查看>>
移位实现正负数原码输出
查看>>
阿里云端口失效导致tomcat无法对外提供服务
查看>>
如何在Android Studio中指定NDK位置?
查看>>
更改Android应用程序的图标
查看>>
连载:面向对象葵花宝典:思想、技巧与实践(35) - NOP原则
查看>>
Redis(五)-- Java API
查看>>
Android中使用OnClickListener接口实现button点击的低级失误
查看>>
python核心编程——python对象
查看>>
我第一家互联网公司产品开发周期
查看>>
指数函数及其性质教学设计
查看>>
关于内存中栈和堆的区别(非数据结构中的堆和栈,区别)【转】
查看>>
嵌套查询
查看>>