CSS列表基础

(1) 列表的三种类型,有序列表ol为父元素li为列表项,无序列表ul为父元素li为列表项目,描述列表dl为父元素dtdd分别代表术语和描述。无序列表最为常见,对大多数类型的导航进行标记的事实标准。

(2)有序列表,当列表项的顺序对列表非常关键时使用。对于面包屑导航则应使用有序列表,因为这些链接有特定的次序。有序列表olstarttypereversed的属性。

(3) CSS可以更改有序列表中的项目编号,无序列表中项目显示的符号,以及列表默认的左边缩进格式,还可设置嵌套列表,html可通过dir=ltr属性设置文本从左到右还是从右到左。

(4)设置出现在列表项目左侧的标记类型,样式表中设置list-style-type:marke其中,marker的属性值可选为disccirclesquare等值。还可定制列表项的标记符号:

ul {
    list-style:none;
    
    margin-left: 0;
    padding-left:0;
}
li {
    background: url(../img/checkout.png) no-repeat 0 0;
    outline: 1px solid blue
}

(5)设置列表的起始编号,设整个列表编号的初始值<ol start='2'>,修改有序列表中某列表项目的编号<li value='5'>使用value属性后,后续的列表也会受到影响。

(6)标记缩排默认情况下列表会位于整个文本块的外面,可通过ul{list-style-position:inside}属性改变其显示方式为在文本块内。li{line-height}可增大文本间的间距。

(7)同时设置所有的列表样式类型,ul {list-style:circle inside}等,指定标记类型、指定标记应悬挂的位置是列表之外还是之内、指定列表项目所用的定制图像标记。

(8)嵌套列表,在一个列表中插入另一个列表。使用嵌套列表创建下拉式导航。通过toplevel 2ndlevel 3rdlevel{style_rules}根据层级列表设置其对应样式,toplevel等分别为ol,ulli等。

(9)描述列表,每个列表都包含在dl中,其中dt是名称和术语,dd是名称术语对应的值。dtdd的数目对应关系不一定,可一对多也可多对一,<dt>Water<dt><dd>Water is the source of life<dd>dd+dt{margin-top:1em}其中+号的意思是设置紧挨着dddt,两者之间的上边距为1em

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值