注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

最简单的css滑动门技术  

2009-07-22 16:54:48|  分类: DIV+CSS+JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://www.javaeye.com/topic/293626

声明:(通过IE,FireFox测试)

(1)所谓的 滑动门,可以这样理解,菜单的 背景图(圆角,直角,其它等)会根据文字的多少而自动变长(变短),这好象一个可滑动的门一样

这样的背景图一般由两部分组成(左图和右图),如下图,

这是左边的背景图

这是右边的背景图

一般,都有其中之一在大,所谓大,就是说,你的导航链接内文字的最长长度,(还有一种方法,可以用无限长的文字,需要三张背景图,左右边框各一张,中间图一张,你们可以想想怎样来实现)

 

(2)

A:由于我们只用css来实现,且代码要尽可能的少,那么ul和li标签就是我们的首先了,

B:ui有默认的标属性,我们要用margin:0px;padding:0px;list-style:none;来通用它

C:li默认是竖着排列的,我们要用display:inline;来让它在单行中显示

D:a默认是 行内元素,我们要设置它float:left来让它靠左边

E:span默认也是 行内元素,我们常用它来调菜单的高度,所以要设置display:block;

F:由于span在a标签内,如果span高度被拉高了,那么a中的背景图也会自动拉高

G:由于span背景图在a背景图内,如果不设置a标签的padding-left:4px(它恰好为左背景图的宽);左边(a标签的)的背景图会被右边(span标签内的)的背景图完全覆盖

H:图片的定位是由

background:url(tableft.gif) left top no-repeat;和

background:url(tableft.gif) left -42px no-repeat;

来实现的,一定要设置no-repeat,-42为图片总高的一半

 

实现代码和效果代码如下:

----------------------------------------------------------------------------------------------------------------------------------

DHTML:

<div id="menu">    
 
  <ul>
   <li><a href="index.html"><span>Home</span></a></li>
   <li><a href="index.html"><span>News</span></a></li>
   <li><a href="index.html"><span>Downloads</span></a></li>
   <li><a href="index.html"><span>Services</span></a></li>
   <li><a href="index.html"><span>Support</span></a></li>
   <li><a href="index.html"><span>About</span></a></li>  
  </ul> 
             
 </div>

CSS:

a{ text-decoration:none; color:#FFFFFF;}

#menu ul{ margin:0px; padding:0px; list-style:none;}

#menu li{ display:inline;}

#menu a{ float:left; background:url(tableft.gif) left top no-repeat; padding-left:4px;}

#menu span{ display:block; background:url(tabright.gif) right top no-repeat; padding:4px 10px 4px 6px;}

#menu a:hover{ background:url(tableft.gif) left -42px no-repeat;}

#menu a:hover span{ background:url(tabright.gif) right -42px no-repeat;}

----------------------------------------------------------------------------------------------------------------------------------

 

Fighting   之 克己制胜!!


  评论这张
 
阅读(578)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017