用CSS设置超链接与导航菜单.ppt
,用CSS设置 链接与导航菜单,1 制作丰富的超链接特效,在HTML语言中，超链接是通过标记来实现的，链接的具体地址则是利用标记的href属性，代码如下： 百度,a /* 超链接的样式 */ text-decoration:none; /* 去掉下画线 */ ,2 创建按钮式超链接,首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下：, Home East West North South , a display:block; /*设置为块级元素*/ font-family: Arial; /* 统一设置所有样式 */ font-size: .8em; text-align:center; margin:3px; ,a:link, a:visited /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #DDD; text-decoration: none; border-top: 1px solid #EEEEEE;/* 边框实现阴影效果 border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; ,a:hover /* 鼠标经过时的超链接 */ color:#821818; /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#CCC; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; ,图 最终效果,3 制作荧光灯效果的菜单,图 荧光灯效果菜单,3.1 创建HTML框架,首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下。, Home Contact Us Web Dev Web Design Map ,3.2 设置容器的CSS样式,（1）现在设置菜单div容器的整体区域样式，设置菜单的宽度、背景色，以及文字的字体和大小。 在HTML文件的head部分增加CSS样式表代码如下。, #menu font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; margin:0 auto; border:1px solid #ccc; ,3.3 设置菜单项的CSS样式,（1）现在就需要设置文字链接了。 为了使5个文字链接依次竖直排列，需要将它们从“行内元素”变为“块级元素”。 此外还应该为它们设置背景色和内边距，以使菜单文字之间不要过于局促。,具体代码如下： #menu a, #menu a:visited display:block;块级元素 padding:4px 8px; ,效果如图所示，斜线部分就是padding属性设置的内边距。,（2）接下来设置文字的样式，取消下画线，并将文字设置为灰色，代码如下： color:#ccc; text-decoration:none;,（3）还需要给每个菜单项的上面增加一个“荧光灯”，这可以通过设置上边框来实现，代码如下： border-top:8px solid #060; #menu a:hover color:#FF0; border-top:8px solid #0E0; ,4 控制鼠标指针,表11.2 cursor定制的鼠标指针效果,5 设置项目列表样式,CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。 列表类型 要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。 例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。 要修改用于列表项的标志类型，可以使用属性 list-style-type： ul list-style-type : square 上面的声明把无序列表中的列表项标志设置为方块。,列表项图像 有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到： ul li list-style-image : url(xxx.gif) 只需要简单地使用一个 url() 值，就可以使用图像作为标志。 列表标志位置 CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。 简写列表样式 为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样： li list-style : url(example.gif) square inside list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。,图11.6 普通项目列表,图11.7 项目编号,6 创建简单的导航菜单,6.1 简单的竖直排列菜单,无需表格的菜单,基本页面 页面背景色 项目列表为普通超链接 添加边框，分割超链接 设置超链的样式,6.2 横竖自由转换菜单,水平菜单,水平菜单可以自由地转换为竖直菜单和折行菜单,7 应用滑动门技术的玻璃效果菜单,玻璃效果的菜单,基本页面 设置菜单整体效果 应用滑动门技术,
