div+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自适应宽度圆角按钮 @5key.net</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>

演示：

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(/upload/20071122231110605.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(/upload/20071122231110605.gif) left -30px;height:30px;}
a span{background:url(/upload/20071122231110605.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(/upload/20071122231110605.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }

CSS自适应宽度圆角按钮

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

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

赞 (0)

相关推荐

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • 左侧固定宽度，右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修改). 于是自己写了个简单的左右两列的布局,没用到什么hack,很简单,只是练手用用. css代码:left和right都贴住左侧.设置left在right上面(z-index):在right内加个放内容的层(content):设置content距离right的左侧为200px,即刚巧等于left的

  • iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过

    废话不多说,贴上代码,也算是自己的一个代码存储. 复制代码 代码如下: var temp_iframe var content = document.getElementById('right'); //id为 right的DOM容器中,进行创建iframe和宽高自适应 var c = 0; function append(filename) { var the_iframe = "helpfile" + c; temp_iframe = document.createElement(

  • EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

    tabs代码如下: 复制代码 代码如下: <div id="tabs" class="easyui-tabs"> <div title="tabs1"> tabs1 </div> <div title="tabs2"> tabs2 </div> </div> 如果id="tabs"的div未设置宽度和高度,easyUI默认的宽度和高度是

  • input 宽度自适应

    无标题文档 function checkLength(which) { var maxchar=100; var oTextCount = document.getElementById("char"); iCount = which.value.replace(/[^\u0000-\u00ff]/g,"aa").length; if(iCount"+ iCount+""; which.style.border = '1px dotte

  • javascript自适应宽度的瀑布流实现思路

    javascript自适应宽度的瀑布流实现思路

    这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和

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

    div+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.

  • JS+CSS实现自适应选项卡宽度的圆角滑动门效果

    JS+CSS实现自适应选项卡宽度的圆角滑动门效果

    本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造自适应宽度的圆角滑动门,这里的圆角主要是靠一张背景图片去实现,所指的宽度是滑动门上的导航的宽度,不管文字有多少,它都会一直顺着下去,不会被内容所撑破,兼容性方面,兼容IE6/7/8,火狐未试,应该也兼容 . 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-codes/ 具体代

  • CSS网页布局入门教程2：一列自适应宽度

    CSS网页布局入门教程2：一列自适应宽度

    自适应布局是网页设计中常见的布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度和高度值,是一种非常灵活的布局形式,良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果.实际上div默认状态的占据整行的空间,便是宽度为100%的自适应布局的表现形式,一列自适应布局需要我们做的工作也非常简单,只需要将宽度由固定值改为百分比值的形式即可. 复制代码 代码如下: #layout {      border: 2px solid #A9C9E2;      background-co

  • iOS 中根据屏幕宽度自适应分布按钮的实例代码

    iOS 中根据屏幕宽度自适应分布按钮的实例代码

    下载demo链接:https://github.com/MinLee6/buttonShow.git 屏幕摆放的控件有两种方式,一种根据具体内容变化,一种根据屏幕宽度变化. 下面我分别将两个方式,用代码的方式呈现: 1:根据具体内容变化 // // StyleOneViewController.m // buttonShow // // Created by limin on 15/06/15. // Copyright © 2015年 信诺汇通信息科技(北京)有限公司. All rights

  • 研究了一下div+css的高度自适应问题

    div+css还是比较难搞的,要实现上下两个div高度自适应感觉麻烦,查了下资料只找到上下高度都是百份比的是可以的,我要实现上面的div是具体像素高度,下面是自适应剩余的百份比.自己搞了一下还要用上js,不知道是不是很笨,有好的方法请大家帖出来. <body style="height:100%; margin:0px; width:100%;"> <div id="ddii22″ style=" background-color:#ffffff;

  • DIV+CSS网页制作布局技巧学习

    CSS布局常用的方法:float:none|left|right取值:none: 默认值.对象不飘浮left: 文本流向对象的右边right: 文本流向对象的左边 它是怎样工作的,看个一行两列的例子xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class=&

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • div+CSS 兼容小摘

    区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

  • DIV+CSS布局教程大全与pdf电子书 下载

    div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

  • DIV+CSS经常用到的属性、参数及说明

    通用类 overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 !important 指定样式规则的应用优先权 文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px:行高(可用150%

随机推荐