最大化及等比例测试演化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 常用命令笔记-2
注意事项: 沟通项目需求:1.项目背景和目的 哪个团队.项目Wiki? 数据库登陆:mysql -uroot -pabc@0326 -h127.0.0.1 -P4004 -A set names ut ...
- 安装vmware tools问题
我爱破解的xp虚拟机,之前没有装vmware tools,用起来非常不方便.因此,决定安装,但安装时出现了一些问题,特此记录: * 点击虚拟机的安装VMWARE TOOLS ,出现错误提示: 虚拟机需 ...
- 数组之slice,splice,Concact,Reverse,Sort方法
Slice(strart,end)用来从数组中提取元素.该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回 参数start 截取开始的位置索引,包含开始索引 参数end 截取结束位置的索 ...
- idea 启动 springBoot debug很慢，正常启动很快是什么原因
说实话,从我开始使用springboot框架以来,就一直遇到这个问题,我刚把项目从SSM框架转成 spring boot 框架时,就发现有时候启动项目特别慢,有时候特别快,当时觉得特别奇怪,但也一直没 ...
- Spring Boot Logback日志配置
logback的使用: Logback的默认配置 如果配置文件 logback-test.xml 和 logback.xml 都不存在,那么 logback 默认地会调用BasicConfigurat ...
- Codeforces 1105B：Zuhair and Strings（字符串水题）
time limit per test: 1 second memory limit per test: 256 megabytes input: standard input output: sta ...
- 小妖精的完美游戏教室——东方PROJECT，同人，墙
//================================================================//// Copyright (C) 东方同人社// All Rig ...
- java的几种模式以及如何实现的
创建Bean实例的方式: 1) 通过构造器(有参或无参) 方式: <bean id="" class=""/> 2) 通过静态工厂方法 方式: &l ...
- SSL Certificate Signed Using Weak Hashing Algorithm 和SSL Medium Strength Cipher Suites Supported的解决方案
这两天有个项目被扫描器报了几个中危,都是SSL证书的问题.记录一下解决方案吧. 第一个问题:SSL Certificate Signed Using Weak Hashing Algorithm 这里 ...
- Comedi的学习过程
1.介绍Comedi 1.1Comedi是一个设备驱动开发的软件工具,它采用了一种3层组织模型:上层是用户层,Comedi提供了在用户控件编写程序的接口Comedilib,通过系统调用来控制硬件设备: ...