css3-flex制作骰子

最新推荐文章于 2023-02-15 16:51:43 发布

sam80000

最新推荐文章于 2023-02-15 16:51:43 发布

阅读量250

点赞数

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

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

版权

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

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">
/* 			====================================
			运用知识:flex弹性布局
			构建思路：1-3 对盒子点数进行布局
					4-6 将带点数分成几个块，对每个
						块中的点数进行单独布局
			==================================== */
			#box1{width: 100px; height: 100px; border: 2px black solid; border-radius: 5px; display: flex; justify-content: center; align-items: center; }
			#box1 div{width: 30%; height: 30%; border-radius: 50%; background: black;}
			
			#box2{width: 100px; height: 100px; border: 2px black solid; border-radius: 5px; display: flex;justify-content: space-between; }
			#box2 div{width: 30%; height: 30%; border-radius: 50%; background: black;}
			#box2 div:last-child{align-self: flex-end;}
			
			#box3{width: 100px; height: 100px; border: 2px black solid; border-radius: 5px; display: flex; justify-content: space-between;align-items: center;}
			#box3 div{width: 30%; height: 30%; border-radius: 50%; background: black;}
			#box3 div:first-child{align-self: flex-start;}
			#box3 div:last-child{align-self: flex-end;}
			
			#box4{width: 100px; height: 100px; border: 2px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;}
			#box4 div{width:100%; justify-content: space-between; display: flex;}
			#box4 div:last-child{align-items: flex-end;}
			#box4 i{display: block; width: 30%; height: 50%; background: black; border-radius: 50%;}
			
			#box5{width: 100px; height: 100px; border: 2px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;}
			#box5 div{width:100%; justify-content: space-between; display: flex;}
			#box5 div:last-child{align-items: flex-end;}
			#box5 div:nth-child(2){justify-content: space-evenly; align-items: center;}
			#box5 i{display: block; width: 30%; height: 90%; background: black; border-radius: 50%;}
			
			#box6{width: 100px; height: 100px; border: 2px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;}
			#box6 div{width:100%; justify-content: space-between; display: flex;}
			#box6 div:last-child{align-items: flex-end;}
			#box6 div:nth-child(2){justify-content: space-between; align-items: center;}
			#box6 i{display: block; width: 30%; height: 90%; background: black; border-radius: 50%;}
		</style>
	</head>
	<body>
		<div id="box1">
			<div></div>
		</div>
		
		<div id="box2">
			<div></div>
			<div></div>
		</div>
		
		<div id="box3">
			<div></div>
			<div></div>
			<div></div>
		</div>
		
		<div id="box4">
				<div>
					<i></i>
					<i></i>
				</div>
				<div>
					<i></i>
					<i></i>
				</div>
		</div>
		
		<div id="box5">
				<div>
					<i></i>
					<i></i>
				</div>
				<div>
					<i></i>
				</div>
				<div>
					<i></i>
					<i></i>
				</div>
		</div>
		
		<div id="box6">
				<div>
					<i></i>
					<i></i>
				</div>
				<div>
					<i></i>
					<i></i>
				</div>
				<div>
					<i></i>
					<i></i>
				</div>
		</div>
	</body>
</html>

sam80000

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================
复制链接

扫一扫