利用flex布局实现骰子的点的分布

最新推荐文章于 2024-09-09 13:46:41 发布
最新推荐文章于 2024-09-09 13:46:41 发布
阅读量362 收藏 1
点赞数
分类专栏： 前端学习 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55786319/article/details/126970231
版权

效果图：
在这里插入图片描述
先将六个面的结构写出来

   <div class="box">
        <!--第一面-->
        <div>
            <span class="dot"></span>
        </div>
        <!--第二面-->
        <div>
            <span class="dot"></span><span class="dot"></span>
        </div>
        <!--第三面-->
        <div>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>
        <!--第四面-->
        <div>
            <span class="dot"></span><span class="dot"></span>
            <span class="dot"></span><span class="dot"></span>
        </div>
        <!--第五面-->
        <div>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <span class="dot"></span><span class="dot"></span>
        </div>  
        <!--第六面-->
        <div>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>       
    </div>

设置每个面的样式

.box>div{
            width:100px;
            height: 100px;
            border-radius: 13px;
            background-color: #fff;
            border: 1px solid gray;
            display: flex;
            padding: 4px;
            box-sizing: border-box;  /*表示设置的内边距是包括在width内的*/                
        }

box-sizing属性

content-box默认属性，标准盒子模型，width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）
border-boxwidth 和 height 属性包括内容，内边距和边框，但不包括外边距(margin)

设置骰子里的红点点的样式

.dot{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgb(207, 27, 27);
            box-shadow: 0 0 3px 1px rgb(231, 238, 244) inset;           
        }

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow必需。水平阴影的位置。允许负值。负值表阴影在左边，正为右
v-shadow必需。垂直阴影的位置。允许负值。负值表阴影在上边，正为下
blur可选，模糊距离
spread可选，阴影尺寸
color可选，阴影的颜色，默认为黑色
inset可选，将外部阴影变成内部阴影

h-shadow v-shadow正负值的记法：左上为负，右下为正。如果是内部阴影，就会反过来。

开始分别对骰子的点进行分布

		/*第一个骰子*/
        .box>div:nth-child(1){
            justify-content:center; /*在主轴上水平居中*/
            align-items:center;     /*在交叉轴上垂直居中*/
        }
        /*第二个骰子*/
        .box>div:nth-child(2){
            justify-content: space-between;  /*两端对齐*/
            flex-wrap: wrap;
        }        
        .box>div:nth-child(2)>.dot:nth-child(2){
            align-self: flex-end;
        }
        /*第三个骰子*/
        .box>div:nth-child(3)>.dot:nth-child(2){
            align-self: center;        
        }
        .box>div:nth-child(3)>.dot:nth-child(3){          
            align-self: flex-end;
        }
        /*第四个骰子*/
        .box>div:nth-child(4){
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        } 
        .box>div:nth-child(4)>.dot:nth-child(2){
            transform: translate(100%,200%);
        } 
        /*第五个骰子*/
		.box>div:nth-child(5){
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        .box>div:nth-child(5)>.dot:nth-child(2){
            transform: translateY(100%);
        }
        /*第六个骰子*/
        .box>div:nth-child(6){
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        }

第四五个骰子还有其他的方法布局，第六个很好同理，这里就不作说明。如下：

 <!-- 第四个骰子 -->
        <div>
            <div><span class="dot"></span><span class="dot"></span></div>
            <div><span class="dot"></span><span class="dot"></span></div>
        </div>

将左右两边的两个点竖着排列

/* 第四个骰子 */
        .box>div:nth-child(7){
            justify-content: space-between;
        }    
        .box>div:nth-child(7)>div:nth-child(1),.box>div:nth-child(7)>div:nth-child(2){
            display: flex;
            flex-direction: column; 
            /* 这里主轴变成了y轴，所以用justify-content */
            justify-content: space-between;
        }

<!-- 第五个骰子 -->
        <div>
            <div><span class="dot"></span><span class="dot"></span></div>
            <div><span class="dot"></span></div>
            <div><span class="dot"></span><span class="dot"></span></div>
        </div>

将第三个点居中，剩下四个点（上面两个、下面两个）两端对齐

/* 第五个骰子 */
        .box>div:nth-child(8){           
            align-content: space-between;
            flex-wrap: wrap;
        }
        .box>div:nth-child(8)>div:nth-child(2){
            display: flex;
            width: 100%;
            justify-content: center;
        }
        .box>div:nth-child(8)>div:nth-child(1),.box>div:nth-child(8)>div:nth-child(3){
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

将两边的两点竖着排列，再改变第三个点的自身位置

/* 第五个骰子 */
        .box>div:nth-child(9){
            justify-content: space-between;
        }
        .box>div:nth-child(9)>div:nth-child(1),.box>div:nth-child(9)>div:nth-child(3){
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .box>div:nth-child(9)>div:nth-child(2){
            display: flex;
        }
        .box>div:nth-child(9)>div:nth-child(2)>.dot{
            align-self: center;
        }

还有一种方法：

/* 第五个骰子 */
        .box>div:nth-child(10){
            flex-wrap: wrap;           
        }
        .box>div:nth-child(10)>div{
            display: flex;
            flex-basis: 100%;    
            /* 疑似水平铺满 */
            justify-content: space-between;
        }
        .box>div:nth-child(10)>div:nth-child(2){
            justify-content: center;
        }

在这里插入图片描述

全部代码如下：

<!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>Document</title>
    <style>
        .box{
            display: flex;
            justify-content: space-around;
        }
        .box>div{
            width:100px;
            height: 100px;
            border-radius: 13px;
            background-color: #fff;
            border: 1px solid gray;
            display: flex;
            padding: 4px;
            box-sizing: border-box;  /*表示设置的内边距是包括在width内的*/                
        }
        .dot{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgb(207, 27, 27);
            box-shadow: 2px 1px 6px 3px rgb(225, 134, 134) inset;           
        }
        /*第一个骰子*/
        .box>div:nth-child(1){
            justify-content:center; /*在主轴上水平居中*/
            align-items:center;     /*在交叉轴上垂直居中*/
        }
        /*第二个骰子*/
        .box>div:nth-child(2){
            justify-content: space-between;  /*两端对齐*/
            flex-wrap: wrap;
        }        
        .box>div:nth-child(2)>.dot:nth-child(2){
            align-self: flex-end;
        }
        /*第三个骰子*/
        .box>div:nth-child(3)>.dot:nth-child(2){
            align-self: center;        
        }
        .box>div:nth-child(3)>.dot:nth-child(3){          
            align-self: flex-end;
        }
        /*第四个骰子*/
        .box>div:nth-child(4){
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        } 
        .box>div:nth-child(4)>.dot:nth-child(2){
            transform: translate(100%,200%);
        }    
        /*第五个骰子*/
        .box>div:nth-child(5){
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        .box>div:nth-child(5)>.dot:nth-child(2){
            transform: translateY(100%);
        }
        /*第六个骰子*/
        .box>div:nth-child(6){
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        } 
        /* 第四个骰子 */
        .box>div:nth-child(7){
            justify-content: space-between;
        }    
        .box>div:nth-child(7)>div:nth-child(1),.box>div:nth-child(7)>div:nth-child(2){
            display: flex;
            flex-direction: column; 
            /* 这里主轴变成了y轴，所以用justify-content */
            justify-content: space-between;
        }
        /* 第五个骰子 */
        .box>div:nth-child(8){           
            align-content: space-between;
            flex-wrap: wrap;
        }
        .box>div:nth-child(8)>div:nth-child(2){
            display: flex;
            width: 100%;
            justify-content: center;
        }
        .box>div:nth-child(8)>div:nth-child(1),.box>div:nth-child(8)>div:nth-child(3){
            display: flex;
            width: 100%;
            justify-content: space-between;
        }
        /* 第五个骰子 */
        .box>div:nth-child(9){
            justify-content: space-between;
        }
        .box>div:nth-child(9)>div:nth-child(1),.box>div:nth-child(9)>div:nth-child(3){
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .box>div:nth-child(9)>div:nth-child(2){
            display: flex;
        }
        .box>div:nth-child(9)>div:nth-child(2)>.dot{
            align-self: center;
        }
        /* 第五个骰子 */
        .box>div:nth-child(10){
            flex-wrap: wrap;           
        }
        .box>div:nth-child(10)>div{
            display: flex;
            flex-basis: 100%;    
            /* 疑似水平铺满 */
            justify-content: space-between;
        }
        .box>div:nth-child(10)>div:nth-child(2){
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <!--第一面-->
        <div>
            <span class="dot"></span>
        </div>
        <!--第二面-->
        <div>
            <span class="dot"></span><span class="dot"></span>
        </div>
        <!--第三面-->
        <div>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>
        <!--第四面-->
        <div>
            <span class="dot"></span><span class="dot"></span>
            <span class="dot"></span><span class="dot"></span>
        </div>       
        <!--第五面-->
        <div>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <span class="dot"></span><span class="dot"></span>
        </div>  
        <!--第六面-->
        <div>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
        </div>      
        <!-- 第四个骰子 -->
        <div>
            <div><span class="dot"></span><span class="dot"></span></div>
            <div><span class="dot"></span><span class="dot"></span></div>
        </div>
        <!-- 第五个骰子 -->
        <div>
            <div><span class="dot"></span><span class="dot"></span></div>
            <div><span class="dot"></span></div>
            <div><span class="dot"></span><span class="dot"></span></div>
        </div>
        <!-- 第五个骰子 -->
        <div>
            <div><span class="dot"></span><span class="dot"></span></div>
            <div><span class="dot"></span></div>
            <div><span class="dot"></span><span class="dot"></span></div>
        </div>
        <!-- 第五个骰子 -->
        <div>
            <div><span class="dot"></span><span class="dot"></span></div>
            <div><span class="dot"></span></div>
            <div><span class="dot"></span><span class="dot"></span></div>
        </div>
    </div>
</body>
</html>
CSS布局之使用Flex布局画骰子（4点）
ThisEqualThis的博客
02-15 725
这次画4个点的骰子。大家可以先看图片默写代码，然后与文中代码做校验，来验证自己是否理解了Flex布局。默认情况下，当容器项目超出容器时，自动缩小项目以适应容器宽度，添加换行属性。若无基础，请优先阅读学习此文档。后恢复项目本来大小。
flex—骰子四点
qq_45920636的博客
07-05 321
flex—骰子四点
flex布局示例：骰子的制作
weixin_43748812的博客
12-11 1249
html代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
使用flex布局写出色子案例
weixin_75066187的博客
04-10 497
flex骰子实训案例，代码有点冗余感觉可以优化一下
flex布局实现骰子的6种布局
叶小桃的博客
06-13 1670
思路：首先是纵向布局flex-direction: column，并且主轴方向将其两端对齐justify-content: space-between（也就是上下靠边），然后将第二个子元素居中对齐align-self: center，第三个子元素靠后对齐align-self: end。整个页面分为6骰子的面，分别为点数1到6。点数1：典型的居中布局。
利用flex布局实现六个骰子
Roronna_Zoro的博客
01-24 1580
一、初步布局 1、我们先设立一个外部盒子用flex布局将子代居中 .father { display: flex; margin: 200px auto; border-top: 2px solid #828384; width: 1200px; height: 300px; justify-content: space-around; } 再使用亲代选择器设置骰子盒子css .father>di
网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
weixin_35545345的博客
06-15 1949
主要是利用flex的一些特性来写的，掌握好flex基础，写出筛子的几个页面不是问题。推荐去我写的一个博客中有flex的小练习 线上练习flex布局htmlcss.shaizi {width: 1400px;height: 600px;margin: auto;border: 2px solid #ddd;border-radius: 10px;padding: 20px;display: flex...
利用Flex弹性布局实现与现实骰子五点
weixin_44550209的博客
03-31 1443
作者：李国林 可能对于很多初学者在学习网页的布局上常常想要搞出一些与其他人不一样的布局，但有的时候，总是做不出自己的风格，就像梦想很美好，现实很残酷那样，所以今天，我发的这个是与以前的传统布局相比，flex布局可能对您有点好处，当然有一些人用惯了传统的布局方式，那也看你的喜欢。PS：之所以用这个标题是因为我用了以下的flex弹性布局做了个骰子。 开发工具：DW 代码：源代码： ...
flex详解以及利用flex进行骰子布局
darabiuz的博客
01-22 1195
1.flex内容详解 请移步致张鑫旭大牛的博客：flex布局 重点是要明白 flex布局由容器和子项构成 作用在容器和子项上分别有不同的属性，了解每个属性的含义 2.利用flex布局实现筛子效果 效果图如下： 附上源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
flex布局小案例——制作骰子
super码力的博客
11-08 4883
制作点数一到六的骰子，看了这篇还不会制作骰子，欢迎私信！制作骰子首先需要学会flex的基础原理
flex 画骰子六面
weixin_38122772的博客
08-12 522
// html <div class="box1"> <span></span> </div> // less .box1 { display: flex; align-items: center; justify-content: center; } // html <div class="box2"> &l...
html css网页制作成品
A_aspectJ的博客
09-06 522
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的clss属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。
CSS之我不会
m0_51492817的博客
09-05 968
作用：选择页面上的某一个后者某一类元素。
HTML、CSS实现树状图
p_s_p的博客
09-09 457
【代码】HTML、CSS实现树状图。
CSS基础
最新发布
qq_40107571的博客
09-09 414
CSS基础
【CSS】尺寸单位
衣乌安、随笔
09-06 281
对于电脑显示器，px 通常与屏幕的物理像素相对应，但这也会受到屏幕分辨率和缩放设置的影响。例如，在标准分辨率（通常为 96 DPI 左右）的显示器上，1 px 大约等于 1/96 英寸。由于移动设备具有不同的屏幕密度（例如标准密度、高密度、超高密度等），同样的 px 值在不同密度的屏幕上显示的物理尺寸会有所不同。通常，DPI 的值越高，图像的清晰度和细节就越丰富。在 CSS 中，font-size: 50% 表示字体大小为父元素字体大小的 50%。在不同的设备上，px 对应的物理尺寸并不固定。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1678
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2026
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
使用flex实现骰子的五点布局
09-09
使用Flex布局实现骰子的五点布局可以通过以下步骤进行： 1. 创建HTML结构： ```html <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot">...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值