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

话不多说，上代码看吧

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

<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. iframe载入页面过程显示动画效果
			
    http://www.xfeixiang.com/Bug/Detail/A2FD7EFFA8CA72F1
    
			
    2. 
						
  2. 1002 Phone Numbers 解题报告
			
    1002. Phone Numbers Time limit: 2.0 secondMemory limit: 64 MB In the present world you frequently me ...
    
			
    3. 
						
  3. MQ通道配置
			
    转自:http://www.cnblogs.com/me115/p/3471788.html MQ通道配置 通道是用来连接两个队列管理器的: 在单个队列管理器内读写消息不需要建立通道:但在一个队列管理 ...
    
			
    4. 
						
  4. cocopods 安装与使用
			
    iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...
    
			
    5. 
						
  5. PHP开发环境配置~Windows 7 IIS
			
    1.配置IIS添加角色服务:CGI.ISAPI扩展.ISAPI筛选器 2.下载PHP安装包 http://windows.php.net/download/ 3.添加模块映射 4.配置php.ini  ...
    
			
    6. 
						
  6. android 官方文档  JNI TIPS
			
    文章地址  http://developer.android.com/training/articles/perf-jni.html JNI Tips JNI is the Java Native I ...
    
			
    7. 
						
  7. Java三行代码搞定MD5加密，测试5c短信网关的demo
			
    看到之前项目中,关于MD5加密的足足写了一个辅助类. 其实在Java中大部分都帮你实现好了,完成MD5加密,主要就三行代码: /** * 对字符串md5加密 * * @param str * @ret ...
    
			
    8. 
						
  8. xml 的 CDATA
			
    <PolicyURL><![CDATA[http://ectp.tpi.cntaiping.com/TPEBizWeb/pages/B2C/show/downLoad.do?poli ...
    
			
    9. 
						
  9. Centos7上启动vpn客户端失败问题处理
			
    在某台云主机上(Centos7)搭建vpn客户端,发现一直启动失败,检查了下日志,报错如下: Sat Jan :: WARNING: Your certificate is not yet valid ...
    
			
    10. 
						
  10. session详解
			
    什么是Session 对Tomcat而言,Session是一块在服务器开辟的内存空间,其存储结构为ConcurrentHashMap: Session的目的 Http协议是一种无状态协议,即每次服务端 ...
    
			
    11.