最大化及等比例测试演化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,工作流引擎,工作流引擎测试容器,表单引擎 功能说明 工作流的测试容器是为了解决手工模拟人工登录模式下测试 ...
随机推荐
- centos7 - mongodb3.6.5-配置文件
创建Linux管理员账号admin, 并加入wheel组,对mongodb, php等进行统一管理~ systemLog:destination: filelogAppend: truepath: / ...
- git-本地仓库和远程仓库关联
以github为例: 在github创建仓库 本地新建项目后执行:git init 将远程项目和本地项目关联:git remote add origin +远程仓库地址 如:git remote ad ...
- linux btrfs文件系统管理与应用
btrfs文件系统管理与应用 1.btrfs文件系统 基本介绍 btrfs文件系统在CentOS7.x上属于技术预览版 btrfs文件系统英文名:B-tree FileSystem或者Butter ...
- 修改oracle数据库内存报错
今天修改oracle数据库内存时, alter system set memory_max_target=10240M scope=spfile;语句正确修改:但重启时却报错 : SQL> al ...
- spring查看生成的cglib代理类源码详解
1.让程序阻塞(抛出异常会导致程序结束,所以在抛出异常之前阻塞) 2. windows控制台 cd到jdk目录下的lib目录,找到sa-jdi.jar 执行: java -classpath sa-j ...
- Linux搜索文件或内容
1.递归搜索文件内容,如果查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" * * : 表示当前目录所有文件, ...
- 【开发】iOS入门 - XCode快捷键
XCode使用第一天,从熟悉快捷键开始... 搜索相关的快捷键: 搜文件.类和方法 - Command + Shift + O 搜字符串 - Command + Shift + F 定位文件 - Co ...
- 移除元素-leetcode-27
class Solution {public: int removeElement(vector<int>& nums, int val) { if(nums. ...
- [Python学习笔记] turtle库的基本使用
turtle库常用函数 引入turtle模块 import turtle turtle的绘图窗体 #setup()设置窗口大小及位置#setup()可省略turtle.setup(width,heig ...
- JavaException的使用
(第一个文件 MyException.java) package exception;import java.io.*; //先创建自己的异常类继承与Exception的类 public class ...