首页 > Web开发 > 详细

web表单使用

时间:2018-09-24 20:32:14      阅读:150      评论:0      收藏:0      [点我收藏+]

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>颜色方块</title>
<link rel="stylesheet" href="特效2.css">
</head>
<body>
<div class="wrapper">
欢迎使用VS CODE !
<!-- 计数方块one~Six,div相当于一个分区 -->
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
CSS:
.wrapper {/*会对wrapper里面所有的单位起作用*/
/* (.wrapper)表示包装类,q其中.的意思是class=wrapper */
display: grid;/*定义表格*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;/*定义方块之间的缺口大小*/
grid-auto-rows: minmax(100px, auto);/**定义方块的大小*/
}
.one {/*定义表格的长,高,背景颜色*/
grid-column: 1 / 3;/*分数表示所占用的一个屏幕的百分比1/3表示所占屏宽*//*排*/
grid-row: 1;/*列*/
background-color: blue;
}
.two { /*定义表格的长,高,背景颜色*/
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: aliceblue;
}
.three {/*定义表格的长,高,背景颜色*/
grid-column: 1;
grid-row: 2 / 5;
background-color: aqua;
}
.four {/*定义表格的长,高,背景颜色*/
grid-column: 3;
grid-row: 3;
background-color: chocolate;
}
.five {/*定义表格的长,高,背景颜色*/
grid-column: 2;
grid-row: 4;
background-color: darkgray;
}
.six {/*定义表格的长,高,背景颜色*/
grid-column: 3;
grid-row: 4;
background-color: darkseagreen;
}

web表单使用

原文:https://www.cnblogs.com/Jakeyang/p/9696490.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!