效果图:
哎呀不好意思放错了,下面才是
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>纵向骰子</title> <style> * { padding: 0; margin: 0; } body { background-color: silver; box-sizing: border-box; } ul { list-style: none; width: 160px; height: 160px; background-color: salmon; border-radius: 20px; padding: 20px; display: flex; /* 弹性布局更改为纵向排列column(默认横向排列row) */ flex-direction: column; } li { width: 30px; height: 30px; background-color: black; border: 1px solid black; border-radius: 50%; } .ul1 { /* 因为弹性布局编程纵向排列,所以Y轴变成主轴,justify-content控制Y轴了(默认是X轴). */ align-items: center; justify-content: space-around; } .ul2 { flex-wrap: wrap; align-items: center; justify-content: space-around; } .ul2 li { margin: 50px 0; } .ul3 { justify-content: center; } .ul3 li:nth-child(2) { align-self: center; } .ul3 li:nth-child(3) { align-self: flex-end; } .ul4 { flex-wrap: wrap; justify-content: center; align-items: center; } .ul4 li { margin: 20px 0; } .ul5 { flex-wrap: wrap; justify-content: center; align-items: center } .ul5 li { margin: 20px 0 } .ul5 li:nth-child(3) { margin: 50px 0 } .ul6 { flex-wrap: wrap; justify-content: center; align-items: center; } .ul6 li{ margin: 10px 0; } </style> </head> <body> <h3>骰子的第1个面</h3> <ul class="ul1"> <li></li> </ul> <h3>骰子的第2个面</h3> <ul class="ul2"> <li></li> <li></li> </ul> <h3>骰子的第3个面</h3> <ul class="ul3"> <li></li> <li></li> <li></li> </ul> <h3>骰子的第4个面</h3> <ul class="ul4"> <li></li> <li></li> <li></li> <li></li> </ul> <h3>骰子的第5个面</h3> <ul class="ul5"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <h3>骰子的第6个面</h3> <ul class="ul6"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
赌场是没有赌场的咯,只能靠标题维持敲代码这样子