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 登录的请求，发送一些随机数据给用户，要求用户证明自己的身份。客户端收到服务器发来…...
CANN/asc-devkit MrgSort合并排序函数
MrgSort 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言，原生支持C和C标准规范，主要由类库和语言扩展层构成，提供多层级API，满足多维场景算子开发诉求。 项目地址: https://gitcode.com/ca…...
stressapptest 参数解析源码详解：从命令行到内存测试的完整配置流程
StressAppTest 参数解析与源码实现：从命令行到内存测试的深度技术解析 在服务器硬件验证和系统稳定性测试领域，内存子系统的可靠性验证一直是工程师面临的核心挑战之一。StressAppTest（简称SAT）作为Google开源的一款专业级压力测试…...
新手必看：Infineon UDE软件License加载保姆级教程（含永久/临时版区别与常见报错解决）
Infineon UDE软件License配置全指南：从加载到深度排错 引言 在嵌入式开发领域，Infineon UDE（Universal Debug Engine）作为一款功能强大的调试工具，被广泛应用于汽车电子、工业控制等高可靠性场景。然而对于刚接触这款工…...
如何用Univer在3小时内构建企业级电子表格应用？5个实战技巧分享
如何用Univer在3小时内构建企业级电子表格应用？5个实战技巧分享 【免费下载链接】univer Build AI-native spreadsheets. Univer is a full-stack framework for creating and editing spreadsheets on both web and server. With Univer Platform, Univer Spreadsh…...
国自然最后冲刺：如何用ChatGPT把自查做到“零漏项”？
各位同仁好，我是七哥。一个在高校里从事人工智能相关领域研究，钻研用大模型AI实操的学术人。可以和七哥交流学术写作或Gemini、GPT、Claude等大模型学术实操相关问题，多多交流，相互成就，共同进步。 2026年是国自然改版元年，模板大变，旧套路失效，新坑又挖了不少。今天七…...
加速3DGS生成与数字孪生开发：不可错过的8款效率工具盘点
一、行业核心技术科普：3DGS数字孪生开发的工具链概览一个高效的3DGS数字孪生开发流程，离不开一套完整的工具链。从数据采集、模型生成、格式优化到应用开发与部署，每个环节都有其专用的工具。其域创新围绕“感知—重建—理解—创造”的技术路…...
ARM9老开发板救星：用BusyBox 1.7.0和4.3.2工具链构建根文件系统（避坑实录）
ARM9开发板重生指南：BusyBox 1.7.0与4.3.2工具链的黄金组合 当一块尘封多年的ARM9开发板重新出现在你面前，那种感觉就像考古学家发现了一件珍贵的文物。S3C2440这类老将虽然性能比不上现代Cortex-A系列，但在教学、工业控制等领域依然有不可替…...
【网络安全】2026最新网安渗透测试标准及流程！新手小白零基础入门必看教程！
✅一、了解渗透测试 🔴什么是渗透测试？ 渗透测试是一种安全性测试，通过发起模拟网络攻击的方式查找计算机系统中的漏洞。 渗透测试人员是拥有高超道德黑客技术的安全专业人员（道德黑客是指运用黑客工具和黑客技术来修复安全薄弱环…...
3个步骤让你的Mac原生支持200+视频格式预览
3个步骤让你的Mac原生支持200视频格式预览 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://gitcode.com/gh_mirrors/ql/Qu…...
从芯片到系统：手把手拆解汽车MCU里的安全硬件（SHE/HSE）与独立HSM如何协作
汽车MCU安全架构实战：SHE/HSE与独立HSM的协同设计指南 当一辆现代汽车启动时，从车门解锁到发动机控制，超过1亿行代码在数百个微控制器（MCU）上同时运行。这些代码中包含着价值连城的数字资产——车主的生物特征数据、自…...