网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.写给喜欢用DreamWeaver编写CSS人.
.如何让某个页面使用特定的CSS.
.CSS设计网页时的一些常用规范.
.CSS语法手册(六)分类属性 .
.利用CSS控制打印.
.CSS特点及加入网页的四种方法.
.CSS+DIV表格背景透明,内容不透明.
.用CSS设计高用户体验的web文字大.
.一个针对IE7的CSS Hack.
.设计需知:CSS布局的意义与副作用.
.用CSS使图片自适应显示宽度.
.用CSS实现圆角框框.
.CSS选择器的优先级.
.css 背景图片的定位问题.
.内联CSS的background-image属性图.
.利用相对定位及偏移量做精美输入.
.点击按钮来改变该页面调用的css文.
.css层固定位置练习.
.CSS的“弹出式”图像浏览器.
.CSS在表格边框上的美学应用.

圆角自适应宽度按钮的css实现

发表日期:2008-10-1


有时候我们需要一个链接看上去像按钮,所以就需要用到block属性,如果要几个按钮并排或者需要和其他文字混排的时候,inline-block就可以很好的解决这个问题。
只是不是所有人都响应了Mozilla的号召把Firefox升级到了3.0。遗憾的是,Firefox2不支持这个属性。网上查了一下,似乎有很多种建议方案,但是只有一个叫-moz-inline-stack的属性可以作为替代方案。
已测试通过的浏览器:IE6, IE7, FF2, FF3。
XHTML:

<a class="rbutton" href="###"><span>Insert</span></a>CSS:

/*======== AUTHOR: Jimbor Chu
===========================*/
a.rbutton, a.rbutton:visited
{
background:url(images/bg_button_left.gif) left top no-repeat;
height: 23px;
line-height: 20px;
text-decoration: none;
color: #fff;
display: inline-block;
display: -moz-inline-stack;
padding-left: 10px;
vertical-align: middle;
font-size: 14px;
}
a.rbutton:hover
{
background-image:url(images/bg_button_left_hover.gif);
color: #fff;
}
a.rbutton span
{
background: url(images/bg_button_right.gif) right top no-repeat;
height: 23px;
line-height: 20px;
padding-right: 10px;
cursor: pointer;
display: -moz-inline-stack;
display: inline-block;
}
a.rbutton:hover span
{
background-image:url(images/bg_button_right_hover.gif);
}

上一篇:关于CSS属性display:none和visible:hidden的区别 人气:1080
下一篇:Css中的filter常用滤镜属性及语句大全 人气:1182
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐