zoukankan      html  css  js  c++  java
  • 最大化等比例测试演化Demo-传统方法

    demo-1:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #CCC;
    	position:relative;
    }
    #incontainer {
    	background-color: blue;
    	position:absolute;
    	 90%;
    	height: 90%;
    	top:5%;
    	left:5%;
    }
    #inincontainer {
    	background-color: red;
    	position:absolute;
    	 90%;
    	height: 90%;
    	top:5%;
    	left:5%;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     demo-2:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #grey;
    	
    }
    #incontainer {
    	position:relative;
    	 90%;
    	height: 90%;
    	margin-left:5%;
    	/*margin-right:5%;*/
    	top:5%;
    	background-color: blue;
    }
    #inincontainer {
    	position:relative;
    	 90%;
    	height: 90%;
    	margin-left:5%;
    	/*margin-right:5%;*/
    	top:5%;
    	background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     demo-3:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #grey;
    	
    }
    #incontainer {
    	position:relative;
    	 90%;
    	height: 90%;
    	margin-left:5%;
    	top:5%;
    	background-color: blue;
    }
    #inincontainer {
    	position:relative;
    	 30%;
    	height: 30%;
    	left:50%;
    	top:50%;
    	background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     demo-4:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #grey;	
    }
    #incontainer {
    	padding:3.12% 5% 3.12% 5%;
    	 90%;
    	height: 90%;
    	background-color: blue;
    }
    #inincontainer {
        padding:3.12% 5% 3.12% 5%;
    	 90%;
    	height: 90%;
    	background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     小结:

    1.border宽度使用百分比,没有效果,故不要使用.

    2.padding-top,padding-bottom 使用百分比,以父盒子宽度为基准,所以为了达到满屏,数值需要修订.比如上述的padding值得3.12是一个修订值.

  • 相关阅读:
    37 web自动化实战三 前置后置条件 (fixture yield知识点 conftest.py )
    36 web自动化实战二 pytest用例筛选 断言 生成测试报告 数据驱动
    35 web自动化 pytest框架详述
    性能测试jmeter 监控技术
    性能测试jmeter-接口实战2 函数助手 (随机生成手机号,压测手机号等数据库校验不能重复的接口)
    性能测试jmeter-接口实战1 项目中的关联
    性能测试值jmeter 的基本使用(关联 )
    34 selenium JS操作 文件上传 项目分析
    D. Road to Post Office 解析(思維)
    C. Bank Hacking 解析(思維)
  • 原文地址:https://www.cnblogs.com/exesoft/p/10658431.html
Copyright © 2011-2022 走看看