-1

我有 html 页面、背景图像和按钮,当我调整浏览器窗口的大小时,背景适合它但按钮不适合。我想通过改变屏幕或浏览器窗口来调整按钮的大小,你能帮我吗?谢谢大家。

索引.html

    <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post</title>
</head>

<body>
<div>
<table cellspacing="0"  cellpadding="0">
<tr>
<td>
<img id="bgimage" src="heroes.jpg"/>
<div id="content">
<input type="submit" value="Click" class="butt" onclick="dosomething();"/>
</div>
</td>
</tr>
</table>
</div>
<style>
body,html{margin:0;padding:0; height:100% width:100%}
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;}

.butt {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #3c4fd9;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    float: left;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}

.butt:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
.butt:active {
    position:relative;
    top:1px;
}
.butt{

    position: fixed;
    top: 40%;
    left: 39%;
    z-index: 1;


}

/*#content{position:absolute;left:-39%; top:-40%; z-index:70; height:100%; width:100%;}*/

</style>

<script type="text/javascript">
//$(window).resize(function() {
  //$(window).height(); 
  //$(window).width(); 
  //});
//get dimensions 
//var height = $(window).height();
//var width = $(window).width();
//refresh on resize
//$(window).resize(function() {
//$("#butt").css("height", "20px");
//$("#butt").css("width", "20px");
//});

</script>
</body>
</html>

样式.css

html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
<!--[if IE 6]>

html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}


<![endif]-->

http://i077.radikal.ru/1306/59/34317431d5ad.jpg图片

4

3 回答 3

1

以百分比形式给出按钮宽度。

于 2013-06-19T10:55:28.813 回答
0

使用相对度量(例如百分比)来指定您的宽度,而不是像像素这样的固定值。

于 2013-06-19T10:53:21.080 回答
0

如果在调整页面大小时更改了基本字体大小,则以百分比设置填充,并且可能以百分比设置字体大小

于 2013-06-19T11:00:52.760 回答