显示效果如图,emoji可替换为数字。
代码是这样的:
因为不是很难(因为我很懒),就不多加说明了,具体参考代码
<!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>Document</title> <style> .wrap { width: 500px; border: 1px solid lightgray; margin: 50px auto; } .main { display: flex; flex-wrap: wrap; } .main span { line-height: 49px; display: inline-block; width: 49px; border: 1px solid lightgray; text-align: center; height: 49px; border-right: none; border-bottom: none; } .main>span:nth-last-child(3) { flex: 1; } .top { padding: 20px 10px; background-color: lightgray; } .top span { display: inline-block; width: 14px;height: 14px; border-radius: 50%; } .top p { font-size: 40px; font-weight: 100; text-align: right; margin: 0;padding: 0; color: white; } .top>span:first-child { background-color: red; } .top>span:nth-child(2) { background-color: orange; } .top>span:nth-child(3) { background-color: green; } .main span:nth-child(10n),.main span:last-child { background-color: rgb(161, 204, 243); } </style> </head> <body> <div class="wrap"> <div class="top"> <span></span> <span></span> <span></span> <p>????????</p> </div> <div class="main"> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>?</span> <span>☕</span> <span>???</span> <span>?</span> <span>?</span> </div> </div> </body> </html>