利用弹性盒子写骰子

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量117 收藏
点赞数 1
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61590561/article/details/132863678
版权

整体效果图：

骰子1点

HTML部分：

<div class="box1 box">

            <div class="text"></div>

 </div>

CSS部分：

.box {

            width: 95px;

            height: 95px;

            background-color: white;

            border-radius: 30px;

            display: flex;

            padding: 15px;

        }

        .box1 {

            justify-content: center;

            align-items: center;

        }

        .text {

            width: 25px;

            height: 25px;

            border-radius: 50%;

            background-color: black;

        }

PS：上面的部分类名是公共的，所以下面的代码就不展示公共的CSS了

骰子2点

HTML部分：

<div class="box2 box">

            <div class="text"></div>

            <div class="a text"></div>

        </div>

CSS部分：

.box2 {

            justify-content: space-between;

        }

        .box2 .a {

            align-self: flex-end;

        }

骰子3点

HTML部分：

<div class="box3 box">

            <div class="text"></div>

            <div class="a text"></div>

            <div class="b text"></div>

        </div>

CSS部分：

.box3 {

            justify-content: space-between;

        }

        .box3 .a {

            align-self: center;

        }

        .box3 .b {

            align-self: flex-end;

        }

骰子4点

HTML部分：

<div class="box4 box">

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

CSS部分：

.box4 {

            align-content: space-between;

            flex-wrap: wrap;

        }

        .box4 .a {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: space-between;

        }

骰子5点

HTML部分：

<div class="box5 box">

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="b">

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

        </div>

CSS部分：

.box5 {

            align-content: space-between;

            flex-wrap: wrap;

        }

        .box5 .a {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: space-between;

        }

        .box5 .b {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: center;

        }

骰子6点

HTML部分：

<div class="box6 box">

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

        </div>

CSS部分：

.box6 {

            align-content: space-between;

            flex-wrap: wrap;

        }

        .box6 .a {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: space-around;

        }

以上就是本文全部内容，会在下面附上全部代码，有需要自取

<!--

 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git

 * @Date: 2023-09-13 17:38:29

 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git

 * @LastEditTime: 2023-09-13 19:47:23

 * @FilePath: \一阶段c:\Users\21198\Desktop\骰子.html

 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .big {

            width: 100%;

            height: 1000px;

            background-color: black;

            display: flex;

            justify-content: space-around;

            align-items: center;

            margin: 0 auto;

        }

        .box {

            width: 95px;

            height: 95px;

            background-color: white;

            border-radius: 30px;

            display: flex;

            padding: 15px;

        }

        .box1 {

            justify-content: center;

            align-items: center;

        }



 

        .text {

            width: 25px;

            height: 25px;

            border-radius: 50%;

            background-color: black;

        }

        .box2 {

            justify-content: space-between;

        }



 

        .box2 .a {

            align-self: flex-end;

        }

        .box3 {

            justify-content: space-between;

        }

        .box3 .a {

            align-self: center;

        }

        .box3 .b {

            align-self: flex-end;

        }

        .box4 {

            align-content: space-between;

            flex-wrap: wrap;

        }

        .box4 .a {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: space-between;

        }


 

        .box5 {

            align-content: space-between;

            flex-wrap: wrap;

        }

        .box5 .a {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: space-between;

        }

        .box5 .b {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: center;

        }


 

        .box6 {

            align-content: space-between;

            flex-wrap: wrap;

        }

        .box6 .a {

            width: 95px;

            height: 25px;

            display: flex;

            justify-content: space-around;

        }

    </style>

</head>

<body>

    <div class="big">

        <div class="box1 box">

            <div class="text"></div>

        </div>

        <div class="box2 box">

            <div class="text"></div>

            <div class="a text"></div>

        </div>

        <div class="box3 box">

            <div class="text"></div>

            <div class="a text"></div>

            <div class="b text"></div>

        </div>

        <div class="box4 box">

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

        </div>

        <div class="box5 box">

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="b">

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

        </div>

        <div class="box6 box">

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

            <div class="a">

                <div class="text"></div>

                <div class="text"></div>

            </div>

        </div>

    </div>

</body>

</html>

m0_61590561
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
弹性盒写6个骰子面
hh1929的博客
01-20 2414
提示：代码可能有大量重复 利用弹性盒的几个属性实现骰子的位置  不使用浮动 定位等方式 主要有justify-content属性 和 align-items属性  介绍一下 首先开启一个弹性盒 默认的是X轴为主轴 主轴对其方式 justify-content 默认值是flex-star  flex-end center  这三个是弹性盒里面的所有元素在一起的 还有space-betwe...
利用Flex弹性布局实现与现实骰子五点
weixin_44550209的博客
03-31 1415
作者：李国林 可能对于很多初学者在学习网页的布局上常常想要搞出一些与其他人不一样的布局，但有的时候，总是做不出自己的风格，就像梦想很美好，现实很残酷那样，所以今天，我发的这个是与以前的传统布局相比，flex布局可能对您有点好处，当然有一些人用惯了传统的布局方式，那也看你的喜欢。PS：之所以用这个标题是因为我用了以下的flex弹性布局做了个骰子。 开发工具：DW 代码：源代码： ...
利用css实现骰子布局
2301_78101696的博客
05-12 220
在css中利用弹性盒实现骰子布局：
弹性盒——利用弹性盒特性制作筛子
Agress726901的博客
02-24 506
弹性盒--利用弹性盒特性做筛子
Flex弹性盒子布局实现骰子6点
彭世瑜的博客
09-28 4787
1、基础样式 h2{ text-align: center; } .main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between; } .container{ display: flex; width: 320px; heigh...
弹性布局做骰子布局
最爱喝怡宝的博客
12-01 3411
使用弹性布局完成骰子 一点 到 九点 的布局；（七点和八点没写） 先做出基本样式： <style> /* 全局样式 */ *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } /* body背景颜色，让整个骰子居中显
14弹性盒子
m0_49788155的博客
10-29 196
14弹性盒子 一、弹性盒子介绍 是一种新的布局模式，让元素有能力控制元素的排列方式，常用于移动端的布局 display:flex; 将元素设置为弹性盒子，该元素变为一个行内块元素 设置了弹性盒子的子元素的 float:left; float:right; clear:left; clear:right; clear:both; vertical-align:top; vertical-align:middle; vertical-align:bottom; 属性及属性值将会失效 二、容器上的属性 容
使用弹性盒实现多种常见布局
时光清浅处，一步一安然
06-28 285
使用弹性盒实现多种常见布局
弹性布局实例骰子
03-28
弹性布局实例骰子
微信小程序掷骰子掷色子.zip
07-13
在这个“微信小程序掷骰子掷色子.zip”项目中，我们可以看到一个用于创建趣味性游戏的小程序示例，用户可以通过这个小程序体验在线掷骰子或掷色子的乐趣。 首先，我们需要理解微信小程序的基本结构。一个小程序由多...
jQuery掷骰子动画特效
07-24
本项目"jQuery掷骰子动画特效"是利用jQuery的动画功能来实现一个模拟掷骰子过程的互动效果，具体表现为数字1到6的随机展示，如同真实的骰子投掷。 首先，我们要理解jQuery中的动画效果是如何工作的。jQuery提供了一...
VC写的简单掷骰子游戏
03-15
【标题】"VC写的简单掷骰子游戏"是一款基于Visual C++(VC)开发的桌面应用程序，使用MFC（Microsoft Foundation Classes）框架实现。MFC是微软提供的C++类库，它封装了Windows API，使得开发者能更方便地构建Windows...
HaskellDice:用Haskell写的骰子
04-03
用Haskell编写的命令行骰子。 就这样。 整个程序包含一个唯一的.hs文件（目前，它名为beta.hs ）。 但是，您可能需要先安装一些Haskell模块：请运行cabal install extra 。 您需要一个文件，其中包含要从中随机...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 595
仅对已定位的元素（）有效，默认值为0，可以为负值。
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 604
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 975
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1077
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
旋转木马案例
喵喵的博客
07-08 712
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
利用弹性盒写骰子布局
05-30
好的，让我来为您解答。 首先，我们需要一个容器元素，可以是`<div>`标签，然后将其设置为弹性容器，使用`display: flex`属性。 接下来，我们需要将子元素设置...这样，我们就实现了一个基于弹性盒子布局的骰子效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值