有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. sqlserver常用知识点备忘录(持续更新)

    背景 一个项目的开发,离不开数据库的相关操作,表/视图设计,存储过程,触发器等等数据库对象的操作是非常频繁的.有时候,我们会查找系统中类似的代码,然后复制/粘贴进行再进行相应的修改.本文的目的在于归纳 ...

  2. selenium - 常用等待操作

    # 4. 等待操作 # 强制等待from time import sleepsleep(10) # 隐性等待# 设置最长等待时间,在这个时间在只要有个时间点加载完成,则执行下一步代码,比sleep智能 ...

  3. php将数组写入到文件的三种方法

    php将数组原样写入或保存到文件有三种方法可以实现, 第一种方法是使用serialize, 第二种方法是使用print_r, 第三种方法是使用var_export, 本文章向大家介绍这三种方法是如何将 ...

  4. TensorFlow——热身运动:简单的线性回归

    过程: 先用numpy建立100个数据点,再用梯度下滑工具来拟合,得到完美的回归线. # _*_coding:utf-8_*_ import tensorflow as tf import numpy ...

  5. 【mysql 优化 5】左连接和右连接优化

    原文地址:8.2.1.8 Left Join and Right Join Optimization mysql以下列方式实现一个A left join B 连接条件: 1,表B设置为依赖于表A和A所 ...

  6. 简单实用jstl实现代码编写

    package com.ceshi; import java.io.IOException; import javax.servlet.jsp.JspException; import javax.s ...

  7. 移动端(钉钉微服务)webpack配置需要移除hash来解决应用更新后白屏的问题

    钉钉微服务webpack配置调整方案 1: Vue CLI配置修改方法 a. 修改build下webpack.prod.config.js.去掉图中三处hash(.[chunkhash]): b. 修 ...

  8. 【Luogu】P2604网络扩容(费用流乱搞)

    题目链接 这题比较水,就是乱改改费用流模板.判断一下已经满流的边和没有满流的边,然后再改改最大流模板,然后把它们拼起来就是了. 话说这题第一遍90,然后撕烤一会发现自己yy的spfa扩容方式不允许反悔 ...

  9. 【CF56E】Domino Principle(线性扫描,伪DP)

    每块多米诺骨牌所在的位置设为x,每块多米诺骨牌高度为h.如果将x位置上的多米诺骨牌向右翻到,它就可以影响[x+1, x+h-1]范围内的所有多米诺骨牌,让他们也翻到,同时这些被翻到的多米诺骨牌还能影响 ...

  10. poj 2318 TOYS 点与矩形的关系

    题目链接 题意 有一个矩形盒子,\(n(n\leq 5e4)\)条线段将其分成了\(n+1\)个区域(每条线段的两个端点分别在矩形的上边和下边,且线段互不相交).现向盒子中扔\(m(m\leq 5e4 ...