七.页面和浏览器元素

7.1丰富的超链接特效

7.1.1动态超链接

a:link{ /* 超链接正常状态下的样式 */

color:#005799; /* 深蓝 */

text-decoration:none; /* 无下划线 */

}

a:visited{ /* 访问过的超链接 */

color:#000000; /* 黑色 */

text-decoration:none; /* 无下划线 */

}

a:hover{ /* 鼠标经过时的超链接 */

color:#FFFF00; /* 黄色 */

text-decoration:underline; /* 下划线 */

}

7.1.2按钮式超链接

a{ /* 统一设置所有样式 */

font-family: Arial;

font-size: 1.2em;

text-align:center;

margin:3px;

}

a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */

color: #A62020;

padding:4px 10px 4px 10px;

background-color: #ecd8db;

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:#e2c4c9; /* 改变背景色 */

border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */

border-left: 1px solid #717171;

border-bottom: 1px solid #EEEEEE;

border-right: 1px solid #EEEEEE;

}

7.1.3浮雕式超链接

a{

width:80px; height:32px;

padding-top:10px;

text-decoration:none;

text-align:center;

background:url(button1.jpg) no-repeat; /* 超链接背景图片 */

}

a:link{color:#654300;}

a:visited{color:#654300;}

a:hover{

color:#FFFFFF;

text-decoration:none;

background:url(button2.jpg) no-repeat; /* 变换背景图片 */

}

7.2鼠标特效

CSS控制鼠标

a.help:hover{ /* “帮助”按钮的样式 */

cursor:help; /* 变幻鼠标形状 */

}

<a href="#" class="help">帮助</a>

7.3页面滚动条

body{ /* 页面滚动条 */

background-color:#efe5e2;

scrollbar-3dlight-color: #B0C4DE;

scrollbar-arrow-color: #34547E;

scrollbar-base-color: #FF0000; /* 基调颜色 */

scrollbar-darkshadow-color: #1D4272;

scrollbar-face-color: #CFDFF4;

scrollbar-highlight-color: #FFFFFF;

scrollbar-shadow-color: #5380BA;

}

.largetext { /* 文本框滚动条 */

scrollbar-3dlight-color: #B0C4DE;

scrollbar-arrow-color: #FFFFFF;

scrollbar-base-color: #8BA9CF;

scrollbar-darkshadow-color: #436DA3;

scrollbar-face-color: #34547E;

scrollbar-highlight-color: #E6ECF4;

scrollbar-shadow-color: #000000;

}