第十三届蓝桥杯（Web 应用开发）线上模拟赛第四题flex布局之筛子

VIP文章 weixin_46201450

已于 2022-04-08 00:31:14 修改

阅读量3.2k

点赞数 11

文章标签：前端蓝桥杯 css

于 2021-11-07 11:07:19 首次发布

本文链接：https://blog.csdn.net/weixin_46201450/article/details/121189004

版权

在这里插入图片描述

<!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{
     
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .div3{
     
            justify-content: space-around;
            align-items: center;
        }
        .div3>p:nth-child(1){
     
            align-self: flex-start;
        }

        .div3>p:nth-child(3){
     
            align-self: flex-end;
        }
        .div4{
     
            justify-content: space-around;
        }
        .div4>div{
     
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div5{
     
            justify-content: space-around;
        }
        .div5>div{
     
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div6{
     
            flex-direction: column;
            justify-content: space-around;
        }
        .div6>div{
     
            display: flex;
            justify-content: space-around;
        }
        .div7{
     
            flex-direction: column;
            justify-content: space-around;
        }
        .div7>div{
     
            display: flex;
            justify-content: space-around;
        }
        .div8{
     
            flex-direction: column;
            justify-content: space-between;
        }
        .div8>div{
     
            display: flex;
            justify-content: space-between;
        }
        .div9{
     
            flex-direction: column;
            justify-content: space-around;
        }
        .div9>div{
     
            display: flex;
            justify-content: space-around;
        }

        /*todo:请补全剩余骰子布局代码*/
    </style>
</head>

<body>
    <!--骰子1-->
    <div class=

最低0.47元/天解锁文章

weixin_46201450

关注

11
点赞
踩
32

收藏

觉得还不错? 一键收藏
3
评论
第十三届蓝桥杯（Web 应用开发）线上模拟赛第四题flex布局之筛子

<!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 { .
复制链接

扫一扫