`
uule
  • 浏览: 6348652 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

错位展示top按钮组

    博客分类:
  • CSS
 
阅读更多

右侧的按钮可以动态展示,即可添加和去掉。

原理:使用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;
}

 

 

效果图:



 

 

 

 

  • 大小: 13.5 KB
  • 大小: 6.4 KB
  • 大小: 6.4 KB
  • 大小: 3.1 KB
  • top.rar (288.4 KB)
  • 下载次数: 1
分享到:
评论

相关推荐

    ZeroClipboard flash剪贴板插件修复在弹出框中错位问题

    1. CSS调整:确保ZeroClipboard的div元素(通常称为“clipboard”)与需要复制的按钮或其他元素正确对齐。可以使用`position: absolute`,`top`,`left`等属性进行精确定位。 2. Flash对象大小:确认Flash对象的...

    jquery实现带按钮的轮播效果-兼容所有主流浏览器

    在网页设计中,轮播效果是一种常见的展示多张图片或内容的方式,它可以在有限的空间内循环播放一组元素,常用于网站的首页或者产品展示区域。本教程将介绍如何使用jQuery来实现一个兼容所有主流浏览器的带按钮的轮播...

    VB界面上控件自动调整

    Anchor属性可以设置为一组边(Top, Bottom, Left, Right),表示窗体相应边缘移动时,控件会随之调整。例如,如果一个按钮的Anchor属性设置为Top和Left,那么当窗体向上或向左移动时,按钮将保持与窗体顶部和左侧的...

    Delphi自动根据窗体大小缩放控件

    例如,如果一个按钮的Anchor设置为Top和Right,那么在窗体宽度增加时,按钮将向右移动并保持其顶部距离不变;宽度减小时,按钮会向左移动。 2. **Docking**:对于多个控件需要紧密排列的情况,可以使用Docking功能...

    基于 jquery 实现的一个焦点图,来自威锋网.rar

    在网页设计中,焦点图是一种常见的展示方式,它可以用来展示一组图片或内容,通过自动轮播和手动切换来吸引用户的注意力。本项目是基于jQuery实现的一个焦点图,来源于威锋网,它允许添加多张图片并附带文字介绍,但...

    alv超全总结

    - **输入时的小数位处理**:解决数据输入过程中可能出现的小数位错位问题。 - **数据类型指定**:明确数据类型,确保数据准确性和一致性。 - **小说位数控制**:对于特定数据类型,如货币,控制显示的位数。 ##### ...

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    复制代码代码如下: &lt;ul&gt; &lt;li&gt;&lt;a&gt;ss&lt;/a&gt;&lt;a&gt;dd&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;ss&lt;/a&gt;&lt;a&gt;dd&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; 情景如上: 这次的情况与上次不同,上次设置浮动的元素没有设置...将margin-top写css hack适应IE7,对其赋负的值,慢慢调整

    解决Layui数据表格中checkbox位置不居中的方法

    首先需要了解的是,Layui是一个基于jQuery的前端UI框架,它提供了丰富的界面组件,如表格、弹窗、按钮等,这些组件通过引入相应的CSS和JavaScript文件来使用。在Layui中,表格组件提供了默认的样式和功能,其中就...

    返回顶部-crx插件

    在没个页面加上返回顶部按钮Back to TopAdd a back to top button on every page参考了ygtyugh的Back to Top for Firefox,非常感谢。安装后在窗口右侧会有灰色箭头,点击即可回到顶部现有功能: 1.平滑滚动,在0.5...

    百度地图开发java源码-TBShoppingCart:TBS购物车

    主布局就是一个ExpandableListView,然后top的title显示购物车的商品数量,当删除某个商品需动态更新,右上角编辑按钮改变地步遮罩层的布局并且执行相关的操作,bottom是一个遮罩层编辑时显示删除不编辑时可以去结算...

    Foobar2000.AERO效果播放器

    - 基于新版Panel Splitter插件,修正了左上角小三角按钮点击后消失的刷新bug,以及调整窗口尺寸后切换菜单显隐造成的左侧面板顶部背景错位的bug。 - 修正了在显示媒体库的情况下切换菜单栏显隐造成Albumlist面板刷新...

    artDialog_Demo

    10、修复Chrome特定情况下出现的iframe错位问题 11、修正2.0.8版本后锁屏不兼容Safari的问题 12、修复Firefox调大对话框拖帧的现象 13、修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题 14...

    Dreamweaver之DIV+CSS的使用技巧

    **问题描述**:由于浮动元素可能导致页面布局错位。 **解决方案**:可以使用`clear:both`来清除浮动的影响。例如: ```css div { clear: both; } ``` 这样可以确保后续元素不会被之前的浮动元素所影响,保持正常...

    MSSQL Server 管理器 V1.0.0.138

    3. 拖动语句编辑时,字体错位的问题 4. TOP查询时,进度不正确 5. 关联查询行数错误的问题 6. 数据库选项的排序问题 7. 临时记录的打开按钮位置 新增功能: 1. 界面大量调整把所有右击出来的菜单都显示在对应的功能...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...

    ExtAspNet_v2.3.2_dll

    ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...

Global site tag (gtag.js) - Google Analytics