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

话不多说，上代码看吧

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

<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. Win7+Eclipse+Hadoop2.6.4开发环境搭建
			
    Hadoop开发环境搭建 感谢参考网站:http://www.cnblogs.com/huligong1234/p/4137133.html 一.软件准备 JDK:jdk-7u80-windows-x ...
    
			
    2. 
						
  2. 国内外从事CV相关的企业
			
    提示:本文为笔者原创,转载请注明出处:blog.csdn.net/carson2005 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问题,这里,我给出自己收集 ...
    
			
    3. 
						
  3. RabbitMQ高可用方案总结
			
    RabbitMQ的集群方案有以下几种: 1.普通的集群 exchange,buindling再所有的节点上都会保存一份,但是queue只会存储在其中的一个节点上,但是所有的节点都会存储一份queue的 ...
    
			
    4. 
						
  4. php webservice
			
    发请求客户端client.php <?php //需要到php.ini文件中打开extension=php_soap.dll try{ //wsdl方式调用web service //wsdl方 ...
    
			
    5. 
						
  5. XPlane  android 2D手游开发实战
			
    android 飞行射击游戏类 采用 xamarin 跨平台开发技术  纯C#语言编写 操作简单 1.手指拖动飞机 躲避敌机 2.通过吃敌机爆炸后遗落的物品增加各种属性 3.双击战机放大技能 4.目前 ...
    
			
    6. 
						
  6. ubuntu vim8.0源码安装
			
    安装篇 从https://github.com/vim/vim下载相应zip源码文件,利用unzip vim-master.zip 命令解压到当前用户目录,即~: 解压后进入vim的src目录,首先, ...
    
			
    7. 
						
  7. CSS3中毛玻璃效果的使用方法
			
    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
    
			
    8. 
						
  8. 基于webrtc的资源释放问题（二）
			
    基于webrtc的资源释放问题(二) ——建立连接的过程中意外中断 应用背景: 我们在打电话的时候会不会遇到这种情况?打电话的时候未接通之前挂掉了电话,或者在接通之后建立的连接的过程中挂掉电话? 特别 ...
    
			
    9. 
						
  9. 【转】解决eclipse新导入工程无法run as server
			
    转载地址:http://blog.csdn.net/huang86411/article/details/12118309 问题描述: 从SVN或者别处搞过来的web项目,利用eclipse工具,新建 ...
    
			
    10. 
						
  10. Intellij  jrebel  热部署
			
    Intellij 14破解下载 注册机 即可进行破解.JRebel安装下载IntelliJ IDEA的 JRebel插件: jr-ide-idea-6.2.0-idea-13-14.zip. 打开In ...
    
			
    11.