码迷,mamicode.com
首页 > Web开发 > 详细

web表单使用

时间:2018-09-24 21:12:08      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:idt   计数   gray   initial   one   port   表单   isp   htm   

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表单使用

标签:idt   计数   gray   initial   one   port   表单   isp   htm   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!