最大化及等比例测试演化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,工作流引擎,工作流引擎测试容器,表单引擎 功能说明 工作流的测试容器是为了解决手工模拟人工登录模式下测试 ...
随机推荐
- linux怎么实时查看目录下是否有文件生成
inotify-tools 是为linux下inotify文件监控工具提供的一套c的开发接口库函数,同时还提供了一系列的命令行工具,这些工具可以用来监控文件系统的事件. inotify-tools是用 ...
- Failed to load ApplicationContext ，Error creating bean with name 'adminUserService': Injection of autowired dependencies failed;
Druid配置的时候出现这个问题: "C:\Program Files\Java\jdk1.8.0_191\bin\java" -ea -Didea.test.cyclic.buf ...
- python 8
一.文件操作初识 1. path 文件路径 F:\文件.txt encoding 编码方式 utf-8, gbk ... mode 操作方式 只读,只写,读写,写读,追加... f1 = open(r ...
- HDU - 6127: Hard challenge(扫描线，atan)
pro:给定N个二维平面的关键点,保证两点连线不经过原点.现在让你安排一条经过原点,但是不经过关键点的直线,使得两边的和的乘积最大. sol:由于连线不经过原点,所以我们极角排序即可. 具体:因为我们 ...
- Blob与Clob转字符串
/** * blob转字符串 * * @param blob * @return * @throws IOException * @throws SQLException */ public stat ...
- 同步I/O、异步I/O与阻塞I/O、非阻塞I/O的区别
一.I/O I/O (Input/Output,输入/输出)即数据的读取(接收)或写入(发送)操作. 通常用户进程中的一个完整I/O分为两阶段:用户进程空间<-->内核空间.内核空间< ...
- Python:从入门到实践--第十一章--测试代码--练习
#1.城市和国家:编写一个函数,它接受两个形参:一个城市名和一个国家名. #这个函数返回一个格式为City,Country的字符串,如Santiago,Chile.将这个函数 #存储在一个名为city ...
- MATLAB实现二值化函数
function bc = binary_conversion(a) %这是灰度值二值化转换函数,阈值为平均值j=imread(a); %读取灰度图像 j=double ...
- 1px和backgroudImage
https://blog.csdn.net/leadn/article/details/78560786 .setTopLine(@c: #C7C7C7) { & { position: re ...
- 原来你是这样的setTimeout
先上代码 console.log("start"); setTimeout(function(){ console.log("Hello"); },200); ...