css列表属性代码

营销型网站
2024-04-27 09:41:39

使用列表属性可以设置列表项的样式，包括符号、缩进等。

列表符号 list-style-type

使用列表符号属性可以设置列表项所使用的符号类型。

语法：list-style-type:值

实例：

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="content-type"content="text/html;charset=gb2312"/><title>列表符号</title><styletype="text/css"></style></head><body><olclass="l"><li>水晶婚庆婚礼灯光舞美</li><li>水晶婚庆的花艺服务</li><li>水晶婚庆的婚礼化妆</li><li>水晶婚庆婚礼摄影摄像</li><li>水晶婚庆婚礼仪式督</li><li>水晶婚庆婚礼策划</li><li>婚庆婚礼顾问服务流程</li></ol></body></html>

在代码中 ol{list-style-type: disc;}标记用来设置列表符号为实心圆，在浏览器中浏览效果，

图像符号 list-style-image

图像符号属性是指使用图像作为列表符号，以便美化网页。

语法：list-style-image:none | url（图像地址）

none表示不指定图像；

url则使用绝对或相对地址作为符号的图像。

实例：

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="content-type"content="text/html;charset=gb2312"/><title>图像符号</title><styletype="text/css"></style></head><body><olclass="l"><li>水晶婚庆婚礼灯光舞美</li><li>水晶婚庆的花艺服务</li><li>水晶婚庆的婚礼化妆</li><li>水晶婚庆婚礼摄影摄像</li><li>水晶婚庆婚礼仪式督导</li><li>水晶婚庆婚礼策划</li><li>婚庆婚礼顾问服务流程</li></ol></body></html>

在代码中 list-style-image: url(images/icon_01.gif)标记用来设置图像符号，在浏览器中浏览效果，

列表缩进 list-style-position

使用列表缩进属性可以设置列表缩进的程度。

语法：list-style-position:outside | inside

说明：

outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐；

inside表示列表项目标记放置在文本以内，且环绕文本根据标记对齐。

实例：

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="content-type"content="text/html;charset=gb2312"/><title>列表缩进</title><styletype="text/css"></style></head><body><olclass="l"><li>玉米油的营养价值</li><li>国家粮油信息中心：食用油市场可</li><li>粮油加工业：食用油步入涨价通道</li><li>农产品价格回落7月CPI或降温</li></ol></body></html>

在代码中list-style-position:inside标记用来设置列表缩进，在浏览器中浏览效果。

Tags: css列表的属性值