网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS列表属性.pptx

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。CSS3的属性CSS列表属性

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.5CSS列表属性5.5.1图像作为列表项的标记属性list-style-image语法：list-style-image:none|url(url)|inherit示例：ul.out{list-style-position:outside;list-style-image:url(images/it.gif);}

5.5CSS列表属性5.5.2列表项标记的位置属性list-style-position语法：list-style-position:outside|inside示例：ul.in{display:list-item;list-style-position:inside;}

5.5CSS列表属性5.5.3标记的类型属性list-style-type语法：list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none|armenian|cjk-ideographic|georgian|lower-greek|hebrew|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-latin|upper-latin示例代码如下。li{list-style-type:square}

5.5CSS列表属性

5.5CSS列表属性5.5.4列表简写属性list-style语法：list-style:list-style-type|list-style-position|list-style-image示例：li{list-style:url(images/sqpurple.gif),inside,circle;}ul{list-style:outside,upper-roman;}ol{list-style:square;}

5.5CSS列表属性【例5-15】设置列表项图像标记，本例文件5-15.html的显示效果图5-18所示。

5.5CSS列表属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title列表属性/titlestyletype=text/cssul{font-size:1.2em;color:green;list-style-position:inside;list-style-image:url(images/drink.gif);/*设置列表项图像*/list-style-type:circle;}.img_none{list-style-image:none;/*设置列表项图像不显示*/}.img_cocoa{list-style-position:outside;list-style-image:url(images/cocoa.gif);list-style-type:none;}.img_coffee{list-style-position:inside;list-style-image:url(images/coffee.gif);list-style-type:none;}.img_tea{list-style-position:outside;list-style-image:url(images/tea.gif);list-style-type:none;}div{width:300px;height:200px;border:2pxdashed;fl