a:link{ //正常下的超链接
color:red; //超链接的颜色
text-decoration:none; //超链接没有下划线
}
a:visited{ //访问过的超链接
color:yellow; //访问过的超链接颜色
text-decoration:none; //访问过的超链接没有下划线
}
a:hover{ //鼠标悬停超链接
color: blue; //鼠标悬停超链接颜色
text-decoration:underline; //鼠标悬停超链接带下划线
}
a:active{ //鼠标点击超链接时
color:black; //鼠标点击超链接时颜色
text-decoration:none; //鼠标点击超链接时没有下划线
}
超链接实现按钮效果:
<head>
<style>
a{
margin:9px; //超链接之间的距离
background-color:#3399ff; //超链接背景颜色
}
a:link,a:visited{ //正常超链接和访问过的超链接
padding:4px 10px 4px 10px; //超链接文字与背景四周间距
border-top:1px solid #eeeeee; //超链接上边框1px 实线 颜色
border-left:1px solid #eeeeee; //超链接左边框1px 实线 颜色
border-right:1px solid #717171; //超链接右边框1px 实线 颜色
border-bottom:1px solid #717171; //超链接下边框1px 实线 颜色
}
a:hover{
border-top:1px solid #717171; //超链接上边框1px 实线 颜色
border-left:1px solid #717171; //超链接左边框1px 实线 颜色
border-right:1px solid #eeeeee; //超链接右边框1px 实线 颜色
border-bottom:1px solid #eeeeee; //超链接下边框1px 实线 颜色
padding:5px 8px 3px 12px; //超链接文字与背景四周间距
}
</style>
</head>
<body>
<a href="#">中国</a>
<a href="#">中国</a>
<a href="#">美国</a>
<a href="#">刊国</a>
<a href="#">日本</a>
</body>
CSS设置鼠标特效:
a.help:hover{
cursor:help; //当鼠标悬停到超链接时，鼠标的指针变成帮助指针
}
下面是全部cursor 的 css 效果
十字准心 cursor:crosshair;
手 cursor:pointer;
cursor:hand;
写两个是为了照顾IE5，它只认hand。
等待/沙漏 cursor:wait;
帮助 cursor:help;
无法释放 cursor:no-drop;
文字/编辑 cursor:text;
可移动对象 cursor:move;
向上改变大小 cursor:n-resize;
向下改变大小 cursor:s-resize;
向右改变大小 cursor:e-resize;
向左改变大小 cursor:w-resize;
向上右改变大小 cursor:ne-resize;
向上左改变大小 cursor:nw-resize;
向下右改变大小 cursor:se-resize;
向下左改变大小 cursor:sw-resize;
自动 cursor:auto;
禁止 cursor:not-allowed;
处理中 cursor:progress;
系统默认 cursor:default;
用户自定义 cursor:url('#');#=光标文件地址(注意文件格式必须为.cur或.ani)。
利用css设置滚动条效果:
scrollbar-arrow-color:red; //设置滚动条箭头颜色
scrollbar-base-color:balck; //设置滚动条基本颜色
scrollbar-face-color:yellow ; //设置滚动条基本颜色
scrollbar-darkshadow-color:blue; // //设置滚动条背面线的颜色
scrollbar-3dlight-color:red; //设置滚动条前面线的颜色
scrollbar-shadow-color:blue; //设置滚动条背面线的颜色