CSS自适应宽度圆角按钮
作者:dowhatyouwant 来源:5key.net 发布时间:2007-11-20 11:38:00
标签:圆角,css,自适应
本文介绍的圆角方法很特别,有创意。
昨天群里大家讨论到一个豆瓣上的按钮,下面这个。在这里用到了不同宽度的按钮,但是只是用到了一个图片。
原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok,看看代码吧.
CSS:
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(1.gif) left -30px;height:30px;}
a span{background:url(1.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }
HTML:
<body>
<h1><strong>CSS自适应宽度圆角按钮 asp之家</strong></h1>
<a href="#"><span>首页</span></a>
<a href="#"><span>不是首页</span></a>
<a href="#"><span>他也许是首页</span></a>
<a href="#"><span>但他一定不是首页</span></a>
<a href="#"><span>好了,就这样把。别扯了~</span></a>
</body>
演示地址:
https://www.aspxhome.com/examples/design/css/237320/liquid-css-menu.htm
0
投稿
猜你喜欢
- 自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注,然而唯一能让IE识别那些新元素(如<article>)的途径
- 这是一个给新手学习代码的帖子,包含以下内容:如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷
- ASP中转换unicode编码为GB编码方法:<% function urldecode(encodestr)
- 首先建一个access 数据库,库中有一个URLINDEX表,其中URL和Keywords字段分别添加了索引,如下:URL &nb
- 在使用 SQL Server 的过程中,用户遇到的最多的问题莫过于连接失败了。一般而言,有以下两种连接 SQL Server 的方式,一是利
- 随着网站访问量的加大,每次从数据库读取都是以效率作为代价的,很多用ACCESS作数据库的更会深有体会,静态页加在搜索时,也会被优先考虑。互联
- 由于ajax在跨域的访问上有问题,目前最好的方法是做代理.写了个代理程序和心得为了做ajax的代理,研究了下服务器端的xmlhttp并和客户
- * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * di
- 各位大哥: 在javascript中如何取整?比如: var
- 无聊的人在无聊的时间做无聊的事打发自己,结果在无聊的事情中发现了IE对内联文字解释的一些疑惑。以下问题在FF2中没发现,而我也只
- 译序:这篇文章是可用性大师 Jakob Nielsen 在10年前总结的,到今天仍然受用。通过这个时间跨度,可以得出,可用性话题不是某个时代
- 如IP为192.168.1.111现要截取第二个.之前的值,得到结果192.168,很多网站都只显示前面2个值 &nb
- 我的测试环境是2000sever ie6.0+sp4 MYIE1.31 (成功通过测试)关闭窗口的途径常用4种:1.双击左上角图标2.直接双
- 内容摘要:除了内部性能增强和优化外,IIS6.0版本的 Active Server Pages(ASP)&nb
- onactivate
- 摘要:本文主要就数据库恢复与系统任务的调度,在结合一般性的数据库后台处理的经验上,提出较为实用而新颖的解决方法,拓宽了数据库后台开发的思路。
- 代码如下:---1.平均销售等待时间 ---有一张Sales表,其中有销售日期与顾客两列,现在要求使用一条SQL语句实现计算 --每个顾客的
- '************************************* '读取文件 &
- 前言在php开发过程中,获取文件扩展名是非常常见的需求。比如我们在上传文件的时候,首先需要判断文件类型是否为我们允许上传的类型。这个时候就需
- 以国内最流行ASP为例,我不知道有多少人会在写代码时想到“容错”这个概念,实际上当我遇到这种事时,也是不了了之。为什么呢,想想最初的意思是认