您的位置:首页 > 其它

页面登陆框老是乱乱的?banner跨页图片缩小之后总是在側面不能显示主要部分?哈哈~我来帮你忙~~

2017-07-22 08:59 369 查看
有banner背景图片和登陆框的html、css排布

目的:无论页面大小,背景图片都要居中(显示图片中间主要内容,而不是側面的一些东西),登陆框基本能在页面内显示。

盒子的排列应该是这种:

<div id="index-banner-background"> <!--用来放背景图片以及设置内容-->

<div id="index-logbox"> <!--做一个大盒子,用来盛放登陆框-->

<div id="index-login"> <!--登陆框本身-->

</div>

</div>

</div>

相应的css:

#index-banner-background{

background: url(../images/banner.png) no-repeat top center; /*注意background是能够设置background所有属性的。background-image仅仅能设置背景图链接*/

height: 470px;

}

#index-logbox{

width: 1000px;

height: 385px;

margin: 0px auto;

padding: 35px;

}

#index-login{

width: 360px;

height: 385px;

position: relative; /*绝对定位(position)就是相对于父级框的左上角;相对定位(relative)就是和自己的本来要在的位置左上角比。*/

float: right;

border-radius: 3px;

background-color:#fff;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐