原理：利用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>
效果：
在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。使用js和css将图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>css+js完美控制图片大小</title>
<script type="text/javascript" language="JavaScript">
<!--
var flag=false
function DrawImage(ImgD){
var image=new Image()
image.src=ImgD.src
if(image.width>0 &&image.height>0){
flag=true
if(image.width/image.height>= 400/400){
if(image.width>400){
ImgD.width=400
ImgD.height=(image.height*400)/image.width
}else{
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"x"+image.height
}
else{
if(image.height>400){
ImgD.height=400
ImgD.width=(image.width*400)/image.height
}else{
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"x"+image.height
}
}
}
//-->
</script>
<style type="text/css">
<!--
* {
margin:0
padding:0
}
li {
list-style:none
}
img {
border:0
}
.group_head {
width:400px
height:400px
line-height:400px
border:1px solid #ccc
overflow:hidden
position:relative
text-align:center
float:left
margin-right:10px
}
.group_head p {
position:static
+position:absolute
top:50%
vertical-align:middle
}
.group_head img {
position:static
+position:relative
top:-50%left:-50%
vertical-align:middle
}
-->
</style>
</head>
<body>
<ul class="jobGroup">
<li><a href="../group/index.php?group_id=10011"><div class="group_head"><p><img width="400" height="400" src=" http://www.baidu.com/img/baidu_logo.gif" onload="DrawImage(this)"/></p></div></a>
</li>
</ul>
</body>
</html> PS.本文来自： http://www.code-123.com/html/2009814191245580.html
