2007-10-11

精通CSS+DIV：用CSS设置页面和浏览器的元素

关键字: 超链接 鼠标 滚动条
一、超链接
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
评论
发表评论

您还没有登录，请登录后发表评论

hideto
搜索本博客
我的相册
A6bdc31c-c66e-468e-961e-9cc721e82adc-thumb
screenshot
共 1 张
存档
最新评论