课程主题使用表格列表及定位属性美化网页网页客户端技术课.pptx

;使用表格、列表及定位属性美化网页;列表属性（list）;list-style-type属性

列表样式是指列表项目的符号类型，主要使用list-style-type属性来设置。

基本语法：list-style-type：属性值

语法说明：list-style-type属性取值见表所示。;list-style-type属性

例如，给出以下HTML代码：

ulclass=circle

li咖啡/li

li茶/li

li可口可乐/li

/ul

设计如下所示的CSS样式来改变列表的显示符号类型：

ul.circle{list-style-type:circle;}

;list-style-image属性

列表样式除了可以使用指定的符号类型以外，还可以通过list-style-image属性使用指定的图像。

基本语法：list-style-image：URL|none|inherit

语法说明：

URL，为指定的图像路径；

none，无图像被显示，默认；

Inherit，规定应该从父元素继承list-style-image属性的值。

例如，以下代码设置了ul列表左侧使用图像代替符号，效果如图所示：

ul{list-style-image:url(/i/eg_arrow.gif)};list-style-position属性

list-style-position属性设置在何处放置列表项标记。列表标志相对于列表项内容的位置。

基本语法：list-style-position：inside|outside|inherit

语法说明：

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

outside，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐，此值为默认值；

inherit，规定应该从父元素继承list-style-position属性的值。

例如，以下代码设置了列表项的显示位置。;例如，以下代码设置了列表项的显示位置，显示效果如图所示。

html

head

styletype=text/css

ul.inside{list-style-position:inside}

ul.outside{list-style-position:outside}

/style

/head

body

p该列表的list-style-position的值是inside：/p

ulclass=inside

liEarlGreyTea-一种黑颜色的茶/li

liJasmineTea-一种神奇的“全功能”茶/li

liHoneybushTea-一种令人愉快的果味茶/li

/ul;list-style属性

list-type属性在一个声明中设置所有的列表属性，可以按顺序设??如下属性：

list-style-type，设置列表项标记的类型；

list-style-position，设置在何处放置列表项标记；

list-style-image，使用图像来替换列表项的标记。

例如，以下代码设置了列表的符号、位置及图像：

ul{list-style:squareinsideurl(/i/eg_arrow.gif)};例2-9在模块1示例1-11的基础上设置CSS列表属性，将列表设计成菜单样式。

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/

title使用列表属性设计菜单样式/title

styletype=text/css

body{font-family:arial,宋体,serif;font-size:12px;}

#nav{line-height:24px;list-style-type:none;background:#666;}

#navli{float:left;width:120px;background:#04BFF1;}

#navliul{line-height:27px;list-style-type:none;text-align:left;

left:-999em;width:180px;position:absolute;}

#navliulli{float:left;width:180px;backgr