右侧的按钮可以动态展示,即可添加和去掉。
原理:使用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; }
效果图:
相关推荐
1. CSS调整:确保ZeroClipboard的div元素(通常称为“clipboard”)与需要复制的按钮或其他元素正确对齐。可以使用`position: absolute`,`top`,`left`等属性进行精确定位。 2. Flash对象大小:确认Flash对象的...
在网页设计中,轮播效果是一种常见的展示多张图片或内容的方式,它可以在有限的空间内循环播放一组元素,常用于网站的首页或者产品展示区域。本教程将介绍如何使用jQuery来实现一个兼容所有主流浏览器的带按钮的轮播...
Anchor属性可以设置为一组边(Top, Bottom, Left, Right),表示窗体相应边缘移动时,控件会随之调整。例如,如果一个按钮的Anchor属性设置为Top和Left,那么当窗体向上或向左移动时,按钮将保持与窗体顶部和左侧的...
例如,如果一个按钮的Anchor设置为Top和Right,那么在窗体宽度增加时,按钮将向右移动并保持其顶部距离不变;宽度减小时,按钮会向左移动。 2. **Docking**:对于多个控件需要紧密排列的情况,可以使用Docking功能...
在网页设计中,焦点图是一种常见的展示方式,它可以用来展示一组图片或内容,通过自动轮播和手动切换来吸引用户的注意力。本项目是基于jQuery实现的一个焦点图,来源于威锋网,它允许添加多张图片并附带文字介绍,但...
- **输入时的小数位处理**:解决数据输入过程中可能出现的小数位错位问题。 - **数据类型指定**:明确数据类型,确保数据准确性和一致性。 - **小说位数控制**:对于特定数据类型,如货币,控制显示的位数。 ##### ...
复制代码代码如下: <ul> <li><a>ss</a><a>dd</a></li> <li><a>ss</a><a>dd</a></li> </ul> 情景如上: 这次的情况与上次不同,上次设置浮动的元素没有设置...将margin-top写css hack适应IE7,对其赋负的值,慢慢调整
首先需要了解的是,Layui是一个基于jQuery的前端UI框架,它提供了丰富的界面组件,如表格、弹窗、按钮等,这些组件通过引入相应的CSS和JavaScript文件来使用。在Layui中,表格组件提供了默认的样式和功能,其中就...
在没个页面加上返回顶部按钮Back to TopAdd a back to top button on every page参考了ygtyugh的Back to Top for Firefox,非常感谢。安装后在窗口右侧会有灰色箭头,点击即可回到顶部现有功能: 1.平滑滚动,在0.5...
主布局就是一个ExpandableListView,然后top的title显示购物车的商品数量,当删除某个商品需动态更新,右上角编辑按钮改变地步遮罩层的布局并且执行相关的操作,bottom是一个遮罩层编辑时显示删除不编辑时可以去结算...
- 基于新版Panel Splitter插件,修正了左上角小三角按钮点击后消失的刷新bug,以及调整窗口尺寸后切换菜单显隐造成的左侧面板顶部背景错位的bug。 - 修正了在显示媒体库的情况下切换菜单栏显隐造成Albumlist面板刷新...
10、修复Chrome特定情况下出现的iframe错位问题 11、修正2.0.8版本后锁屏不兼容Safari的问题 12、修复Firefox调大对话框拖帧的现象 13、修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题 14...
**问题描述**:由于浮动元素可能导致页面布局错位。 **解决方案**:可以使用`clear:both`来清除浮动的影响。例如: ```css div { clear: both; } ``` 这样可以确保后续元素不会被之前的浮动元素所影响,保持正常...
3. 拖动语句编辑时,字体错位的问题 4. TOP查询时,进度不正确 5. 关联查询行数错误的问题 6. 数据库选项的排序问题 7. 临时记录的打开按钮位置 新增功能: 1. 界面大量调整把所有右击出来的菜单都显示在对应的功能...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...