CSS设计圆角自适应按钮教程

2016-02-19 13:36 24 1 收藏

get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是CSS设计圆角自适应按钮教程，一起来学习了解下吧！

【 tulaoshi.com - Web开发】

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
head
title/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style type="text/css"
!--
*{padding:0px;margin:0px;}
body{font-size:12px;}
h2{margin:50px;}
a{text-decoration:none;background:url(http://www.w3css.com/1.jpg) 0 0;float:left;color:#fff;margin:0px 60px 0px 0px; cursor:pointer;}
a span{ position:relative;background: url(http://www.w3css.com/1.jpg) top right;line-height: 25px;margin:0 -30px 0 30px; padding-right:30px;float:left;}
a:hover{background: url(http://www.w3css.com/1.jpg) left -25px;height:25px;float:left;margin:0px 60px 0px 0px;}
a:hover span{background: url(http://www.w3css.com/1.jpg) right -25px;line-height: 25px;margin:0 -30px 0 30px; padding-right:30px;float:left;color:#fff;}
--
/style
/head
body
h2自适应宽度按钮/h2
a href="" title="nogo"span自适应/span/a
a href="" title="nogo"span自适应宽度/span/a
a href="" title="nogo"span自适应宽度,对吧!/span/a
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1604734.html

上一篇： Mac系统Shift键使用技巧三则
下一篇：教程：在J2ME中基于UDP协议编程

看过《CSS设计圆角自适应按钮教程》的人还看了以下文章更多>>

CSS实例教程:图片宽高自适应固定边框

标签： Web开发

以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。关键在于：max-width:780px;以及下面那行。固定像素适应: 以下是引用片段： style type="text/css" !-- body { font-size: 12px; text-align: center; margin: 0...

使TStringGrid自适应宽度

标签：编程语言网络编程

procedure AutoFitable(AGrids: TStringGrid); //传入TStringGrid对像即可, 2004/10/28,CoolSlob var I, J: Integer; MaxLenRow: Integer; CurRowLen: Integer; begin inherited; for J := 0 to AGrids.ColCount - 1 do begin MaxLenRo...

CSS布局实例:上中下三行,中间自适应

标签： Web开发

上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。 firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。最外层#box { display:table; }，高度100%，其子层#header/#...

CSS三行三列自适应高度div布局

标签： Web开发

此代码欢迎各位转摘；网上有好多，但没有真正的自适应高度，看到一个自适应宽度的，还可以，没有我们长用的控制一定宽度的。测试通过：IE5、IE5.5、IE6、IE7、FF其他的没有测试，如果有问题在下面留言。说下主要的CSS在此页面的作用，:overflow:hidden;强制contain自适应高度(看背景)，clear:both这个就不用说啦！ [html] style type="text/c...

DIV+CSS：网页一行两列背景自适应

标签： Web开发

网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样；右边内容高于左边时，左边背景色...

查看更多精彩>>