CSS设置链接和导航菜单.pptVIP

用CSS设置链接与导航菜单 超链接特效 a href=前沿视频教室/a 通过设置标记a改变超链接的各种属性： a{ text-decoration:none; } a{ font-size:14px; font-family:Arial, Helvetica, sans-serif; } 超链接特效 利用CSS的伪类别属性制作特效(test06-01)： a:link 正常浏览状态的样式 （字符颜色为红色，无下划线） a:visited 被点击过的超链接的样式 （字符颜色为黑色，无下划线） a:hover 鼠标经过超链接时的样式 （字符颜色为黄色，加下划线，蓝色背景色） a:active 鼠标在超链接上点击时的样式 （字符颜色为绿色） 创建按钮式超链接 对比两者的区别，分析要设置的CSS: 外边距 每个链接上的文字颜色 下划线 有背景颜色 内边距 边框 外边距：3px 正常状态文字颜色#A62020 没有下划线 背景颜色#DDD 内边距上下4px，左右10px 上、左边框颜色#EEEEEE 下、右边框颜色#717171 鼠标移到上方颜色#821818 背景色#CCC 内边距5px 8px 3px 12px 创建按钮式超链接 a{ /* 统一设置所有样式 */ margin:3px; } a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; text-decoration: none; background-color: #DDD; /* 背景色 */ padding:4px 10px 4px 10px; border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } a:hover{ /* 鼠标经过时的超链接 */ color:#821818; /* 改变文字颜色 */ background-color:#CCC; /* 改变背景色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } 制作荧光灯效果的菜单 竖直排列的菜单效果，每个菜单项上边有一条深绿色的横线，鼠标滑过时变浅绿色 基本架构 div id=“menu”a/a……/div 分析要设置的CSS: div整体区域：背景色、内边距、宽度、居中 字体颜色、下划线、元素类型、边框、内边距 a:link, a:visited, a:hover的区别 制作荧光灯效果的菜单 设置div的CSS样式 #menu{ width:120px; background:#000; border:1px solid #ccc; padding:8px; /*对菜单进行定位*/ margin:0 auto; /*设置水平居中*/ /* font-family:Arial; font-size:14px; font-weight:bold; */ } 制作荧光灯效果的菜单 设置菜单选项 #menu a, #menu a:visited { /*思考:取消#menu a:visited 的效果*/ display:block; /*竖直排列*/ padding:4px 8px; color:#ccc; /*设置文字的样式*/ text-decoration:none; border-top:8px solid #060; /*设置荧光灯*/ /* height:1em;*/ } #menu a:hover { /*设置鼠标经过效果*/ color:#FF0; border-top:8px solid #0E0; } 控制鼠标指针 Cursor属性：改变页面元素的鼠标指针效果 请自行看书7.4节 设置项目列表样式 有序列表ol与无序列表ul ol与ul可以通用:使用属性list-style-type ul{ list-style-type:decimal;