（哈哈，第一次写博客，简称处贴?主要记录下平时工作中遇到的问题及其解决方案，方便以后解决此类问题。）

话不多说，上代码看吧

代码有点乱，以后自己能看得懂就行咯

<body >

    <div align="center" >

        <div id="div" style="position:absolute;top:40%;left: 20%;width: 58%;height: 38%;z-index:10;background-image: url('public/image/loginWindow.png');">

                <div style="position:absolute;top:65%;left:8%;width: 60%;height:30%;z-index: 11;">

                    <div  style="width:100%;height:30%">

                        <span class="sp1">用户</span>

                        <input id ="username_zgy"  name="username" value="1" style="width:25%;height:100%">

                    </div>

                    <div  style="margin-top:3%;width:100%;height:30%">

                        <span class="sp1">密码</span>

                        <input id="userpassword_zgy"  name="password" value="1"  style="width:25%;height:100%">

                    </div>

                </div>

                <div style="position:absolute;top:65%;right:33%;width:10%;height:30%;z-index: 12;">

                    <img alt="登陆" src="public/image/login.png" style="width:95%;height:25%;" onclick="fun_submitForm_zgy()">

                    <img alt="登陆" src="public/image/loginReset.png" style="margin-top:20%;width:95%;height:25%;">

                </div>

        </div>

    </div>

</body>

<head>

    <style type="text/css">

        body {

            background-image:url(public/image/loginBgNew.jpg);       //主页面背景图

            background-size:100% 100%;

            background-repeat:no-repeat;

            position:relative;

        }

        #div{

            background-size:100% 100%;         //设置登陆框背景图占 登陆div 的比例
        }

        .sp1{

            font-weight:900;

            color:white ;

        }

    </style>

下面是效果图



												


											
<css篇>关于页面的绝对定位与相对定位，且支持页面各元素自适应的更多相关文章
	

    
								
  1. css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
		
    1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...
    
		
    2. 
						
  2. css绝对定位、相对定位和文档流的那些事
		
    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
    
		
    3. 
						
  3. [Web 前端]   CSS 盒子模型，绝对定位和相对定位
		
    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
    
		
    4. 
						
  4. Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用
		
    1.div层的浮动 1)div向左浮动.向右浮动 <!doctype html> <html> <head> <meta charset="utf- ...
    
		
    5. 
						
  5. css中绝对定位和相对定位的区别
		
    先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
    
		
    6. 
						
  6. 【CSS】绝对定位和相对定位
		
    html:定位层 特点: >>完全脱离默认文档流,独立于立体层面的Z轴之上. >>和float浮动一样都脱离了默认文档流,但float元素与默认文档流之间会相互产生影响,而定位 ...
    
		
    7. 
						
  7. CSS魔法（三）浮动、相对定位、绝对定位
		
    浮动 为何需要浮动? 浮动float最开始出现的意义是为了让文字环绕图片而已,但人们发现,如果想要三个块级元素并排显示,都给它们加个float来得会比较方便. 浮动问题? 为何要清除浮动? 很多情况下 ...
    
		
    8. 
						
  8. css中的绝对定位和相对定位（详解，总结）
		
    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...
    
		
    9. 
						
  9. css 浮动 绝对定位 和 相对定位
		
    html是按照文件流(文档流)的方式加载的,但是全部是文档流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先,按照文档流和非文档流来分类: ①文档流:就是按照上下 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. XEN的启动信息输出到“Platform timer is 14.318MHz HPET”就暂停接收的解决办法
			
    使用Serial Over Lan(SOL)来双机调试 XEN,在 XEN 启动时,引导信息输出到以下这一句时,就不再发送调试信息了: ...(XEN) Intel machine check rep ...
    
			
    2. 
						
  2. 【转】安装mysql 出现：Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exist
			
    来源:http://blog.csdn.net/dapeng0112/article/details/37053407 本来初始化配置是这样的: scripts/mysql_install_db -- ...
    
			
    3. 
						
  3. CEGUI0.8.4例子
			
    #define GLUT_DISABLE_ATEXIT_HACK#pragma comment(lib,"glew32.lib")#include<stdlib.h># ...
    
			
    4. 
						
  4. QT QML目录导航列表视图
			
    [功能] /目录.文件 /文件过滤 /递归 /事件 /高亮当前行 /当前选项 /目录切换动画 /限制根目录 [下载]:http://download.csdn.net/detail/surfsky/8 ...
    
			
    5. 
						
  5. 使用FastJSON，将对象或数组和JSON串互转
			
    Fastjson,是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库.其开源的下载网址为:https://github.com/AlibabaTech/fastjson. 示例代码如下: ...
    
			
    6. 
						
  6. Redmine开发帮助
			
    这里先零星记录二次开发用得上的知识点: 1.windows下开发环境,参考此文.最好使用rubyinstaller安装,注意选择版本.或者直接安装railsinstaller. 2.获取自定义内容,参 ...
    
			
    7. 
						
  7. python 编辑xml中namespace问题中出现很多ns0
			
    原始文件:
    
			
    8. 
						
  8. C# 集合已修改;可能无法执行枚举操作
			
    在winform 项目时遇到: 集合已修改;可能无法执行枚举操作的问题 错误原因:当用foreach遍历Collection时,如果对Collection有Add或者Remove或其他类似操作都会有这 ...
    
			
    9. 
						
  9. js爬虫心得
			
    第一步:分析要爬的网站:包括是否需要登陆.点击下一页的网址变化.下拉刷新的网址变化等等 第二步:根据第一步的分析,想好爬这个网站的思路 第三步:爬好所需的内容 保存 爬虫过程中用到的一些包: (1)c ...
    
			
    10. 
						
  10. Windows7+32位，MongoDB安装
			
    在网上找了各种安装MongoDB的教程,总是会出现一些bug,就自己总结了,亲测正确,MongoDB的安装再也不是一件麻烦的事情了~ 1.下载好跟自己电脑适合的安装包,选择Custom自定义安装,将安 ...
    
			
    11.