<!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>
css3-flex制作骰子
最新推荐文章于 2024-03-09 18:39:38 发布