web表單使用
阿新 • • 發佈：2018-09-24
scale grid styles doctype style doc mpat gre tle
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表單使用