关于如何使背景图片自适应屏幕的问题,每个论坛上都有许多人在讨论,但是由于大家的思路不同,想要实现的效果具体也不同,所以,光copy别人的方法是行不通的,还是综合别人的经验,自己琢磨比较靠谱~
先说说我遇到的问题吧:
在body元素中定义了一些div块 具体如下(每个标签内的内容省略,仅做必要说明)
<<body>
<div id="page">
<div id="header"> </div>
<div id="content">
<div id="container">
<div class="join">一个大小可变图片 由100x100变为150x150</div>
</div>
<div id="login_form">
一个form
</div>
</div>
</page>
</body>
相关的css属性为:
* {
list-style: none;
font-weight: normal;
vertical-align: baseline;
text-decoration: none;
border: 0;
margin: 0;
outline: none;
padding: 0;
}
#page {
border-color: #105c9a;
background-image:url(../images/page.gif);
background-repeat: repeat-x;
background-color: #025F9A;
}
#header {
width:100%;
height:250px;
}
#content{
padding-top:20px;
min-height:500px;
background-repeat: repeat-x;
}
#login_form{
float: right;
margin-right: 100px;
padding-top:70px;
}
问题1.定义了content的最小高度后,浏览器最下部总有一部分是白色,寻求使其撑满整个屏幕的方法。
解决方法:将page标签去掉,定义body的背景图片以及背景颜色,。。。很怂吧很怂吧。。。我也觉得很怂。。。这就是新手啊。。。不不不 有过一些经验以后发现。。自己连新手都不是 完全是个门外汉~!!
问题2.由于设置了login_form的float属性,所以在伸缩浏览器的时候,元素会跟随右边框浮动,而如果将float值设为left 那么join中的元素一旦变化,login form也会随之浮动,困惑了。。。
解决方法:将join的大小设为固定值,大于其变化过程中的最大值,同样的原理,将content的大小设定为大于其中所有元素宽度之和即可消除浮动问题。
修改后的css为:
body{
background-image:url(../images/page.gif);
background-repeat: repeat-x;
background-color: #025F9A;
}
a:hover{
text-decoration:underline;
color: #FFF;
}
#header {
width:100%;
height:250px;
}
#content{
padding-top:20px;
width: 1200px;
margin-left: 70px;
}
#container{
margin-top:50px;
display: inline;
width: 580px;
height: 270px;
}
#login_form{
padding-top:70px;
padding-left: 50px;
float: left;
z-index:-1;
}
今天的领悟是:要从css的基本属性一个个看起 许多解决方案就藏在属性的定义中,,对我这种菜鸟 尤其如此