原理:利用a标签和i标签各自一个背景组合成为按钮,达到自适应。
复制代码
代码如下:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<style
type="text/css">
.btn
a{text-decoration:none}
.btn{display:
inline-block
background:
url(s_btn.png)
no-repeat
0
0
height:
22px
line-height:
22px
color:
#666
vertical-align:top}
.btn
i{display:blockfont-style:
normal
font-size:
12px
padding:
0
10px
background:url(s_btn.png)
no-repeat
right
-22px
}
.btn:hover{text-decoration:
nonecolor:#4c8136background-position:
0
-44px}
.btn:hover
i{background-position:
right
-66px}
.btn:active{background-position:
0
-88px}
.btn:active
i{background-position:
right
-110px}
.btn_disabled,
.btn_disabled:hover{background:
url(../img/s_btn.png)
no-repeat
0
-132pxcursor:
default}
.btn_disabled
i,
.btn_disabled:hover
i,
.s_btn_disabled:active
i{background-position:
right
-154pxcolor:#999}
</style>
</head>
<body>
<a
href="#"
class="btn">
<i>这是按钮</i>
</a>
<a
href="#"
class="btn">
<i>按钮</i>
</a>
</body>
</html>
效果:
方法一:text-decoration-skip指定覆盖关系text-decoration-skip是与text-decoration相关的CSS3属性。效果很不错,不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性,且仅仅支持skip(默认值)和none两个值。此方法是最原生的,但是由于兼容性问题,目前还不太合适。方法二:使用border-bottom属性模拟我觉得这是一个不错的想法,CSS博大精深,哈哈。^.^内联元素虽然不支持垂直方向的margin属性,但是支持垂直方向的padding属性和border属性,并且,对原来的布局定位等没有任何影响。因此,配合padding,我们就可以很有效地调节下边框和文字下边缘的距离,实现我们最想要的的效果。(张老师的原话)代码如下:a {text-decoration: noneborder-bottom: 1px solid}这样写的有点在于border-bottom还有dashed属性,我们还可以创造虚线下划线 :Pa {text-decoration: noneborder-bottom: 1px dashed}效果图:金玉全王方法三:使用box-shadow属性模拟使用box-shadow的想法也是很棒的,其实动动脑子,CSS还有好多玩法。(●'◡'●)直接上代码~a {text-decoration: nonebox-shadow: 0 1px}这里box-shadow用了两个值,在这里解释一下:box-shadow: h-shadow v-shadow blur spread color inset此处的两个值分别是 h-shadow 和 v-shadow。h-shadow:水平阴影的位置。允许负值。v-shadow:垂直阴影的位置。允许负值。垂直阴影为1px于是就有了下划线的样子。相比border-bottom属性,box-shadow的优势在于,即使我们把内联元素设置成display:inline-block,生成的下划线也不会对垂直对齐或者布局产生影响,但,如果是border-bottom,会增加元素的尺寸,可能就会影响元素的排列。但是,box-shadow也有不足,一是兼容性,IE9+才支持,二是只能实线,不能虚线。试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置,设置他们的最大宽度(width)为640px,最小宽度为320px,此类设置适用于手机移动端;要实现屏幕自适应,那么就要用百分比来实现;所以设置width整体100%;img宽度100%;这样实现图片的自由缩放;
HTML代码如下:且仔细看清每一行的注释:
2、看下实现的效果如何:文字大小是如何变化的;
变化浏览器后效果:如图
自定义缩放其实主要就是判断浏览器的宽度,高度需要的话可以设置,还有设置内部区域块儿的宽度以及图片展示用百分比来控制;