使用列表属性可以设置列表项的样式,包括符号缩进等。
列表符号 list-style-type使用列表符号属性可以设置列表项所使用的符号类型。
语法:list-style-type:值
实例:
<htmlxmlns=http://www.w3.org/1999/xhtml<head<metahttp-equiv=content-typecontent=text/htmlcharset=gb2312/<title列表符号</title<styletype=text/css<!--.l{font-size:12px}ol{list-style-type:disc}--</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-typecontent=text/htmlcharset=gb2312/<title图像符号</title<styletype=text/css<!--.l{font-size:12px}ol{list-style-type:circlelist-style-image:url(dot.gif)}--</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-typecontent=text/htmlcharset=gb2312/<title列表缩进</title<styletype=text/css<!--.l{font-size:12px}ol{list-style-type:circlelist-style-image:url(dot.gif)list-style-position:inside}--</style</head<body<olclass=l<li玉米油的营养价值</li<li国家粮油信息中心:食用油市场可</li<li粮油加工业:食用油步入涨价通道</li<li农产品价格回落7月CPI或降温</li</ol</body</html
在代码中list-style-position:inside标记用来设置列表缩进,在浏览器中浏览效果。