页面登陆框老是乱乱的?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;
}
目的:无论页面大小,背景图片都要居中(显示图片中间主要内容,而不是側面的一些东西),登陆框基本能在页面内显示。
盒子的排列应该是这种:
<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;
}
相关文章推荐
- 页面登陆框老是乱乱的?banner跨页图片缩小之后总是在侧面不能显示主要部分?哈哈~我来帮你忙~~
- Form认证导致登陆页面的样式无效和图片不能显示的原因
- Form认证导致登陆页面的样式无效和图片不能显示的原因
- jsp图片上传到数据库里面之后,不能直接在页面上显示,而是提示下载
- Form认证导致登陆页面的样式无效和图片不能显示的原因
- 第一天-解决了轮播图片不能显示和部分文件不能下载两个问题
- Asp.net页面弹出框时,底部背景图片部分不显示
- 从库中读图片显示到页面上的主要源码
- 解决ImageView部分图片不能显示的问题(图片已经损坏)
- 记一次帮朋友写的网页。主要是显示部分图片,简单的使用定时器,主要复习
- 解决Myeclipse中导入epf文件之后xml及jsp等各种页面中的部分显示异常问题
- 图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码
- ckplayer播放器设置默认封面时部分浏览器不能正常显示封面图片问题的处理
- 进行身份验证登录页面图片不能正常显示
- 实现xlistview+xutils展示数据之后点击item跳转页面显示图片缩放和放大
- ajax 页面部分先显示图片后出数据
- jsp页面不能显示图片问题
- 如何实现广告图片总是显示在页面上方,并且随滚动条同步移动?
- JSP页面登录Imail后不能显示图片
- Banner图片都是全屏宽度在不同分辨率下都是显示图片的中间部分