《HTML5+CSS3》课件——第六章 列表与超链接.pptVIP

基本格式 ul{list-style-image:url(图片路径);} 例如： style type=text/css ul{list-style-image:url(images/book.png);} /style 6.2 CSS控制列表样式 例如： list-style-position属性取值 inside：列表项目符号位于列表文本以内。 outside：列表项目符号位于列表文本以外。 style type=text/css .in{list-style-position:inside;} .out{list-style-psition:outside;} li{ border:1px solid #CCC;} /style 6.2 CSS控制列表样式 list-style-image属性 2 list-style-position属性 3 list-style-type属性 1 列表样式复合属性list-style 复合属性 list-style:列表项目符号 列表项目符号的位置 列表项目图像; 使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。 在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为li设置背景图像的方式实现不同的列表项目符号。 6.2 CSS控制列表样式 6.3 超链接标签 一个网站通常由多个页面构成，进入网站时首先看到的是其首页。 列表页 内容页 …… 首页 通过超链接，实现页面之间的跳转 如何创建超链接？ 在HTML中创建超链接非常简单，只需用a/a标签环绕需要被链接的对象即可。 a href=跳转目标 target=目标窗口的弹出方式文本或图像/a href用于指定链接目标的url地址，当为a标签应用href属性时，它就具有了超链接的功能。 target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。 1、暂时没有确定链接目标时，通常将a标签的href属性值定义为“#” (即href=#)，表示该链接暂时为一个空链接。 2、不仅可以创建文本超链接，在网页中各种网页元素，如图像、 表格、 音频、视频等都可以添加超链接。 3、当给图像添加超链接时，图像会自动加上边框，通常需要清除超链接 图像的边框。 6.3 超链接标签 如果网页内容较多，页面过长。 浏览网页时就需要不断地拖动滚动条，来查看所需要的内容。 效率较低 不方便 6.3 超链接标签 为了提高信息的检索速度 HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。 6.3 超链接标签 创建锚点链接分为两步 2 1 使用“a href=#id名链接文本/a”创建链接文本 使用相应的id名标注跳转目标的位置 例如 a href=#one平面广告设计/a . . . h3 id=one平面广告设计/h3 创建链接文本“平面广告设计” 跳转目标的位置 6.3 超链接标签 6.4 链接伪类控制超链接 在CSS中通过链接伪类可以实现不同的链接状态 定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。 什么是伪类？ 6.4 链接伪类控制超链接 伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标签名、类名或id名加“：”构成。 6.4 链接伪类控制超链接 超链接标签a的伪类 超链接标签a的伪类 含义 a:link{ CSS样式规则; } 未访问时超链接的状态 a:visited{ CSS样式规则; } 访问后超链接的状态 a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态 a:active{ CSS样式规则; } 鼠标点击不动时超链接的状态 6.4 链接伪类控制超链接 style type=text/css a:link,a:visited{ color:#FC0; text-decoration:none; /*清除超链接默认的下划线*/ margin-right:20px