master

分支 (1)

管理

管理

master

study-notes
/
html5 & css
/
html
/
GTA5封面.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>Document</title>
		<style>
			.box {
				display: grid;
				grid-template-columns: 180px 180px 1fr 180px;
				grid-template-rows: 20% 40% 20% 20%;
				grid-template-areas:
					'one two two three' 'four five five five'
					'six five five five' 'six seven eight eight';
				width: 600px;
				height: 600px;
				margin: 0 auto;
				background-color: black;
				border: 2px double green;
			}

			.box div:nth-child(1) {
				grid-area: one;
				background-color: red;
			}

			.box div:nth-child(2) {
				grid-area: two;
				background-color: rgb(255, 174, 0);
			}

			.box div:nth-child(3) {
				grid-area: three;
				background-color: rgb(102, 255, 0);
			}

			.box div:nth-child(4) {
				grid-area: four;
				background-color: rgb(0, 217, 255);
			}

			.box div:nth-child(5) {
				grid-area: five;
				background-color: rgb(3, 90, 47);
			}
			.box div:nth-child(6) {
				grid-area: six;
				background-color: rgb(255, 0, 255);
			}

			.box div:nth-child(7) {
				grid-area: seven;
				background-color: rgb(102, 92, 160);
			}
			.box div:nth-child(8) {
				grid-area: eight;
				background-color: rgb(141, 112, 68);
			}
			.box div:nth-child(9) {
				grid-row-start: 3; /*这些设置后才显示一个一个的区域*/
				grid-row-end: 4;
				grid-column-start: 2;
				grid-column-end: span 1; /*包含到网格的只有一个*/
				background-color: rgb(179, 176, 176);
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div>
				1这些方块可以放置图片、文本、视频，并且可以对单独元素使用clip-path裁成不同的样子
			</div>
			<div>
				2区域设置cursor:pointer;
				当鼠标悬浮在该元素上，元素可以使用transform来放大或者其它效果
			</div>
			<div>3F12,布局中可以显示grid的扩展网格线</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
		</div>
	</body>
</html>