css3-grid制作骰子

最新推荐文章于 2022-01-27 16:18:52 发布

sam80000

最新推荐文章于 2022-01-27 16:18:52 发布

阅读量181

点赞数 1

分类专栏：前端知识点文章标签： css3 css

本文链接：https://blog.csdn.net/sam80000/article/details/111554440

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			/* 第一个骰子样式 */
			.box{
				width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
				display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
				place-items: center center;
				}
			.box div{
				width: 20px; height: 20px; background: black; border-radius: 50%;
				}
			.box div:nth-child(1){grid-area: 2/2/3/3;}
			/* 第二个骰子样式 */
			.box1{
				width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
				display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
				place-items: center center;
				}
			.box1 div{
				width: 20px; height: 20px; background: black; border-radius: 50%;
				}
			.box1 div:nth-child(2){grid-area:3/3/4/4;}
			/* 第三个骰子样式 */
			.box2{
				width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
				display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
				place-items: center center;
				grid-template-areas: 
				"a1 a2 a3"
				"a4 a5 a6"
				"a7 a8 a9";
				}
			.box2 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
			.box2 div:nth-child(2){grid-area: a5;}
			.box2 div:nth-child(3){grid-area: a9;}
			/* 第四个骰子样式 */
			.box3{
				width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
				display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
				place-items: center center;
				grid-template-areas: 
				"a1 a2 a3"
				"a4 a5 a6"
				"a7 a8 a9";
				}
			.box3 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
			.box3 div:nth-child(2){grid-area: a3;}
			.box3 div:nth-child(3){grid-area: a7;}
			.box3 div:nth-child(4){grid-area: a9;}
			/* 第五个骰子样式 */
			.box4{
				width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
				display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
				place-items: center center;
				grid-template-areas: 
				"a1 a2 a3"
				"a4 a5 a6"
				"a7 a8 a9";
				}
			.box4 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
			.box4 div:nth-child(2){grid-area: a3;}
			.box4 div:nth-child(3){grid-area: a7;}
			.box4 div:nth-child(4){grid-area: a9;}
			.box4 div:nth-child(5){grid-area: a5;}
			/* 第六个骰子样式 */
			.box5{
				width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
				display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
				place-items: center center;
				grid-template-areas: 
				"a1 a2 a3"
				"a4 a5 a6"
				"a7 a8 a9";
				}
			.box5 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
			.box5 div:nth-child(2){grid-area: a3;}
			.box5 div:nth-child(3){grid-area: a7;}
			.box5 div:nth-child(4){grid-area: a9;}
			.box5 div:nth-child(5){grid-area: a4;}
			.box5 div:nth-child(6){grid-area: a6;}
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
		</div>
		<div class="box1">
			<div></div>
			<div></div>
		</div>
		<div class="box2">
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="box3">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="box4">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="box5">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

sam80000

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-grid制作骰子

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> /* 第一个骰子样式 */ .box{ width
复制链接

扫一扫