利用CSS来设计导航技术分析.pptVIP

Div 导航 Span 实验练习 Ul/li 导航 主要内容 利用CSS设置超链接 利用CSS设置鼠标指针 利用CSS设置项目列表 利用CSS来创建导航： 竖排导航 横排导航 滑动门技术的玻璃菜单导航 利用CSS设置超链接 在默认方式下，超链接显示为蓝色有下划线，被点击过的链接为紫色也有下划线，通过CSS可以设置链接的各种属性来改变这种默认外观，还可以实现很多动态效果。如去除链接的下划线： a { text-decoration:none; } 仅仅设置a来改变超链接并没有太多动态效果，还需要设置CSS伪类 伪类只针对链接的4种状态进行设定： a:link 未访问过的超链接a:visited 访问过的超链接a:active 活动超链接a:hover 悬停状态的超链接 示例1 示例2 利用CSS设置超链接 注意事项： 1）伪类样式中可以添加边框、背景等，可以得到各种样式的效果；2）a:active状态很少使用；3）设置伪类要按照顺序link/visited/hover/active进行设置；4）选择器与伪类的冒号之间不要有空格。 CSS设置鼠标指针 ?? 示例1 cursor: crosshair 十字 cursor: default 默认 cursor: help 帮助 cursor: wait 等待 cursor: move 移动 cursor: pointer 手形 利用CSS设置项目列表(无序列表） 列表样式类型属性(list-style-type) 这个属性用来设定列表项标记(list-item marker)的类型。有以下值：????示例 disc (缺省值，黑圆点)circle (空心圆点)square (小黑方块)decimal (数字排序)lower-roman (小写罗马字排序)upper-roman (大写罗马字排序)lower-alpha (小写字母排序)upper-alpha (大写字母排序)none (无列表项标记) 利用CSS设置项目列表(无序列表） 列表样式位置属性(list-style-position) 有两个值：outside (以列表项内容为准对齐)inside (以列表项标记为准对齐) 列表样式图片属性(list-style-image) 设定图片。???示例1 示例代码如下： ul { list-style-image: url(dot02.gif) } 示例2 利用CSS设置项目列表(无序列表） 列表样式属性(list-style)这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。 示例代码如下： ul {list-style:circle inside url(dot02.gif)}???? 示例1 CSS 样式设计导航条 1、竖排导航条 各种导航菜单都是用项目列表去除项目符号之后的效果，再通过CSS的属性设置，可以获得很多意外的效果。 说明：display:block语句，将链接设置为块元素，鼠标进入到此块的任何区域都能够被激活，而不仅是在文字上方时才被激活。 2、横排导航条 对以上的竖排菜单，只需要做两处修改，就可以得到一个适应浏览器窗口宽度的横竖自由转换的菜单。 示例1 示例2 滑动门技术的玻璃菜单导航 实现步骤： 1）HTML准备 2）设置菜单的整体效果， 确定菜单的位置 设置列表的外观 设置每项li为左浮动，将列表横向排列成一行 将a设置为一块，这种整个矩形范围都会相应鼠标事件 再添加一些细节设置，外观效果基本设置完成，接下来就是滑动门技术设置背景。 示例 滑动门技术的玻璃菜单导航 实现步骤： 3）滑动门实现 鼠标经过时，文字白色，背景设置为玻璃质感的蓝色图片 效果出现，但是不是我们想要的，右边被整齐切断，没有平滑的右端，这正是滑动门需要解决的问题，需要借助于“钩子”标记strong， 对钩子strong进一步设置，先将其设置为一块 再设置钩子悬停状态，与链接a的悬停状态设置同一幅背景图片，且定义此背景图片的显示方式，不重复，从右上角开始显示。效果 效果基本完成，还有细节需要调整，背景图片不对称，解决 示例1 示例2 课堂实验：完成实验二十一，要检查