最大化及等比例测试演化Demo-Grid方法
Demo1-简单测试:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.container {
width:100%;
height:100%;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25%;
grid-template-areas:
". . . ."
". c c ."
". . . .";
}
.cs{
grid-area: c;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="cs">cs</div>
</div>
</body>
</html>
Demo2-页面布局练习:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.container {
width:100%;
height:100%;
display: grid;
/*grid-gap: 5px;*/
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 8fr 1fr;
grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";
}
.header {
grid-area: h;
background-color: #0F0;
}
.menu {
grid-area: m;
background-color: blue;
}
.content{
grid-area: c;
background-color: pink;
}
.footer {
grid-area: f;
background-color: #666;
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="leftmenu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
Demo3-选手分值信息展示布局:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: grid;
/*grid-gap: 5px;*/
/* grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;*/
grid-template-columns:repeat(22,1fr);
grid-template-rows: repeat(22,1fr);
grid-template-areas:
". . . . . . . . . . . . . . . . . . . . . ."
". l l l l l l l l l l l l l l l l l l l l ."
". l l l l l l l l l l l l l l l l l l l l ."
". . . . . . . . . . . . . . . . . . . . . ."
". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . "
". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . "
". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . "
". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . "
". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . "
". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . "
". . . . . . . . . . . . . . . . . . . . . ."
". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ."
". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ."
". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ."
". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ."
". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ."
". re re re re re re re re re re re re re re re re re re re re ."
". re re re re re re re re re re re re re re re re re re re re ."
". re re re re re re re re re re re re re re re re re re re re ."
". at at at at at at at at at at at at at at at at at at at at ."
". at at at at at at at at at at at at at at at at at at at at ."
". . . . . . . . . . . . . . . . . . . . . ." ;
}
.banner {
grid-area: l;
background-color: red;
}
.playerphoto {
grid-area: xx;
background-color: blue;
}
.playerinfo {
grid-area: yy;
background-color: yellow;
}
.raters {
grid-area: rs;
background-color: green;
}
.result {
grid-area: re;
background-color: pink;
}
.admtip {
grid-area: at;
background-color: #9C6;
}
</style>
</head>
<body>
<div class="container">
<div class="banner">banner</div>
<div class="playerphoto">playerphoto</div>
<div class="playerinfo">playerinfo</div>
<div class="raters">raters</div>
<div class="result">result</div>
<div class="admtip">admtip</div>
</div>
</body>
</html>
最大化及等比例测试演化Demo-Grid方法的更多相关文章
- 最大化等比例测试演化Demo-传统方法
demo-1: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
- Selenium关键字驱动测试框架Demo（Java版）
Selenium关键字驱动测试框架Demo(Java版)http://www.docin.com/p-803493675.html
- Spring Boot超简单的测试类demo
1 概述 Spring Boot结合Junit的简单测试类demo,流程是先引入依赖,接着编写测试类测试运行即可. 2 依赖 <dependency> <groupId>org ...
- appium+Python真机运行测试demo的方法
appium+Python真机运行测试demo的方法 一, 打开手机的USB调试模式 二, 连接手机到电脑 将手机用数据线连接到电脑,并授权USB调试模式.查看连接的效果,在cmd下运行命 ...
- 基于Python的XSS测试工具XSStrike使用方法
基于Python的XSS测试工具XSStrike使用方法 简介 XSStrike 是一款用于探测并利用XSS漏洞的脚本 XSStrike目前所提供的产品特性: 对参数进行模糊测试之后构建合适的payl ...
- Tkinter grid() 方法
Tkinter grid() 方法:这个的几何管理器组织在父部件的表状结构中的部件. 这的几何管理器组织表状结构中的小部件的父部件. 语法: widget.grid( grid_optio ...
- .NET中如何测试Private和Protected方法
TDD是1)写测试2)写通过这些测试的代码,3)然后重构的实践.在,NET社区中, 这个概念逐渐变得非常流行,这归功于它所增加的质量保证.此时,它很容易测试public方法,但是一个普遍的问题出现了, ...
- RegisterUserFunc为测试对象添加新方法或重写已有方法
QTP中为了提高扩展性,提供了一个为测试对象添加一个新的自定义方法,或者重写测试对象已有的方法的函数RegisterUserFunc,在此给大家分享一下. RegisterUserFunc:为测试对象 ...
- Java工作流引擎的测试容器-功能-使用方法-注意事项
工作流引擎的测试容器-功能-使用方法-注意事项 关键字 Ccbpm, ccflow,jflow,工作流引擎,工作流引擎测试容器,表单引擎 功能说明 工作流的测试容器是为了解决手工模拟人工登录模式下测试 ...
随机推荐
- [ 随手记 4 ]C/C++ 模板（Template）使用/重载区别
(原创)个人理解: 模板,故名思义,就是一个模子: 模板分为:类模板和函数模板(也可叫模板类和模板函数): 模板特点:(1)函数名字一样: (2)调用的形参的数据类型不同,但形参个数相同: (3)函数 ...
- Redis的使用原理
原理介绍 (1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (有空再补充,有理解错误或不足欢迎指正) (2)Reids的特点 Redis本质上是一个Key-Val ...
- 使用new来分配内存
对指针的工作方式有一定的了解之后,来看看他如何实现在程序运行时分配内存.前面我们都将指针初始化为变量的地址(int * pt; pt = & a):变量是在编译时分配的有名称的内存,而指针只是 ...
- 导入到eclipse里的工程挺大的，然后就一直报： An internal error occurred during: "Building workspace". GC overhead limit exceeded 这个错误。
解决方法: 原因是Eclipse默认配置内存太小需要更改Eclipse安装文件夹下的eclipse.ini文件. Eclipse.ini默认文件如下: 修改如下: -Xms1024m -Xmx2048 ...
- Java面试题2
类加载机制 Java虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的加载机制. 类从被加载到虚拟机内存中开 ...
- Javascript 2.9
对象:属性和方法属性:隶属于某个特定对象的变量方法:只有某个特定对象才能调用的函数 对象和方法都用"."来访问: Object.property Object.method() 由 ...
- win10 uwp 读取resw资源文件
ResourceContext resourceContext = ResourceContext.GetForViewIndependentUse(); ResourceMap resourceMa ...
- 阿里巴巴语音识别模型 DFSMN 的使用指南
阿里巴巴 2018 年开源的语音识别模型 DFSMN,将全球语音识别准确率纪录提高至 96.04%.DFSMN 模型,是阿里巴巴的高效工业级实现,相对于传统的 LSTM.BLSTM 等声学模型,该模型 ...
- FPGA Asynchronous FIFO设计思路（2）
FPGA Asynchronous FIFO设计思路(2) 首先讨论格雷码的编码方式: 先看4bit的格雷码,当MSB为0时,正向计数,当MSB为1时,即指针已经走过一遍了,最高位翻转,此时的格雷码是 ...
- 异常：tomcat与windows时间不同步
调试一个项目时发现用户那里服务器的Tomcat命令行中log4j输出的时间与操作系统时间不一致,因此日志记录的时间与操作系统时间也不一致,且正好相差8个小时.产生原因是因为Tomcat中的时区设置与操 ...