一、超链接
1,动态超链接
a:link {
color: #005799;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FFFF00;
text0decoration: underline;
}
2,按钮式超链接
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;
}
3,浮雕式超链接
table.links {
background:url(button1_bg.jpg) repeat-x;
font-size: 12px;
width: 100%;
}
a {
width: 80px;
height: 32px;
text-decoration: none;
text-align: center;
background:url(button1.jpg) no-repeat;
}
a:link, a:visited { color: #654300; }
a:hover {
color: #FFFFFF;
text-decoration: none;
background:url(button2.jpg) no-repeat;
}
FireFox下显示效果不是很理想,因为FireFox不支持直接设置a标签的高度和宽度,可以采用ul和li
二、鼠标
1,鼠标箭头
body {
cursor: pointer;
}
auto
crosshair
default
e-resize
ne-resize
n-resize
w-resize
nw-resize
se-resize
s-resize
sw-resize
col-resize
row-resize
help
move
all-scroll
no-drop
progress
vertical-text
text
wait
hand
not-allowed
2,鼠标变幻的超链接
a.help:hover {
cursor: help;
}
三、页面滚动条
body {
scrollbar-base-color: #FF0000;
scrollbar-3dlight-color: #B0C4DE;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #5380BA;
scrollbar-darkshadow-color: #1D4272;
scrollbar-arrow-color: #34547E;
scrollbar-face-color: #CFDFF4;
}
该效果仅支持IE