第5课 CSS3-设置超链接与导航条
合集下载
第5章 设计超链接和导航菜单 网页设计课件
选择【插入】|【超级链接】命令，打开【超级链接】对话框。
5.2.4 使用快捷菜单
右键单击选中的文字或图像，在打开的快捷菜单中选择【创建链接】命 令，打开【选择文件】对话框，即可定义超链接。
5.2.5 鼠标拖动
按住Shift键，在选定的文本上拖动鼠标指针，在拖动时会出现指向文件 图标。拖动鼠标到文件中的锚点或者【文件】面板中另一个文件，最后 释放鼠标即可。
第5章 设计超链接和 导航菜单
学习要点
•熟悉路径以及URL表示方法 •在网页中插入超链接。 •设置热点地图。 •设计导航菜单。
5.1 超链接概述
5.1.3 根路径
根路径是指从站点根文件夹到被链接文件经由的路径。根路径由前斜杠 开头，它代表站点根文件夹。例如，/news/beijing2005.html就是站点根 文件夹下的news子文件夹中的一个文件（beijing2005.html）的根相对路 径。在网站内链接文件时一般使用根路径的方法，因为在移动一个包含 根相对链接的文件时，无需对原有的链接进行修改。
5.3.5 实战演练：创建下载链接
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被 浏览器直接下载，到本地计算机中。
5.3.6 实战演练：创建双链接或多重链接
双链接就是在一个超链接中包含两个指定路径，同理多重链接是在一个 超链接中包含多个指定路径。双链接和多重链接在某些时候有特殊的用 处。双链接常用来实现链接时两个框架页面内的内容都改变，多重链接 并不常用，它使一个链接元素链接多个文档。
5.3.3 实战演练：创建脚本链接
脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象 ，可以执行脚本代码（如JavaScript或VBScript脚本代码等），利用这种 特殊的方法可以实现各种特殊的功能，如使用脚本链接进行确认或验证 表单指定路径的链接。利用空链接可以激活文档中链接文本 或对象。一旦对象或文本被激活，则可以为之添加行为，以实现当鼠标 移动到链接上时进行切换图像或显示分层等动作。有些客户端动作，需 要由超链接来调用，这时就需要用到空链接。
5.2.4 使用快捷菜单
右键单击选中的文字或图像，在打开的快捷菜单中选择【创建链接】命 令，打开【选择文件】对话框，即可定义超链接。
5.2.5 鼠标拖动
按住Shift键，在选定的文本上拖动鼠标指针，在拖动时会出现指向文件 图标。拖动鼠标到文件中的锚点或者【文件】面板中另一个文件，最后 释放鼠标即可。
第5章 设计超链接和 导航菜单
学习要点
•熟悉路径以及URL表示方法 •在网页中插入超链接。 •设置热点地图。 •设计导航菜单。
5.1 超链接概述
5.1.3 根路径
根路径是指从站点根文件夹到被链接文件经由的路径。根路径由前斜杠 开头，它代表站点根文件夹。例如，/news/beijing2005.html就是站点根 文件夹下的news子文件夹中的一个文件（beijing2005.html）的根相对路 径。在网站内链接文件时一般使用根路径的方法，因为在移动一个包含 根相对链接的文件时，无需对原有的链接进行修改。
5.3.5 实战演练：创建下载链接
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被 浏览器直接下载，到本地计算机中。
5.3.6 实战演练：创建双链接或多重链接
双链接就是在一个超链接中包含两个指定路径，同理多重链接是在一个 超链接中包含多个指定路径。双链接和多重链接在某些时候有特殊的用 处。双链接常用来实现链接时两个框架页面内的内容都改变，多重链接 并不常用，它使一个链接元素链接多个文档。
5.3.3 实战演练：创建脚本链接
脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象 ，可以执行脚本代码（如JavaScript或VBScript脚本代码等），利用这种 特殊的方法可以实现各种特殊的功能，如使用脚本链接进行确认或验证 表单指定路径的链接。利用空链接可以激活文档中链接文本 或对象。一旦对象或文本被激活，则可以为之添加行为，以实现当鼠标 移动到链接上时进行切换图像或显示分层等动作。有些客户端动作，需 要由超链接来调用，这时就需要用到空链接。
《Web前端技术项目式教程》任务五 CSS3导航条
Web前端技术项目式教程
（HTML5+CSS3+Flex+Bootstrap）
任务一
CSS3制作导航条
学习目标
1 2 3 4 5 6
• 了解列表的样式类型 • 了解列表的位置属性 • 了解列表样式的图片属性 • 掌握新闻列表的制作方法 • 掌握水平导航条、垂直导航条的制作方法 • 掌握二级菜单的制作方法
list-style-type：设定引导列表项目的符号类型 list-style-image：选择图像作为项目的引导符号 list-style-position： 决定列表项目所缩进的程度
列表符号
列表项目的符号类型，有多种值可选，常见的如 none、disc、circle、decimal、lower-roman等。要 修改用于列表项的标志类型，可以使用属性list-styletype。
ol, ul { list-style: none; }
图片符号
List-style-image即列表 样式图片，该属性可以将定制的 图片设置为项目符号。
例5-2 列表样式图片属性
添 加 CSS 样 式 代 码 ， 将 列 表 样 式 的 项 目 符 号 设 置 为 none，将图标作为背景出现，并且设置背景图像的位置来达 到需要的效果，如图5-2所示。
运行效果如图5-3所示
任务拓展：二级菜单和职位列表制作
二级菜单制作
二级菜单在页面中非常常见，在本任务拓展要实现的效果是只有当鼠 标悬停在一级菜单上时，二级菜单才显示，即当鼠标经过一级菜单时会显 示一个下拉列表，如图5-10所示，实现该效果的具体操作步骤如下。
首先用无序列表创建导航条的一级菜单和二级菜单， 代码如下。
图 5 - 2 列表样式图片属性效果图
（HTML5+CSS3+Flex+Bootstrap）
任务一
CSS3制作导航条
学习目标
1 2 3 4 5 6
• 了解列表的样式类型 • 了解列表的位置属性 • 了解列表样式的图片属性 • 掌握新闻列表的制作方法 • 掌握水平导航条、垂直导航条的制作方法 • 掌握二级菜单的制作方法
list-style-type：设定引导列表项目的符号类型 list-style-image：选择图像作为项目的引导符号 list-style-position： 决定列表项目所缩进的程度
列表符号
列表项目的符号类型，有多种值可选，常见的如 none、disc、circle、decimal、lower-roman等。要 修改用于列表项的标志类型，可以使用属性list-styletype。
ol, ul { list-style: none; }
图片符号
List-style-image即列表 样式图片，该属性可以将定制的 图片设置为项目符号。
例5-2 列表样式图片属性
添 加 CSS 样 式 代 码 ， 将 列 表 样 式 的 项 目 符 号 设 置 为 none，将图标作为背景出现，并且设置背景图像的位置来达 到需要的效果，如图5-2所示。
运行效果如图5-3所示
任务拓展：二级菜单和职位列表制作
二级菜单制作
二级菜单在页面中非常常见，在本任务拓展要实现的效果是只有当鼠 标悬停在一级菜单上时，二级菜单才显示，即当鼠标经过一级菜单时会显 示一个下拉列表，如图5-10所示，实现该效果的具体操作步骤如下。
首先用无序列表创建导航条的一级菜单和二级菜单， 代码如下。
图 5 - 2 列表样式图片属性效果图
教学设计-建立超链接——制作导航条[1]
![教学设计-建立超链接——制作导航条[1]](https://img.taocdn.com/s3/m/0fbd55db551810a6f52486e1.png)
教学设计:建立超链接——制作导航条[1]各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢教学设计思路：以网络为基础，通过自建的主页服务平台与网页设计互动学习论坛，以任务驱动的形式让每一位学生选择自己合适的进度进行学习，通过阶段考核（课堂考核）和总结性考核，促使学生自主完成作业，以主页服务平台的优秀作品展示促进学生的成就感，保证学生对网页设计选修课程的持续学习的能力和兴趣。
准备素材：1、内容：通过photoshop制作如图41所示的导航条所需图片2、供学生练习用的素材包下载地址1、知识目标：A、了解导航条的概念、功能、基本构成元素建立超链接--制作导航条B、了解[插入导航条窗口]各要素的含义c、了解导航条的创建、删除、编辑操作过程2、能力目标：A、能够根据要求完成指定图片导航条的制作B、拓展性要求：能够独立制作完成自己网站导航条的制作（可选，以后设计网站过程中自行完成）c、培养学生的自主学习能力D、培养学生的审美能力3、情感目标：通过提供相关资源，树立我为人人、人人为我的思想教学过程：教学程序教学内容要点教法设计教师活动学生活动时间传授新课了解导航条的概念、基本属性、与超级链接的联系及区别以网站内的文件链接知识复习作为引入授课：导航条的概念、基本属性、与超级链接的联系及区别听讲3’引入1、培养学生的观察、语言表达能力，复习信息技术基础课程中的一些基本知识，如如何下载图片等等2、埋下伏笔：有利于学生对［插入导航条］窗口中需要的各类图片的理解访问网站，鼠标在导航条各元素之间移动并点击观察3’提问：、有什么现象？2、该导航条的基本构成元素是什么（即如何判断导航条的类型）？思考与讨论介绍制作这种类型的导航条需要什么技术？引入如何通过FrontPage创建图片导航条并演示如何调出创建导航条的对话框。
听讲，观察学生自主学习完成任务1、了解[插入导航条]窗口各要素的含义2、了解导航条的创建、删除、编辑操作过程1、培养学生自主学习能力与协作精神2、培养学生搜集信息的能力3、通过论坛锻炼学生发布信息的能力，帮助他人解决问题的品格1、布置任务2、教师个别辅导3、组织学生提供资源、互相交流。
Web前端开发案例教程5制作学院网站导航条
display: inline| block| inline-block| none;
5.2.3 元素的类型与转换
元素的转换
display 属性常用的属性值及含义如下。
➢ inline：行内元素，该值是行内元素的默认属性值。 ➢ block：块元素，该值是块元素的默认属性值。 ➢ inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属
list-style: 列表项目符号 列表项目符号的位置 列表项目图像;
5.2.1 无序列表样式设置
无序列表样式设置 example超链接默认的文字颜色为蓝色且带有下划线，这种单调的样 式并不好看。实际上，为了使超链接看起来更加美观，经常需 要为超链接指定不同的状态，使得超链接在单击前、单击后和 鼠标指针悬停时的样式不同。在 CSS 中，通过超链接伪类可以 实现不同的超链接状态。
超链接样式设置
example02. html
5.2.3 元素的类型与转换
HTML 提供了丰富的标记，用于组织页面结构。为了使页 面结构的组织更加清晰、合理，HTML 标记被定义成了不同的 类型，一般分为块标记和行内标记，也称块元素和行内元素。 块元素和行内元素还能根据实际需求进行类型转换。
5.2.3 元素的类型与转换
（3）list-style-image 属性：设置列表项的项目图像，使列表的样式更加美观， 其取值为图像的URL。
5.2.1 无序列表样式设置
无序列表样式设置
（4）list-style 属性：综合设置列表样式，可以代替上面 3 个属性。使用 liststyle 属性综合设置列表项的样式，格式如下。
任务小结
任务小结
本任务围绕学院网站导航条的实现，介绍了无序列表和超链接的样式设置方 法、元素的类型与类型转换等，最后综合利用所学知识实现了带有下拉菜单的 导航条。本任务介绍的主要知识点如下表所示。
5.2.3 元素的类型与转换
元素的转换
display 属性常用的属性值及含义如下。
➢ inline：行内元素，该值是行内元素的默认属性值。 ➢ block：块元素，该值是块元素的默认属性值。 ➢ inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属
list-style: 列表项目符号 列表项目符号的位置 列表项目图像;
5.2.1 无序列表样式设置
无序列表样式设置 example超链接默认的文字颜色为蓝色且带有下划线，这种单调的样 式并不好看。实际上，为了使超链接看起来更加美观，经常需 要为超链接指定不同的状态，使得超链接在单击前、单击后和 鼠标指针悬停时的样式不同。在 CSS 中，通过超链接伪类可以 实现不同的超链接状态。
超链接样式设置
example02. html
5.2.3 元素的类型与转换
HTML 提供了丰富的标记，用于组织页面结构。为了使页 面结构的组织更加清晰、合理，HTML 标记被定义成了不同的 类型，一般分为块标记和行内标记，也称块元素和行内元素。 块元素和行内元素还能根据实际需求进行类型转换。
5.2.3 元素的类型与转换
（3）list-style-image 属性：设置列表项的项目图像，使列表的样式更加美观， 其取值为图像的URL。
5.2.1 无序列表样式设置
无序列表样式设置
（4）list-style 属性：综合设置列表样式，可以代替上面 3 个属性。使用 liststyle 属性综合设置列表项的样式，格式如下。
任务小结
任务小结
本任务围绕学院网站导航条的实现，介绍了无序列表和超链接的样式设置方 法、元素的类型与类型转换等，最后综合利用所学知识实现了带有下拉菜单的 导航条。本任务介绍的主要知识点如下表所示。
CSS3-设置超链接与导航条
</body>
未设置CSS样式
2、设置#menu盒子的css样式：
<style>
#menu {
/*设置menu盒子*/
border:1px solid #ccc;
font-family:Arial;
font-size:14px;
font-weight:bold;
width:120px;
padding:8px;
描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。) 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式：
<style>
a{
/* 超链接整体外观 */
font-size:14px;
font-family:“”;
line-height:50px;
padding:20px
}
a:link {
/* 超链接正常状态下的样式 */
color:red; /* 红色 */
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body>
<ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul>
未设置CSS样式
2、设置#menu盒子的css样式：
<style>
#menu {
/*设置menu盒子*/
border:1px solid #ccc;
font-family:Arial;
font-size:14px;
font-weight:bold;
width:120px;
padding:8px;
描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。) 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式：
<style>
a{
/* 超链接整体外观 */
font-size:14px;
font-family:“”;
line-height:50px;
padding:20px
}
a:link {
/* 超链接正常状态下的样式 */
color:red; /* 红色 */
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body>
<ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul>
在CSS中定义【导航栏】超链接样式
在CSS中定义【导航栏】超链接样式1、案例css代码1. <style>2. .divcss5 a:link{ :#F00}/* 链接默认为红⾊ */3. .divcss5 a:hover{ color:#000}/* ⿏标悬停⿊⾊ */4. .divcss5 a:active{ color:#03F}/* ⿏标点击与释放时蓝⾊ */5. .divcss5 a:visited{ color:#F0F}/* 访问过为粉红 */6. /* divcss5对象内 a超链接设置样式 */7. </style>2、案例html代码1. <div class="divcss5">2. DIVCSS5关于3. <a href="/shili/s57.shtml">CSS a样式</a>案例4. </div>===================⾃⼰的案例，/*导航栏*/.menu a:link{ color:white}/* 链接默认为⽩⾊ */.menu a:hover{ color:red}/* ⿏标悬停⽩⾊ */.menu a:active{ color:yellow}/* ⿏标点击与释放时⽩⾊ */.menu a:visited{ color:black}/* 访问过为⽩⾊ */以上是css⽂件<ul class="menu" id="menu"><li ><a href=>⾸页</a></li><li ><a href=>公司介绍</a></li><li ><a href=>资讯美⽂</a></li><li ><a href=>装修⼯地</a></li><li ><a href=>商品展⽰</a></li><li class="banner_li" ><a href=>优秀员⼯</a></li></ul>。
HTML5+CSS3网页设计基础 第八章 链接与导航
第8章 链接与导航
第6页
8.1.2 设置文字链接样式
伪类中通过:link、:Visited、:hover和:active来控制链接 内容访问前、访问后、鼠标悬停时以及用户激活时的样式 。需要要说明的是，这4种状态的顺序不能颠倒，否则可 能会导致伪类样式不能实现。 参考示例：8-1-1.html ， 8-1-2.html
第8章 链接与导航
第19页
制作完成演示案例:产品中心页面的产品链接。 参考代码 8-1.html
HTML5+CSS3网页设计基础
第8章 链接与导航
第9页
8.2 纵向导航菜单设计
本节主要内容：
案例分析
纵向导航菜单
案例制作
HTML5+CSS3网页设计基础
第8章 链接与导航
第10页
8.2.1 案例分析
【案例展示】使用CSS设置纵向导航菜单的基本知识制作 “产品中心”页面的左侧导航菜单。 【知识要点】普通的链接导航菜单、纵向列表导航菜单。 【学习目标】掌握使用CSS设置纵向导航菜单的常用方法 参考代码：8-2.html
HTML5+CSS3网页设计基础
第8章 链接与导航
第7页
8.1.3 设置图像链接样式
网页设计中对文字链接的修饰不仅限于增加边框、修改背 景颜色等方式，还可以利用背景图片对文字链接进行进一 步美化。 参考示例：8-1-3.html
HTML5+CSS3网页设计基础
第8章 链接与导航
第8页
8.1.4 案例制作
第8章 链接与导航
本章概述 本章的学习目标 主要内容
网页超链接与导航ppt课件
一、网页超链接概述
index.htm要想链接到01.htm这个文件，正确的链接应该是：<a href=web/article/01.htm>链接文字</a>，这是标准的相对路径。
反过来，01.htm要想链接到index.htm这个文件，在01.htm文件 里面应该写上这句：<a href=../../index.htm>返回首页</a>。这里的../ 表示向上一级。
一、网页超链接概述
相对路径：
在HTML中使用相对路径常分为两类：相对当前文档、相对站点 根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。 如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个 站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类 型的路径，最好坚持使用文档相对路径。
提示：修改超链接的操作步骤与创建超链接相同。若删除超 链接，只要选定超链接对象，将“属性”面板“链接”下拉框中的 内容删除即可。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
《网页设计》课程
网页超链接与导航
计W算P机S 与OF通FI信CE系
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
一、网页超链接概述
index.htm要想链接到01.htm这个文件，正确的链接应该是：<a href=web/article/01.htm>链接文字</a>，这是标准的相对路径。
反过来，01.htm要想链接到index.htm这个文件，在01.htm文件 里面应该写上这句：<a href=../../index.htm>返回首页</a>。这里的../ 表示向上一级。
一、网页超链接概述
相对路径：
在HTML中使用相对路径常分为两类：相对当前文档、相对站点 根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。 如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个 站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类 型的路径，最好坚持使用文档相对路径。
提示：修改超链接的操作步骤与创建超链接相同。若删除超 链接，只要选定超链接对象，将“属性”面板“链接”下拉框中的 内容删除即可。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
《网页设计》课程
网页超链接与导航
计W算P机S 与OF通FI信CE系
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
一、网页超链接概述
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2、去掉超链接图片的边框：
<style> a:link img,a:visited img { border: #FFF 1px dotted } </style>
注意：如果边框设置为none，则鼠标经过 图片加边框会出现跳动，因此把边框线设为 背景色一样即可。
3、设置鼠标经过时img的样式：
a:hover { cursor: default; } a:hover img { border: #555 1px dotted }
a: link {color: 白色}
/* 未访问的链接 */ /* 已访问的链接 */ /* 鼠标移动到链接上 */ /* 选定的链接 */
a:visited {color: 蓝色}
a:hover {color: 红色} a:active {color: 绿色}
注意： 1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3. 伪类名称对大小写不敏感。
第7课 CSS-4
用css设置超链接与导航条
一、<a>超链接的四种状态
1. 在html语言中，超链接通过<a>标记来实 现的，其默认的显示效果为蓝色加下划线。
2. 利用css可以设置超链接各种状态下的样式， 包括字体、颜色和背景。 3. Css利用伪类选择器设置<a>标记的不同状 态。
超链接有四种状态：活动状态，已被访问状 态，未被访问状态，和鼠标悬停状态。
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式： <style> a{ /* 超链接整体外观 */ font-size:14px; font-family:“”; line-height:50px; padding:20px } a:link { /* 超链接正常状态下的样式 */ color:red; /* 红色 */ text-decoration:none; /* 无下划线 */ } a:visited { /* 访问过的超链接 */ color:black; /* 黑色 */ text-decoration:none; } a:hover { /* 鼠标指针经过时的超链接 */ color:yellow; /* 黄色 */ text-decoration:underline;/* 下划线 */ background-color:blue; }
5.2 用CSS设置图片符号及位置： list-style-image和list-style-position
1、设置列表的图片符号：
Ul { font-size:0.9em; color:#00458c;
list-style-image: url(list-img/li1.gif);
}
2、设置图片或符号的位置：
3、设置超链接 a 的整体样式：
#menu a { display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单分隔线*/ height:1em; }
4、设置鼠标悬停状态的CSS样式：
#menu a:hover { color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/ }
5、制作横竖自由转换的导航条
#menu a
{ display:block; /*用块方式显示行内元素 */ float：left /*制作横向导航条时需要*/ }
5.1 用CSS设置列表的符号： list-style-type属性
ie中有效的值：
值 none disc circle square decimal decimal-leading-zero lower-roman upper-roman 描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。)
九、鼠标经过时图片加边框
1. 准备html代码：
<body> <a href="#" ><img src="cup.gif" /></a> <a href="#" ><img src="cup.gif" /></a> <a href="#" ><img src="cup.gif" /></a> </body>
1、准备代码：
<body> <div id=“menu”> <a href="home.htm">Home</a> <a href="east.htm">East</a> <a href="west.htm">West</a> <a href="north.htm">North</a> <a href="south.htm">South</a> </div> </body>
注意图片的选择器为 a:hover img ，同时 设置鼠标悬停a:hover的形状为default
思考：如何制作鼠标经过时图片替换
lower-alpha
upper-alpha
小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
1、设置空心圆的项目符号：
Ul { font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */ }
Ul {
font-size:0.9em; color:#00458c; list-style-image: url(list-img/li1.gif);
list-style-position:inside;
}
3、设置<li>加点线下边框：
ul li { border-bottom: #999 1px dashed ;
</div> </body：
#navigation { width:800px; font-family:Arial; font-size:14px; }
4、设置<a>超链接整体和鼠标悬停状态下的样式：
#navigation a { line-height:30px; /*设置行高*/ color:#3F3; /*设置字体颜色*/ background-image:url(list-img/bg-g1.jpg); /*设置背景图片*/ padding:4px 10px; /*设置边框与文字的距离*/ text-decoration:none; } #navigation li a:hover { background-image:url(list-img/bg-g2.jpg); /*设置背景图片*/ color: #0FF; }
设置超链接样式后
效果2：制作横向或竖向的荧光灯效果导航条
1、准备代码：
<body> <div id="menu"> <a href="#" id="first"> Home </a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#" id="last"> Map </a> </div> </body>
未设置CSS样式
2、设置#menu盒子的css样式：
<style> #menu { /*设置menu盒子*/ border:1px solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; } </style> 设置#menu的样式后
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </body>