CSS笔记(美化列表)

本文介绍了CSS中列表的基本结构,包括无序列表、有序列表和定义列表的使用方法,以及如何通过CSS属性如`list-style`、`list-style-image`、`list-style-position`和`list-style-type`来设计和美化列表样式。详细阐述了不同类型的列表属性,如`reversed`、`start`和`type`,并提及了H5中的菜单列表和`<menu>`标签。

一、列表的基本结构
列表的结构可以分为两种基本类型:有序列表和无序列表。无序列表使用项目符号来标识列表,而有序列表则使用编号来标识列表的项目顺序。
<ul></ul>标识无序列表
<ol></ol>标识有序列表
<li></li>标识列表项目
还有一种特殊列表是定义列表,它包括词条和解释两块内容
<dl></dl>标识定义列表
<dt></dt>标识词条
<dd></dd>标识解释

二、创建列表
1、无序列表
ul与li之间不能插入其他标签
2、有序列表
<ol>标签包含三个实用的属性
reversed:取值为本身,定义列表降序
start:取值为数字,定义列表起始值
type:取值1、A、a、I、i,定义列表使用的标记类型
3、定义列表
<dl>标签包含了<dt><dd>标签,一个<dt>对应一个或多个<dd>
4、菜单列表
H5重新定义了H4弃用的<menu>标签。<menu>可以包含<command><menuitem>

三、设计CSS样式
列表在默认状态下效果:左侧附加项目符号,列表项目缩进显示。属性如下:
list-style:复合属性。设置列表项目相关内容
list-style-image:设置列表项目的符号图像
list-style-position:设置列表项目符号的显示位置,根据文本在内或在外排列,取值包括outside|inside
list-style-type:设置列表项目符号的类型
1、项目符号类型
list-style-type属性值:

属性值说明属性值说明
disc实心圆,默认值upper-roman大写罗马数字
circle空心圆lower-alpha小写英文字母
square实心方块upper-alpha大写英文字母
decimal阿拉伯数字none不使用项目符号
lower-roman小写罗马数字armenian传统的亚美尼亚数字
cjk-ideographic浅白的表意数字georgian传统的乔治数字
lower-greek基本的希腊小写字母hebrew传统的希伯莱数字
hiragana日文平假名字符hiragana-iroha日文平假名序号
katakana日文片假名字符katakana-iroha日文片假名序号
lower-latin小写拉丁字母upper-latin大写拉丁字母

2、自定义项目符号
list-style-image:none|<url>

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值