<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>骰子布局</title> <style> body { margin: 10px 0 0 0; display: flex; justify-content: space-around; } body > div { display: flex; width: 100px; height: 100px; border-radius: 4px; border: 2px solid red; box-sizing: border-box; } p { width: 15px; height: 15px; background-color: black; border-radius: 50%; margin: 2px; } .div1 { justify-content: center; align-items: center; } .div2 { justify-content: space-around; flex-direction: column; align-items: center } .div3{ justify-content: space-around; flex-direction: column } .div3 div{ display: flex; justify-content:space-around; flex-basis: auto; } .div3 p:nth-child(1) { align-self: flex-start; } .div3 p:nth-child(2) { align-self: center; } .div3 p:nth-child(3) { align-self: flex-end; } /*todo:请补全剩余骰子布局代码*/ .div8{ justify-content: space-around; flex-direction: column } .div8 div{ display: flex; justify-content:space-between; flex-basis: auto; } .div9{ justify-content: space-around; flex-direction: column } .div9 div{ display: flex; justify-content: space-around; flex-basis: auto; } .div7{ justify-content: space-around; flex-direction: column } .div7 div{ display: flex; justify-content: space-around; flex-basis: auto; } .div6{ justify-content: space-around; flex-direction: column } .div6 div{ display: flex; justify-content: space-around; flex-basis: auto; } .div5{ justify-content: space-around; flex-direction: column } .div5 div{ display: flex; justify-content: space-around; flex-basis: auto; } .div4{ justify-content: space-around; flex-direction: column } .div4 div{ display: flex; justify-content: space-around; flex-basis: auto; } </style> </head> <body> <!--骰子1--> <div class="div1"> <p></p> </div> <!--骰子2--> <div class="div2"> <p></p> <p></p> </div> <!--骰子3--> <div class="div3"> <p></p> <p></p> <p></p> </div> <!--骰子4--> <div class="div4"> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> </div> <!--骰子5--> <div class="div5"> <div> <p></p> <p></p> </div> <div> <p></p> </div> <div> <p></p> <p></p> </div> </div> <!--骰子6--> <div class="div6"> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> </div> <!--骰子7--> <div class="div7"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div> <!--骰子8--> <div class="div8"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div> <!--骰子9--> <div class="div9"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div> </body> </html>
要通过ES6语法来实现
?
?刚才草稿没保存，所以懒得写文字叙述了
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #蓝桥杯web开发 #thissetdata
