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

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

  1. 1、本文档共13页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多

;使用表格、列表及定位属性美化网页;列表属性(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

您可能关注的文档

文档评论(0)

vermonth155-2娟 + 关注
实名认证
内容提供者

专注ppt课件

版权声明书
用户编号:8046135067000064

1亿VIP精品文档

相关文档