有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跨页图片缩小之后总是在側面不能显示主要部分?哈哈~我来帮你忙~~的更多相关文章

  1. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  2. myeclipse页面编辑框空格、回车符、对齐出现特殊字符

    myeclipse页面编辑框空格.回车符.对齐出现特殊字符 解决办法:window-preferences-general-editors-Text Editors    把show whitespa ...

  3. [转]vnpy乱乱谈 02架构

    vnpy乱乱谈 02架构 转自:http://101.132.65.227/?p=51 听到架构这个词先不要害怕. 其实这部分内容还是挺简单的. 一般而言, 一个交易系统我们可以简单的分成输入, (系 ...

  4. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  5. 本博文将一步步带领你实现抽屉官网的各种功能:包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...

  6. Bugku-CTF之这是一个神奇的登陆框

    Day32 这是一个神奇的登陆框 http://123.206.87.240:9001/sql/ flag格式flag{}  

  7. 动态滑动登陆框-Html+Css+Js

    动态滑动登陆框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  8. Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...

  9. 测试页面,页面里边一次加载50张不同的图片,每张5M以上,查看浏览器的内存使用情况

    测试页面 1.需要你写个测试页面,页面里边一次加载50张不同的图片,每张5M,查看浏览器的内存使用情况 2.可以10张 递增的方式测试 3.图片需要缩放,比如所有图片缩放成600*800的比例 目的 ...

随机推荐

  1. linux 基础 软件的安装 *****

    一软件的安装   原代码与tarball 源代码---->编译------>可执行文件 查看文件类型   file命令    是否是二进制文件 注意如果文件的可执行权限 .c结尾的源文件- ...

  2. 【bzoj4459】[Jsoi2013]丢番图 分解质因数

    题目描述 丢番图是亚历山大时期埃及著名的数学家.他是最早研究整数系数不定方程的数学家之一.为了纪念他,这些方程一般被称作丢番图方程.最著名的丢番图方程之一是x^N+y^n=z^N.费马提出,对于N&g ...

  3. HDU——1393Weird Clock(水题,注意题意)

    Weird Clock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  4. [图论训练]BZOJ 3245: 最快路线【最短路】

    Description 精 明的小R每每开车出行总是喜欢走最快路线,而不是最短路线.很明显,每条道路的限速是小R需要考虑的关键问题.不过有一些限速标志丢失了,于是小R将不知 道能开多快.不过有一个合理 ...

  5. 模型表单ModleForm

    官方文档网址   http://python.usyiyi.cn/documents/django_182/topics/forms/modelforms.html 模型表单的应用场景 如果你正在构建 ...

  6. d3 比例尺

    .domain([, ]) 定义域范围 .range([, ]) 值域范围 var scale = d3.scale.linear() .domain([, ]) .range([, ]); 将100 ...

  7. C语言扩展题

    1.使用cmake来创建c语言工程 2.使用gcc来编译源代码 3.下载redis,并且编译运行redis(注:redis目前是c语言编写的,而且是主要是linux平台,在windows平台编译比较麻 ...

  8. 【BZOJ4945&&UOJ317】游戏(2-sat,拓扑序)

    题意: 思路: 输出方案时有一个优秀的性质可以利用: tarjan缩点之后点所属的分量编号是原图的反的拓扑序 所以只需要在两种方案内找到所属分量编号较小的那个就行了,用来满足(i,i')那个限制 #i ...

  9. 防止点击asp.net的button按钮刷新页面(保留button的外观)

    原文发布时间为:2008-08-06 -- 来源于本人的百度文章 [由搬家工具导入] Button btn=new Button(); 1、如果用 btn.Enabled=false;是可以防止刷新的 ...

  10. grunt 入门 应用grunt对代码进行压缩

    1.什么是grunt grunt的官方解释是:javascript世界的构建工具. 为何要构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.li ...