有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. PHP-7.1 源代码学习:字节码生成 之 "$a = 1"

    前言 本文通过分析 "$a=1" 这个 PHP 语句的编译和执行来窥探 php-cli 解释执行逻辑 准备 参考之前的系列文章,在 ubuntu 环境下下载,编译 PHP 源代码 ...

  2. 算法理论——Linear SVM

    问题引入 下面的三个超平面都起到分类的效果,哪个最好? 答案显然是第三个.为什么? 直觉上,如果现在我们有个测试点,非常靠近右下角的那个红叉叉,也就是说这个点的特征与那个红叉叉非常接近,这时候,我们希 ...

  3. [python subprocess学习篇] 调用系统命令

    http://www.jb51.net/article/57208.htm 3).Popen.communicate(input=None):与子进程进行交互.向stdin发送数据,或从stdout和 ...

  4. Educational Codeforces Round 20 B. Distances to Zero

    B. Distances to Zero time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  5. 九度oj 题目1366:栈的压入、弹出序列

    题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈 ...

  6. 【bzoj3526】[Poi2014]Card 线段树区间合并

    题目描述 有n张卡片在桌上一字排开,每张卡片上有两个数,第i张卡片上,正面的数为a[i],反面的数为b[i].现在,有m个熊孩子来破坏你的卡片了!第i个熊孩子会交换c[i]和d[i]两个位置上的卡片. ...

  7. [USACO15FEB]Superbull (最小生成树)

    题目链接 Solution 基本上就是个板子. 因为 \(n\) 很小,只有 \(2000\),所以直接暴力建图,然后跑最小生成树就好了. Code #include<bits/stdc++.h ...

  8. 博彩游戏(tyvj 1519)

    背景 Bob最近迷上了一个博彩游戏…… 描述 这个游戏的规则是这样的:每花一块钱可以得到一个随机数R,花上N块钱就可以得到一个随机序列:有M个序列,如果某个序列是产生的随机序列的子串,那么就中奖了,否 ...

  9. 病毒(bzoj 2938)

    Description 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码 ...

  10. 数表(bzoj 3529)

    Description 有一张N×m的数表,其第i行第j列(1 < =i < =礼,1 < =j < =m)的数值为能同时整除i和j的所有自然数之和.给定a,计算数表中不大于a ...