flex实现骰(tou)子点数

news2024/11/23 22:28:39

文章目录

  • 效果演示
  • 分析思路
  • 代码实现

效果演示

在这里插入图片描述

分析思路

image-20240202213028669
5点需要使用margin进行移动点数。而6点的话,使用align-content: space-between; justify-content: space-between;就能实现,不过需要注意的是主轴为侧轴,dot的第二个要给padding才能实现每一列3个点。

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>骰子点数</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .wrapper {
        margin: 100px 100px;
        width: 800px;
        height: 500px;
        border-radius: 10px;
        background-color: #232323;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
      }

      .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #000;
      }

      .box-common {
        width: 100px;
        height: 100px;
        display: flex;
        background-color: #fff;
        padding: 4px;
        margin: 60px;
        border-radius: 8px;
      }
      /* 1点的写法 主轴与侧轴垂直 */
      .box1 {
        align-items: center;
        justify-content: center;
      }

      /* 2点的写法 主轴为侧轴 两端对齐 首尾对齐 */
      .box2 {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
      /* align-self子元素属性,控制自身的排列 */
      .dot2-1 {
        align-self: flex-start;
      }
      /* align-self子元素属性,控制自身的排列 */
      .dot2-2 {
        align-self: flex-end;
      }

      /* 3点的写法 */
      .box3 {
        justify-content: space-between;
      }
      .dot3-1 {
        align-self: flex-start;
      }
      .dot3-2 {
        align-self: center;
      }
      .dot3-3 {
        align-self: flex-end;
      }
      /* 4点写法 */
      .box4 {
        flex-wrap: wrap;
      }
      .dot4 {
        width: 50%;
        height: 50%;
        display: flex;
      }
      .dot4:nth-child(2) {
        justify-content: flex-end;
      }
      .dot4:nth-child(3) {
        align-items: flex-end;
      }
      .dot4:nth-child(4) {
        justify-content: flex-end;
        align-items: flex-end;
      }
      /* 5点写法 */
      .box5 {
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;
      }
      .dot5:nth-child(1) {
        margin-right: 40px;
      }
      .dot5:nth-child(3) {
        margin-left: 40px;
        margin-right: 40px;
        align-self: center;
      }
      .dot5:nth-child(4) {
        margin-right: 40px;
      }
      /* 6点写法 */
      .box6 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
      }
      .dot6:nth-child(2) {
        padding: 10px 0;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <!-- 一点 父容器,主轴居中,侧轴居中-->
      <div class="box1 box-common">
        <div class="dot"></div>
      </div>
      <!-- 二点 主容器主轴为侧轴,居中,每一个子项单独控制,第一个flex-start,第二个flex-end-->
      <div class="box2 box-common">
        <div class="dot dot2-1"></div>
        <div class="dot dot2-2"></div>
      </div>
      <!-- 三点 同2点写法一样,只不过中间的点是center-->
      <div class="box3 box-common">
        <div class="dot dot3-1"></div>
        <div class="dot dot3-2"></div>
        <div class="dot dot3-3"></div>
      </div>
      <!-- 四点 分为四个部分,嵌套两层flex盒子-->
      <div class="box4 box-common">
        <div class="dot4">
          <div class="dot"></div>
        </div>
        <div class="dot4">
          <div class="dot"></div>
        </div>
        <div class="dot4">
          <div class="dot"></div>
        </div>
        <div class="dot4">
          <div class="dot"></div>
        </div>
      </div>
      <!-- 5点写法 -->
      <div class="box5 box-common">
        <div class="dot5">
          <div class="dot"></div>
        </div>
        <div class="dot5">
          <div class="dot"></div>
        </div>
        <div class="dot5">
          <div class="dot"></div>
        </div>
        <div class="dot5">
          <div class="dot"></div>
        </div>
        <div class="dot5">
          <div class="dot"></div>
        </div>
      </div>
      <!-- 六点写法 -->
      <div class="box6 box-common">
        <div class="dot6">
          <div class="dot"></div>
        </div>
        <div class="dot6">
          <div class="dot"></div>
        </div>
        <div class="dot6">
          <div class="dot"></div>
        </div>
        <div class="dot6">
          <div class="dot"></div>
        </div>
        <div class="dot6">
          <div class="dot"></div>
        </div>
        <div class="dot6">
          <div class="dot"></div>
        </div>
      </div>
    </div>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2087290.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【功能自动化】自动识别测试用例

1.创建unitWebtours.py 将unitWebtours.py放在test文件夹下 unitWebtours.py 代码实现 from selenium import webdriver from selenium.webdriver.support.select import Select from time import sleep import unittestdriver Noneclass Webtours(unittest.TestCase):clas…

java写入word表格(poi-tl)

1.导入依赖 <!--poi-tl--> <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.0</version> </dependency>2.代码 自己创建模板。放在&#xff08;resource/file&#xff09;…

如何更改 Mac 上 Java 的默认版本?

优质博文&#xff1a;IT-BLOG-CN 第一次运行/usr/libexec/java_home -V将输出类似以下内容&#xff1a; Matching Java Virtual Machines (3): 1.8.0_05, x86_64: "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_05.jdk/Contents/Home 1.6.0_65-b14-4…

那么啥是MySQL集群技术捏

Mysql 集群技术 一 Mysql 在服务器中的部署方法 在企业中90%的服务器操作系统均为Linux 在企业中对于Mysql的安装通常用源码编译的方式来进行 官网&#xff1a;http://www.mysql.com 1.1 在Linux下部署mysql 1.1.1 安装依赖性&#xff1a; [rootmysql1 ~]# yum install c…

Windows通过网线连接开发板共享网络

Windows端 打开更开适配器选项右键WLAN–属性–共享 右键以太网–属性–Internet协议版本4(TCP/IPv4) 记住IP地址 开发板端 查看网卡 ifconfig设置IP在同一网段 ifconfig eth0 192.168.137.2 netmask 255.255.255.0设置网关 route add default gw 192.168.137.1配置DNS su…

Python-MNE-源空间和正模型03:自动源配准的方法

这个例子展示了如何使用coregistration函数通过脚本自动完成MEG-MRI的coregistration。一般情况下&#xff0c;该方法的结果与人工共配准的结果是一致的。 **但一定要注意&#xff1a;**协同配准的质量在很大程度上取决于受试者准备过程中收集的头形点(HSP)的质量和t1加权MRI的…

C语言重难点总结(1)-指针、二维数组、结构体(联合体、枚举)

本节内容 1.指针&#xff08;指针数组、数组指针&#xff09; 2.二维数组&#xff08;指针操作与二维数组&#xff09; 3.结构体、联合体、枚举 一、指针 1.什么是指针&#xff1f; 内存中字节的编号地址称为指针 2.指针的大小&#xff1f; 固定为四字节 3.指针变量的…

YOLOv8改进 | 注意力篇 | YOLOv8引入CBAM注意力机制

1.CBAM介绍 摘要&#xff1a;我们提出了卷积块注意力模块&#xff08;CBAM&#xff09;&#xff0c;这是一种用于前馈卷积神经网络的简单而有效的注意力模块。 给定中间特征图&#xff0c;我们的模块沿着两个独立的维度&#xff08;通道和空间&#xff09;顺序推断注意力图&…

Python | Leetcode Python题解之第384题打乱数组

题目&#xff1a; 题解&#xff1a; class Solution:def __init__(self, nums: List[int]):self.nums numsself.original nums.copy()def reset(self) -> List[int]:self.nums self.original.copy()return self.numsdef shuffle(self) -> List[int]:for i in range(l…

C++ | Leetcode C++题解之第383题赎金信

题目&#xff1a; 题解&#xff1a; class Solution { public:bool canConstruct(string ransomNote, string magazine) {if (ransomNote.size() > magazine.size()) {return false;}vector<int> cnt(26);for (auto & c : magazine) {cnt[c - a];}for (auto &am…

群晖(Docker Compose)配置 frp 服务

为了方便远程电脑&#xff0c;访问自己电脑上的ComfyUI等服务&#xff0c;配置了 frp 服务。 配置 frp 服务后&#xff0c;发现群晖中的一些服务也可以 stcp 安全的暴露出来。 直接在群晖通过 Docker Compose 方式部署 frps 和 frpc&#xff0c;访问者通过 frpc 安全访问暴露…

计算机三级网络第3套练习记背

计算机三级网络第3套练习记背

【C++ | 设计模式】抽象工厂模式的详解与实现

1. 概念 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;用于创建一系列相关或相互依赖的对象&#xff0c;而无需指定它们具体的类。它允许客户端代码通过工厂接口来创建一组对象&#xff0c;而无需了解它们的具体实现细节。 …

从暴力到秩序:解锁权力奥秘

从暴力到秩序&#xff1a;解锁权力奥秘 - 孔乙己大叔权力的诞生 在人类社会的最初形态中&#xff0c;权力往往源自最原始的力量——暴力。一个人&#xff0c;起初仅拥有一把枪&#xff0c;他的权力简单而直接&#xff1a;决定对谁开枪。然而&#xff0c;随着他利用这把…

【58同城-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

【Scala】Windows下安装Scala(全面)

目录 1.下载 2.安装 3.配置环境变量 1.新增系统环境变量 2.环境变量Path 4.验证 1.下载 官网下载地址&#xff1a;https://downloads.lightbend.com/scala/2.11.12/scala-2.11.12.msi 2.安装 双击下载的.msi文件&#xff1a; 勾选"I accept the terms in the Li…

Flink 1.14.* Flink窗口创建和窗口计算源码

解析Flink如何创建的窗口&#xff0c;和以聚合函数为例&#xff0c;窗口如何计算聚合函数 一、构建不同窗口的build类1、全局窗口2、创建按键分流后的窗口 二、在使用窗口处理数据流时&#xff0c;不同窗口创建的都是窗口算子WindowOperator1、聚合函数实现2、创建全局窗口(入参…

智能合约开发与测试1

智能合约开发与测试 任务一&#xff1a;智能合约设计 &#xff08;1&#xff09;编写新能源智能合约功能需求文档。 区块链新能源管理智能合约功能需求包括资产与能源绑定、用户管理、能源交易、智能结算等&#xff0c;确保安全性、隐私保护和可扩展性&#xff0c;提高能源利…

2024年第六届控制与机器人国际会议(ICCR 2024)即将召开!

2024年第六届控制与机器人国际会议&#xff08;ICCR 2024&#xff09;将于2024年12月5日至7日在日本横滨举行。智能机器人结合了多种概念、学科和技术&#xff0c;共同创造出各种有用的设备、操作器和自主实体&#xff0c;为特定人类社区服务&#xff0c;如制造设备、医疗和远程…

【练习】哈希表的使用

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;算法(Java)&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1.哈希表简介 2.两数之和 题目描述 题解 代码实现 2.面试题.判定是否…