当前位置:  首页  >  前端开发  >  设计思想

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

页面大小变化内容排布banner图片排布登陆框和banner背景混合排布


有banner背景图片和登陆框的html、css排布


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

盒子的排列应该是这样的:

 

               

          



对应的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;
}

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有