实训小项目2：骰子布局

最新推荐文章于 2024-08-13 17:13:54 发布

DANEHONG

最新推荐文章于 2024-08-13 17:13:54 发布

阅读量317

点赞数 8

文章标签： css css3 前端

本文链接：https://blog.csdn.net/DANEHONG/article/details/135588999

版权

利用flex布局实现以下效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>骰子</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.container {
				width: 1000px;
				height:150px;
				margin: 50px auto;
				background-color: beige;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.container div {
				width: 100px;
				height: 100px;
				border:2px #000000 solid;
				border-radius: 20px;
				margin: 30px;
				padding: 5px;
			}
			.container span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-color: #000000;
				border-radius: 100%;
			}
			
			.item1{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.item2{
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.item3 {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			}
			.item3 p:nth-child(1) {
				display: flex;
				justify-content: flex-start;
			}
			.item3 p:nth-child(2) {
				display: flex;
				justify-content: center;
			}
			.item3 p:nth-child(3) {
				display: flex;
				justify-content: flex-end;
			}
			.container p {
				display: flex;
				justify-content: space-around;
			}
			.item4 {
				display: flex;
				flex-direction: column;
				justify-content: space-around;	
			}
			.item5 {
				display: flex;
				flex-direction: column;
				justify-content: space-around;	
			}
			.item6 {
				display: flex;
				flex-direction: column;
				justify-content: space-around;	
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item1">
				<span></span>
			</div>
			<div class="item2">
				<span></span><span></span>
			</div>
			<div class="item3">
				<p><span></span></p>
				<p><span></span></p>
				<p><span></span></p>
			</div>
			<div class="item4">
				<p><span></span><span></span></p>
				<p><span></span><span></span></p>
			</div>
			<div class="item5">
				<p><span></span><span></span></p>
				<p><span></span></p>
				<p><span></span><span></span></p>
			</div>
			<div class="item6">
				<p><span></span><span></span></p>
				<p><span></span><span></span></p>
				<p><span></span><span></span></p>
			</div>
		</div>
	</body>
</html>