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

news/2024/7/21 4:16:48 标签: 浏览器, CSS, Firefox, IE
一、超链接
1,动态超链接
[code]
a:link {
color: #005799;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FFFF00;
text0decoration: underline;
}
[/code]
2,按钮式超链接
[code]
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;
}
[/code]
3,浮雕式超链接
[code]
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;
}
[/code]
FireFox下显示效果不是很理想,因为FireFox不支持直接设置a标签的高度和宽度,可以采用ul和li
二、鼠标
1,鼠标箭头
[code]
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
[/code]
2,鼠标变幻的超链接
[code]
a.help:hover {
cursor: help;
}
[/code]
三、页面滚动条
[code]
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;
}
[/code]
该效果仅支持IE

http://www.niftyadmin.cn/n/727848.html

相关文章

vue项目外包_12个非常适合做外包项目的开源后台管理系统

1、D2admin开源地址:https://github.com/d2-projects/d2-admin文档地址:https://d2.pub/zh/doc/d2-admin/效果预览:https://d2.pub/d2-admin/preview/#/index开源协议:MIT2、vue-element-admin开源地址:https://github…

从程序员到项目经理我做了这些

从程序员转为项目经理,这是一个大的跨越,有人觉得要等到当上了项目经理才能学习项目管理,其实未必,项目管理所需要素质和技能并不是什么独门秘籍,而是在生活中时时用到、处处可以锻炼的,可以说我们每个人都…

Apache Ranger控制功能

Apache Ranger控制功能# Apache Ranger 是一个在hadoop平台上使用的组件,可以全面监控和管理数据的安全。有关Ranger的安装见我另一篇博客ranger的安装及问题解决。 Apache Ranger目前支持的组件如下 Ranger-usersync用于同步linux的用户和用户组,在ran…

Sharepoint自定义栏在word 2007里的自定义显示

有天无意之中翻SDK里的Technical Articles,发现一篇好文章,受启发,于是实验了一下,果然成功了 我们都知道我们自己开发的custom field,在word2007里的服务器属性中会显示为一个灰色的不可修改的文本框,提示…

Rails宝典之七十五式:复杂表单Part3

前两次学习了动态添加和删除project的多个tasks&#xff0c;这次来看看如何编辑project其他页面不变&#xff0c;但是_task.rhtml改了&#xff1a; [code] <!-- projects/edit.rhtml --> <% form_for :project, :url > project_path(project), :html > { :metho…

mysql 备份mysql数据库_mysql数据库的备份与恢复

mysql数据库的备份与恢复mysqldump命令用于备份数据库数据格式为&#xff1a;mysqldump 【参数】【数据库名称】如果是用mysqldump 来做备份、那么备份用户的相关权限如下&#xff1a;create user dumper127.0.0.1 identified by 123456;grant select on loltop.* to dumper127…

如何给领导汇报项目状况,你会怎样来回答呢?

混职场有两个安身立命的技能&#xff0c;一个是跟同事甩锅&#xff0c;另一个就是跟领导汇报工作。所谓甩锅&#xff0c;就是明确职责边界&#xff0c;知道自己该干什么&#xff1b;而汇报工作&#xff0c;则是让领导知道你干了什么。 第一种误区是工作汇报总是事无巨细&#…

Ranger中的权限管理(用户,用户组,角色管理)

Ranger中的权限管理 所使用ranger版本为2.0.0 Ranger可以将权限提供给用户&#xff0c;用户组&#xff0c;角色。设置界面如下&#xff1a; 用户管理界面同上&#xff1a;  如图&#xff0c;用户分为内部用户&#xff08;Internal&#xff09;和外部用户&#xff08;Extern…