欢迎来到福编程网,本站提供各种互联网专业知识!

div+css实现自适应宽度按钮

发布时间:2007-11-22 作者: 来源:转载
先来看张图片:原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。而你只需要一张图片:ok,看看代码吧。CSS:复制代码代码如下:*{margin:0;padding:0;}body{padding:10px;font-size:12px;}h1{margin:0

先来看张图片:

原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。而你只需要一张图片:

ok,看看代码吧。
CSS:
复制代码 代码如下:
*{margin:0;padding:0;}
body{padding:10px;font-size:12px;}
h1{margin:0;padding:10px0;font-size:14px;font-weight:bold;}
a{background:url(1.gif)left0;color:#fff;text-decoration:none;height:30px;float:left;cursor:hand;margin:05px00;}
a:hover{background:url(1.gif)left-30px;height:30px;}
aspan{background:url(1.gif)right0;padding:7px8px7px0;margin:0008px;float:left;height:16px;}
a:hoverspan{background:url(1.gif)right-30px;color:#000;padding:7px8px7px0;margin:0008px;height:16px;}

HTML:
复制代码 代码如下:

CSS自适应宽度圆角按钮@5key.net


首页
不是首页
他也许是首页
但他一定不是首页
好了,就这样把。别扯了~


演示:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

相关推荐