页面登陆框老是乱乱的?banner跨页图片缩小之后总是在側面不能显示主要部分?哈哈~我来帮你忙~~
有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;
}
页面登陆框老是乱乱的?banner跨页图片缩小之后总是在側面不能显示主要部分?哈哈~我来帮你忙~~的更多相关文章
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
- myeclipse页面编辑框空格、回车符、对齐出现特殊字符
myeclipse页面编辑框空格.回车符.对齐出现特殊字符 解决办法:window-preferences-general-editors-Text Editors 把show whitespa ...
- [转]vnpy乱乱谈 02架构
vnpy乱乱谈 02架构 转自:http://101.132.65.227/?p=51 听到架构这个词先不要害怕. 其实这部分内容还是挺简单的. 一般而言, 一个交易系统我们可以简单的分成输入, (系 ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- 本博文将一步步带领你实现抽屉官网的各种功能:包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
- Bugku-CTF之这是一个神奇的登陆框
Day32 这是一个神奇的登陆框 http://123.206.87.240:9001/sql/ flag格式flag{}
- 动态滑动登陆框-Html+Css+Js
动态滑动登陆框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)
前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...
- 测试页面,页面里边一次加载50张不同的图片,每张5M以上,查看浏览器的内存使用情况
测试页面 1.需要你写个测试页面,页面里边一次加载50张不同的图片,每张5M,查看浏览器的内存使用情况 2.可以10张 递增的方式测试 3.图片需要缩放,比如所有图片缩放成600*800的比例 目的 ...
随机推荐
- day03_12 缩进介绍
python比较变态,必须缩进,而C可以不缩进,世界上只有python这门语言要求必须缩进 tab键是缩进,shift+tab往左移动 SyntaxError:invalid syntax 语法错误 ...
- Python 开启线程的2中方式,线程VS进程(守护线程、互斥锁)
知识点一: 进程:资源单位 线程:才是CPU的执行单位 进程的运行: 开一个进程就意味着开一个内存空间,存数据用,产生的数据往里面丢 线程的运行: 代码的运行过程就相当于运行了一个线程 辅助理解:一座 ...
- javascript学习笔记-数据类型
一 数据类型 基本类型:undefined,null,boolean,number,string 保存在栈内存中 占用空间固定 变量直接从栈内存中存取的是该值 引用类型: ...
- spring scope 属性的取值
Spring 容器是通过单例模式创建 Bean 对象的,也就是说,默认情况下,通过调用 ac.getBean("mybean")方法获得的对象都是同一个 mybean 对象 使用单 ...
- hihoCoder #1072 辅导
题意 $\DeclareMathOperator{\lcm}{lcm}$选 $k$ ($k\le 10$) 个 $1$ 到 $n$($n\le 10^9$)之间的整数(可以相同),使得 $\lcm(a ...
- [luoguP2336] [SCOI2012]喵星球上的点名(后缀数组 + 暴力)
传送门 原本的想法是把所有的串不管是名字还是询问都连起来,记录一下询问串在sa数组中的位置 对于每个询问可以在sa数组中二分出左右边界,第一问用莫队,第二问差分乱搞. 结果发现我差分的思路想错了,先写 ...
- OpenMP 并行编程
OpenMP 并行编程 最近开始学习并行编程,目的是为了提高图像处理的运行速度,用的是VS2012自带的OpenMP. 如何让自己的编译器支持OpenMP: 1) 点击 项目属性页 2)点击 配置 3 ...
- GC overhead limit exceeded,tomcat修改jvm内存
tomcat修改jvm内存 内存大小:-Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxNewSize=256m -XX:MaxPermSize=512m -Dja ...
- Mondriaan's Dream(poj 2411)
题意:在n*m的方格里铺1*2的骨牌,有多少种方案 /* 第一次做插头DP,感觉和状压差不多. 这道题是利用上一行的状态来更新下一行的状态. 1代表上一行这个位置填了一个竖的(即本行可以填): 0代表 ...
- macOS(Sierra 10.12)上Android源码(AOSP)的下载、编译与导入到Android Studio
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...