全文预览已结束
下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
CSS滑动门技术！2011年09月07日 17:45网站的导航条对网站来说举足轻重，导航条的风格各式各样，纯文本的导航栏比起图像导航栏更具有适用性和快速载入的特点，但在硬件和软件飞速进步以及个性彰显的今天，普通简单的导航条已经显得捉襟见肘了，这样的导航设计，也是没有什么意义的！在CSS中，一个称之为“滑动门”技术被广泛采用到导航条设计中，它的特点在于：1 实用性，能够根据导航条菜单文本长度自动调节宽度；2 简洁性，它可以用简单背景小图来实现炫彩的导航条风格，大大减少网页载入内容。3 适用性，可以多层套用，实现双层滑动门炫彩风格，也可以实现网页其他模块的一些特殊效果。图 滑动门导航条效果实现这个导航的素材为 两个小图片！(under.gif) 左边图片是导航条底部图片，将其横向平铺，就实现了底部背景了！(hover.gif) 左边图片是鼠标划过菜单显示图，在上面滑动门导航条图片里，就是用CSS滑动门技术实现的！实现方法：首先设置导航条背景，将under.gif图片，横向平铺至600px！其次设置滑动门的左门，代码如下：#menu ul li a:hover color:#fff; /设置背景 黑色background: url(hover.gif); /设置背景 图片（此图周边是透明的） /最终的效果使得 背景图片周边透出黑色预览效果：此时当鼠标划过菜单时，玻璃质感的背景已经出现，但是右边被切断了，没有出现hover.gif图片的右边，此时须把菜单设置文字加粗标记，将其作为“右门”来实现，这样可以为它的背景设置一个背景图像，同样用到hover.gif图片，当左右两个门重叠在一起，便实现了滑动门效果了！第三:对b标记的属性进行设置，将其设置为块级元素：#menu ul li a bdisplay:block; /设置为块元素padding:0 14px 0 0; /设置右边距为14像素设置鼠标经过时b的标记样式！#menu ul li a:hover bcolor:#fff; /设置背景 黑色background: url(hover.gif) no-repeat right top; /设置背景图片，右对齐这样便实现了滑动门导航条了，它会自动调节滑门左右两边的距离，根据菜单文本的长度自适应，真正做到了节省资源的目的。此外可以实现更为复杂的滑动门导航效果，如双层滑动门导航效果，它的实现方法差不多，只不是在原来的基础上，把背景图标也实现了滑动门效果！本例中，只使用了一个背景图片，三个大小相同不同的颜色放在一起，根据对应的菜单状态选择图片中不同的部分，产生出完美的效果，它网站管理更简单，因为不用很多的图片来实现，让浏览器打开网页更迅速，同
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论