您当前的位置:首页 > 网页设计 > Web开发 > 正文

css自定义导航、按钮样式

【字体大小: 2009-04-05 16:08 来源:WEB前端开发 作者:愚人码头 

  在网上看到一个用css自定义“按钮”样式,说是按钮其实是链接,用链接模拟的按钮,这样我们的按钮就可以很丰富了。我们可以用这个来做网站导航,连接,按钮等等。

  不过方式有一个很不好的地方就是<a>标签里套了一个空的<span>,从html语义化的角度来说,这个是不应该的。

  先看看效果吧:


图片1

  一.要使用的图片,如图:


图片2

如果你想修改颜色,可以下载PSD:sliding-door-psd

  二.实现原理,如图: 


图片3 
  1. <li><a href=”#” title=”products”><span></span>WEB前端开发</a></li> 

  一个容器里放一个<a>(链接),<a>(链接)里放<span>,这里的<span>主要是放左边的圆角图片,<a>(链接)是放右边的图片,用来自适应按钮的背景图片,这里提示一点,确保你的图片足够宽,而不被文字撑破。

  三.HTML代码

  1. <ul class=”green”> 
  2.     <li><a href=”#” title=”home” >绿色的按钮</a></li> 
  3.     <li><a href=”#” title=”products”>项目</a></li> 
  4.     <li><a href=”#” title=”blog”>WEB前端开发博客</a></li> 
  5.     <li><a href=”#” title=”contact”>留言板</a></li> 
  6. </ul> 

  这里用了一个<ul>是为了创建一个列表,然后在里面加入就是为了加左边的背景图片;

  1. <ul class=”green”> 
  2.     <li><a href=”#” title=”home” class=”current”><span></span>绿色的按钮</a></li> 
  3.     <li><a href=”#” title=”products”><span></span>项目</a></li> 
  4.     <li><a href=”#” title=”blog”><span></span>WEB前端开发博客</a></li> 
  5.     <li><a href=”#” title=”contact”><span></span>留言板</a></li> 
  6. </ul> 

  第一个按钮用了class=”current”是表示不同形式的呈现按钮。

  四.CSS样式

  1.ul样式:  

  1. ul.green { padding5pxmargin10px 0list-stylenonebackground-color#fffborder-bottom1px solid #e7e7e7floatleftclearleft;} 

  2.li样式:  

  1. ul.green li {floatleft;} 

  3.a样式:  

  1. ul.green li a {floatlefttext-decorationnonecolor#cccpadding4px 15px 0 0margin-right8pxfont900 14px “Arial”, Helveticasans-serif;} 

  4.span样式:  

  1. ul.green li a span { floatleftpadding-right15pxdisplayblockmargin-top-4pxheight24px;} 

  5.hover鼠标记过样式:

  1. ul.green li a:hover { color#576d07backgroundurl(images/green.png) no-repeat top right; }  
  2. ul.green li a:hover span { backgroundurl(images/green.png) no-repeat top left;}  

  6.class=”current”是表示不同形式的呈现按钮:

  1. ul.green li a.current {backgroundurl(images/green.png) no-repeat top right;color#576d07;}  
  2. ul.green li a.current span {backgroundurl(images/green.png) no-repeat top left;}  
  3. ul.green li a.current:hover {backgroundurl(images/blue.png) no-repeat top right;color#0d5f83;}  
  4. ul.green li a.current:hover span {backgroundurl(images/blue.png) no-repeat top left;} 

  查看整个demo:http://www.css88.com/demo/css-sliding/css-sliding-door.html

  查看原文: http://kailoon.com/css-sliding-door-using-only-1-image/

  原文地址: http://www.css88.com/archives/850

    顶一下
    (17)
    77.3%
    踩一下
    (5)
    22.7%
    【责任编辑:绝口不提】 标签: 导航 CSS 按钮 样式
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: