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

话不多说，上代码看吧

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

<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. 敏捷项目开源管理软件ScrumBasic（2）- 多项目支持
			
    1.加入Project对象模型 public class Project { [Key] [MaxLength(32)] public string ID { get; set; } public s ...
    
			
    2. 
						
  2. Windows下的Objective-C集成开发环境（IDE）(转)
			
    Objective-C是苹果软件的编程语言,想要上机学习.调试,有一个集成开发环境(IDE)方便很多.有三类方法搭建Objective-C的集成开发环境: 1)   使用苹果的平台,集成开发环境使用X ...
    
			
    3. 
						
  3. win10 使用docker
			
    新手 win10 下使用docker 1:下载docker for win 2:查看docker使用文档 https://github.com/widuu/chinese_docker 3 : 下载镜 ...
    
			
    4. 
						
  4. js 判断移动设备、pc端、android、iPhone、是否为微信、微博、qq空间
			
    varbrowser = {   versions: function () {      var u = navigator.userAgent, app = navigator.appVersio ...
    
			
    5. 
						
  5. 简述id，instancetype和__kindof的区别
			
    id: 好处:可以调用任何对象方法 坏处:不能进行编译检查 + (id)person; instancetype 好处:自动识别当前类的对象 坏处:不会提示返回的类型 + (instancetype) ...
    
			
    6. 
						
  6. [Dynamic Language] 用Sphinx自动生成python代码注释文档
			
    用Sphinx自动生成python代码注释文档 pip install -U sphinx 安装好了之后,对Python代码的文档,一般使用sphinx-apidoc来自动生成:查看帮助mac-abe ...
    
			
    7. 
						
  7. Linux内核分析：打开文件描述符实现
			
    在Linux中每一个进程的数据是存储在一个task_struct结构(定义在sched.h中)中的. struct task_struct { volatile long state; /* -1 u ...
    
			
    8. 
						
  8. Android动态方式破解apk终极篇(加固apk破解方式)
			
    一.前言 今天总算迎来了破解系列的最后一篇文章了,之前的两篇文章分别为: 第一篇:如何使用Eclipse动态调试smali源码 第二篇:如何使用IDA动态调试SO文件 现在要说的就是最后一篇了,如何应 ...
    
			
    9. 
						
  9. javascript 字符串多行的写法
			
    多行写法! $('#' +xx ).append ( '<div id="' + file.id + '" class="">\ <div c ...
    
			
    10. 
						
  10. 20-ES6（3）class基本语法
			
    # Class基本语法 关于es6的class简介: ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以 ...
    
			
    11.