【页面布局】Flex 经典骰子布局第十三届蓝桥杯（Web 应用开发）线上模拟赛

最新推荐文章于 2022-08-09 00:00:13 发布

Pulseum

最新推荐文章于 2022-08-09 00:00:13 发布

阅读量594

点赞数

分类专栏：第十三届蓝桥杯Web模拟赛文章标签：前端

本文链接：https://blog.csdn.net/qq_53472371/article/details/121678121

版权

【页面布局】Flex 经典骰子布局

考试需求

解答：

index.html:

<!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 {
     
            /* width: 1024px; */
            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;
        }

        /*todo:请补全剩余骰子布局代码*/

        .div2 {
     
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

        .div3 {
     
            justify-content: space-around;
            /* flex-direction: column; */
            /* align-items: space-between; */
            padding: 10px;
        }

        .div03 {
     
            align-self: center;
        }

        .div003 {
     
            align-self: flex-end;
        }


        .div4 {
     
            display: flex;
            justify-content: space-around;
        }

        .div04 {
     
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .div5 {
     
            display: