使用CSS错位显示header按钮
使用CSS错位展示header按钮
右侧的按钮可以动态展示，即可添加和去掉。
原理：使用CSS background的错位，来按坐标动态展示按钮。
记得以前Google主页有一次那个乐器主页也是这个原理实现的。
默认蓝色框：
鼠标移上后变白色：
其实这是一张图片，各默认图在上面一行，鼠标移上后的白色图在下面一行。
按钮错位大图（两行，下面还有行白的的，页面看不清楚）：
background:
设置或检索对象的背景图像位置。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。
如果指定了两个值，第二个值将用于纵坐标。如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
废话上说，上代码：
HTML：
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>top</title> <link href="ui.css" rel="stylesheet" type="text/css"> </head> <body> <div class="top_body"> <div class="top_logo"></div> <div class="top_rightbody"> <div class="top_menu_user">系统管理员, 你好！</div> <div class="shortcut_menu"> <ul> <li><a title="首页" href="#" class="button_home" onFocus="this.blur()"></a></li> <li><a title="注销" href="#" class="button_exit" onFocus="this.blur()"></a></li> <li><a title="修改密码" href="#" class="button_password" onFocus="this.blur()"></a></li> <li><a title="帮助" href="#" class="button_help" onFocus="this.blur()"></a></li> <li><a title="问题反馈" href="#" class="button_faq" onFocus="this.blur()"></a></li> <li><a title="关于" href="#" class="button_about" onFocus="this.blur()"></a></li> </ul> </div> </div> </div> </body> </html>
CSS：
* {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
/* logo */
.top_body {
width: 100%;
height: 48px;
background-color: #2a445f;
}
.top_logo {
width: 360px;
height: 48px;
background: url('icons/aip_logo.png') 0px 0px no-repeat;
float: left;
}
.top_rightbody {
width: auto;
position:absolute;
top: 8px;
right: 0;
}
.top_menu_user {
float: left;
position: relative;
background: url('icons/user.png') no-repeat;
top: 8px;
padding: 0 15px 3px 20px;
color: #e3e3e3;
}
/*一级一级下来*/
.shortcut_menu {
width: auto;
float: left;
margin-right: 12px;
}
.shortcut_menu ul {
width: auto;
height: 32px;
list-style: none;
}
.shortcut_menu ul li {
height: 32px;
float: left;
display: block;
cursor: pointer;
list-style: none;
padding-right:8px;
}
.shortcut_menu ul li A {
display: block;
height: 32px;
}
/*首页*/
.shortcut_menu li A.button_home {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') 0px 0px no-repeat;
}
/*鼠标放上去后变成下面的白色按钮*/
.shortcut_menu li A.button_home:hover {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') 0px -42px no-repeat;
}
.shortcut_menu li A.button_home:active {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') 0px 0px no-repeat;
}
/*注销*/
.shortcut_menu li A.button_exit {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -42px 0px no-repeat;
}
.shortcut_menu li A.button_exit:hover {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -42px -42px no-repeat;
}
.shortcut_menu li A.button_exit:active {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -42px 0px no-repeat;
}
/*修改密码*/
.shortcut_menu li A.button_password {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -84px 0px no-repeat;
}
.shortcut_menu li A.button_password:hover {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -84px -42px no-repeat;
}
.shortcut_menu li A.button_password:active {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -84px 0px no-repeat;
}
/**/
.shortcut_menu li A.button_help {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -126px 0px no-repeat;
}
.shortcut_menu li A.button_help:hover {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -126px -42px no-repeat;
}
.shortcut_menu li A.button_help:active {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -126px 0px no-repeat;
}
/**/
.shortcut_menu li A.button_faq {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -168px 0px no-repeat;
}
.shortcut_menu li A.button_faq:hover {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -168px -42px no-repeat;
}
.shortcut_menu li A.button_faq:active {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -168px 0px no-repeat;
}
.shortcut_menu li A.button_about {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -210px 0px no-repeat;
}
.shortcut_menu li A.button_about:hover {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -210px -42px no-repeat;
}
.shortcut_menu li A.button_about:active {
width: 32px;
height: 32px;
background: url('icons/menu_icon.png') -210px 0px no-repeat;
}
效果图：