CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
一点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;/* 容器内元素使用flex布局 */display: flex;/* 主轴居中对齐 */justify-content: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;/* align-self 写在子元素上，覆盖父元素指定的交叉轴对齐方式 */align-self: center;}</style></head><body><div class="box"><div class="point"></div></div></body>
</html>
两点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;/* 容器内元素使用flex布局 */display: flex;/* 主轴改为纵向 */flex-direction: column;/* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */justify-content: space-evenly;/* 交叉轴（横向）居中对齐 */align-items: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</style></head><body><div class="box"><div class="point"></div><div class="point"></div></div></body>
</html>
三点
简易版
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;/* 容器内元素使用flex布局 */display: flex;/* 主轴改为纵向 */flex-direction: column;/* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */justify-content: space-evenly;/* 交叉轴（横向）居中对齐 */align-items: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</style></head><body><div class="box"><div class="point"></div><div class="point"></div><div class="point"></div></div></body>
</html>
复杂版
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;padding: 10px;box-sizing: border-box;/* 容器内元素使用flex布局 */display: flex;/* 主轴（横向）相对均匀对齐（子元素间距相等，两端边缘间距为子元素间距的一半） */justify-content: space-between;}/* 第一个子元素，交叉轴默认起点对齐 */.point {border-radius: 50%;height: 20px;width: 20px;background: black;}.point:nth-child(2) {/* 第二个子元素，交叉轴居中对齐 */align-self: center;}.point:nth-child(3) {/* 第三个子元素，交叉轴终点对齐 */align-self: flex-end;}</style></head><body><div class="box"><div class="point"></div><div class="point"></div><div class="point"></div></div></body>
</html>
四点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;padding: 10px;box-sizing: border-box;/* 容器内元素使用flex布局 */display: flex;/* 将主轴改为纵向 */flex-direction: column;/* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */justify-content: space-evenly;}.row {/* 每行内元素使用flex布局 */display: flex;/* 主轴（横向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */justify-content: space-evenly;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</style></head><body><div class="box"><div class="row"><div class="point"></div><div class="point"></div></div><div class="row"><div class="point"></div><div class="point"></div></div></div></body>
</html>
五点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;padding: 10px 16px;box-sizing: border-box;/* 容器内元素使用flex布局 */display: flex;/* 将主轴改为纵向 */flex-direction: column;/* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */justify-content: space-evenly;}.row1 {/* 每行内元素使用flex布局 */display: flex;/* 主轴（横向）相对均匀对齐 */justify-content: space-between;}.row2 {/* 每行内元素使用flex布局 */display: flex;/* 主轴（横向）居中对齐 */justify-content: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</style></head><body><div class="box"><div class="row1"><div class="point"></div><div class="point"></div></div><div class="row2"><div class="point"></div></div><div class="row1"><div class="point"></div><div class="point"></div></div></div></body>
</html>
六点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-画骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;padding: 10px 16px;box-sizing: border-box;/* 容器内元素使用flex布局 */display: flex;/* 将主轴改为纵向 */flex-direction: column;/* 主轴（纵向）相对均匀对齐 */justify-content: space-between;}.row {/* 每行内元素使用flex布局 */display: flex;/* 主轴（横向）绝对均匀对齐 */justify-content: space-evenly;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</style></head><body><div class="box"><div class="row"><div class="point"></div><div class="point"></div></div><div class="row"><div class="point"></div><div class="point"></div></div><div class="row"><div class="point"></div><div class="point"></div></div></div></body>
</html>
相关文章：
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
一点 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>css flex布局-画骰子</title><sty…...
蓝桥集训之牛的学术圈 I
蓝桥集训之牛的学术圈 I 核心思想：二分 确定指数x后 判断当前c[i]是否>x(满足条件) 并记录次数同时记录 1后满足条件的个数最后取bns和m的最小值 为满足条件的元素个数ansbns为当前指数x下 满足条件的元素个数 #include <iostream>#include <cstring…...
软件设计师软考题目解析21 --每日五题
想说的话：要准备软考了。0.0，其实我是不想考的，但是吧，由于本人已经学完所有知识了，只是被学校的课程给锁在那里了，不然早找工作去了。寻思着反正也无聊，就考个证玩玩。 本人github地址…...
python读写json文件详解
在Python中，可以使用json模块来读写JSON格式的文件。下面是一个详细的示例，演示了如何读写JSON文件： import json# 写入JSON文件 data {"name": "John","age": 30,"city": "New York" }…...
#include＜ros/ros.h＞头文件报错
快捷键 ctrl shift B 调用编译，选择:catkin_make:build）(要先在vscode上添加扩展：ros) 可以点击配置设置为默认，修改.vscode/tasks.json 文件 修改.vscode/tasks.json 文件，否则ros.h头文件会报错 内容修改为以下内…...
mybatis单表curd笔记（尚硅谷
Mybatis 11111ibatis和mybatis不同 查询文档mybatis的日志输出id赋值输入（向sql语句传入数据单个简单类型单个实体对象多个简单类型map类型 输出数据的指定单个简单类型单个实体类型输出map类型输出list输出类型主键回显（自增长类型主键回显（…...
在线重定义-操作步骤
第一步：验证表是否能被在线重定义 验证是否能按主键重定义（默认，最后一次参数可以不加） 1 2 3 4 begin --dbms_redefinition.can_redef_table(scott,tb_cablecheck_equipment_bak); dbms_redefinition.can_redef_table(scot…...
16：00面试，16：06就出来了，问的问题过于变态了。。。
从小厂出来，没想到在另一家公司又寄了。 到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到2月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...
基于dashscope在线调用千问大模型
前言 dashscope是阿里云大模型服务平台——灵积提供的在线API组件。基于它，无需本地加载大模型，通过在线方式访问云端大模型来完成对话。 申请API key 老规矩：要想访问各家云端大模型，需要先申请API key。 对于阿里云&#x…...
【Python】可变数据类型 不可变数据类型 || hash
🚩 WRITE IN FRONT 🚩 🔎 介绍："謓泽"正在路上朝着"攻城狮"方向"前进四" 🔎🏅 荣誉：2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…...
MySQL 篇-深入了解多表设计、多表查询
🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 多表设计概述 1.1 多表设计 - 一对多 1.2 多表设计 - 一对一 1.3 多表设计 - 多对多 2.0 多表查询概述 2.1 多表查询 - 内连接 2.2 多表查询 - 外连接 2.3 多表查…...
【Java】Spring的ReflectionUtils类常用方法学习笔记
目录 ReflectionUtils介绍 常用方法 访问字段 方法调用 处理回调 示例 脑容量不够了，以简单的小知识作为一天的结尾吧(悲 ReflectionUtils介绍 ReflectionUtils是Spring Framework中非常实用的一个工具类，为开发人员提供了简便的反射操作方法&am…...
内存函数详解
1. memcpy函数 void * memcpy ( void * destination, const void * source, size_t num ); 1.1 函数的功能，使用与注意事项 1. memcpy函数的作用是内存拷贝，即将source指向的空间中的num个字节拷贝到destination指向的空间中去，然后返回de…...
){kind=spacer}
事务(transaction)
事务，什么是事务，事务就是由单独单元的一个或多个sql语句组成，在这个单元中，每个sql语句都是相互依赖的。而整个单独单元是作为一个不可分割的整体存在，类似于物理当中的原子（一种不可分割的最小单位&#…...
Linux之cd、pwd、mkdir 命令
cd命令，切换目录 1）当Linux终端（命令行）打开的时候，会默认以用户的HOME目录作为当前的工作目录。 2）我们可以通过cd命令，更改当前所在的工作目录。 3）cd命令来自英文：C…...
【python高级编程教程】笔记（python教程、python进阶）第三节：（1）多态与鸭子类型（Polymorphism and Duck Typing）
参考文章1：【比刷剧还爽】清华大佬耗时128小时讲完的Python高级教程！全套200集！学不会退出IT界！ 参考文章2：清华教授大力打造的Python高级核心技术！整整100集，强烈建议学习（Python3…...
学习JAVA的第十五天（基础）
目录 数据结构 二叉树 二叉查找树 平衡二叉树 红黑树 Set系列集合 HashSet集合 LinkedHashSet集合 TreeSet集合 前言：学习JAVA的第十四天（基础）-CSDN博客 数据结构 二叉树 元素：结点&am…...
LVS四层负载均衡集群
简介 LVS（Linux Virtual Server）即Linux虚拟服务器，是由章文嵩博士主导的开源负载均衡项目，目前LVS已经被集成到Linux内核模块中。该项目在Linux内核中实现了基于IP的数据请求负载均衡调度方案，终端互联网用户从外部访…...
【pyinstaller打包记录】程序使用多进程，打包后，程序陷入死循环
简介 PyInstaller 是一个用于将 Python 程序打包成可执行文件（可执行程序）的工具。它能够将 Python 代码和其相关的依赖项（包括 Python 解释器、依赖的模块、库文件等）打包成一个独立的可执行文件，方便在不同环境中运行…...
MAC | linux | SSH 密钥验证
SSH密钥登陆过程 客户端通过ssh-keygen生成自己的公钥和私钥。手动将客户端的公钥放入远程服务器的指定位置。客户端向服务器发起 SSH 登录的请求。服务器收到用户 SSH 登录的请求，发送一些随机数据给用户，要求用户证明自己的身份。客户端收到服务器发来…...
Java实现Redis延迟队列：从原理到高可用架构
在现代分布式系统中，延迟队列是一种至关重要的组件。它允许我们将消息或任务放入队列，直到指定的延迟时间到达后才被消费。这种机制广泛应用于订单超时自动取消、支付后定时发送通知、任务重试等场景。 虽然RabbitMQ和RocketMQ等专业消息中间件都支持延迟…...
别再被MPU6050的偏航角坑了！手把手教你用MPU9250（或外接HMC5883L磁力计）彻底解决零飘问题
彻底解决MPU6050偏航角零飘：硬件升级与磁力计融合实战指南 在无人机、平衡车和机器人姿态控制领域，MPU6050曾是许多开发者的首选惯性测量单元(IMU)。这款经典的六轴传感器以低廉的价格和稳定的性能赢得了市场，但它的一个致命缺陷让无数工程师…...
无人机海上搜救数据集 海上搜救人员识别 违规游泳识别 无人艇自主导航数据集 海洋安全监控及水上救援预警等场景 深度学习yolo格式地10625期
海洋目标检测数据集 README 项目概述 本数据集聚焦于海洋场景下的目标识别与安全监测任务，为海上搜救、智能无人艇导航及海洋环境监控等领域提供高质量标注数据，助力海洋视觉感知技术的落地应用。核心数据信息维度内容数据类别共5类：船只、浮…...
Ostrakon-VL-8B与传统算法对比展示：在复杂背景下的菜品分割
Ostrakon-VL-8B与传统算法对比展示：在复杂背景下的菜品分割 不知道你有没有遇到过这样的烦恼：想给美食拍张照，结果背景里堆满了杂乱的餐具、餐巾纸，甚至还有手机和钥匙，想单独把菜品抠出来，用传统的修图工…...
APK Studio安全最佳实践：合规使用逆向工程工具
APK Studio安全最佳实践：合规使用逆向工程工具 【免费下载链接】apkstudio Open-source, cross platform Qt based IDE for reverse-engineering Android application packages. 项目地址: https://gitcode.com/gh_mirrors/ap/apkstudio 在移动应用开发与安全…...
保姆级避坑指南：用VMware ESXi 8.0给vCenter Server 8.0单独划个“家”（存储+网络配置详解）
VMware ESXi 8.0环境下的vCenter Server 8.0专属部署指南 在虚拟化环境中，vCenter Server作为整个VMware生态系统的"大脑"，其部署的稳定性和可靠性直接影响整个虚拟化平台的运行质量。本文将深入探讨如何在ESXi 8.0环境中为vCenter Server 8.0…...
银河麒麟V10 SP1下使用rsync实现多客户端定时数据备份（避坑指南）
银河麒麟V10 SP1多客户端数据同步全链路配置与优化实战 在IT运维工作中，数据备份如同氧气般不可或缺。想象一下，当数十台客户端设备同时运行时，如何确保关键业务数据能够安全、高效地集中备份？银河麒麟V10 SP1作为国产操作系统的…...
CAN FD通信中，如何用AUTOSAR配置搞定TDC和SSP？一个80% Offset的实战案例
CAN FD通信中AUTOSAR配置实战：TDC与SSP的80% Offset实现 在汽车电子领域，CAN FD（Controller Area Network Flexible Data-rate）正逐步取代传统CAN总线，成为车载网络的主流选择。随着数据传输速率提升至2Mbps甚至更高&a…...
s2-pro语音合成镜像快速上手：5分钟搞定专业级文字转语音
s2-pro语音合成镜像快速上手：5分钟搞定专业级文字转语音 1. 镜像简介与核心功能 s2-pro是Fish Audio开源的专业级语音合成模型镜像，能够将文本转换为自然流畅的语音。这个镜像特别适合需要快速部署文字转语音功能的开发者、内容创作者和企业用户。 1.…...
电脑PC下载SMART200PLC和SMART 触摸屏程序的方法
西门子S7-200smartPLC和smart触摸屏通过本笔记本下载程序时，笔记本和smart触摸屏需完成相应设置，即笔记本电脑和smart触摸屏需通过固定IP通信下载程序，设置方法如下，本文档设置之前默认已将电脑、PLC和触摸屏通过RJ45接口网线连接…...