web 弹性盒子做骰子

于 2022-08-06 09:28:25 发布
阅读量205 收藏 1
点赞数
文章标签： 前端 servlet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lkhyyds/article/details/126189492
版权

 .s1 {

            width: 110px;

            height: 105px;

            background-color: #f7f7f7;

            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;

            display: flex;

            justify-content: center;

            align-items: center;

            margin-left: 20px;

        }

        .s1 div {

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 50%;

        }

        /* 2 */

        .s2 {

            width: 110px;

            height: 105px;

            background-color: #f7f7f7;

            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;

            display: flex;

            justify-content: space-between;

            margin-left: 20px;

        }

        .s2 .s22 {

            display: flex;

            align-self: flex-end;

        }

        .s2 div {

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 50%;

        }

        /* 3 */

        .s3 {

            width: 110px;

            height: 105px;

            background-color: #f7f7f7;

            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;

            display: flex;

            justify-content: space-between;

            margin-left: 20px;

        }

        .s3 div {

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 50%;

        }

        .s3 .s33 {

            display: flex;

            align-self: flex-end;

        }

        .s3 .ss3 {

            display: flex;

            align-self: center;

        }

        /* 4 */

        .s4 {

            width: 110px;

            height: 105px;

            background-color: #f7f7f7;

            margin-left: 20px;

            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;

        }

        .s4 .ss44 {

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 50%;

        }

        .s4 {

            display: flex;

            justify-content: space-between;

        }

        .ss4 {

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }

        /* 5 */

        .s5 {

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 50%;

            display: flex;

            align-self: center;

        }

         /* 6 */

         .s6 {

            width: 110px;

            height: 105px;

            background-color: #f7f7f7;

            margin-left: 20px;

            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;

            display: flex;

            justify-content: space-around;

        }

        .s6 .ss66 {

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 50%;

        }

        .s6{

            display: flex;

            justify-content: space-between;

        }

        .ss6 {

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <!-- 1 -->

        <div class="s1">

            <div></div>

        </div>

        <!-- 2 -->

        <div class="s2">

            <div></div>

            <div class="s22"></div>

        </div>

        <!-- 3 -->

        <div class="s3">

            <div></div>

            <div class="ss3"></div>

            <div class="s33"></div>

        </div>

        <!-- 4 -->

        <div class="s4">

            <div class="ss4">

                <div class="ss44"></div>

                <div class="ss44"></div>

            </div>

            <div class="ss4">

                <div class="ss44"></div>

                <div class="ss44"></div>

            </div>

        </div>

        <!-- 5 -->

        <div class="s4">

            <div class="ss4">

                <div class="ss44"></div>

                <div class="ss44"></div>

            </div>

            <div class="s5"></div>

            <div class="ss4">

                <div class="ss44"></div>

                <div class="ss44"></div>

            </div>

        </div>

        <!-- 6 -->

        <div class="s6">

            <div class="ss6">

                <div class="ss66"></div>

                <div class="ss66"></div>

                <div class="ss66"></div>

            </div>

            <div class="ss6">

                <div class="ss66"></div>

                <div class="ss66"></div>

                <div class="ss66"></div>

            </div>

        </div>

    </div>

lkhyyds
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
蓝桥杯【页面布局】Flex 经典骰子布局（web应用开发）
m0_61631823的博客
12-16 1294
要求： 补全 index.html 文件空缺的 css 代码。 骰子 1：使用justify-content与align-items属性实现。 骰子 2：使用justify-content、flex-direction与align-items属性实现。 骰子 3：使用justify-content、align-self与align-items属性。 骰子 4、5、6、7、9 布局结构类似：使用justify-content、align-self、flex-directi...
HTML5生成骰子的页面
07-11
自己写的HTML5骰子的代码，希望大家喜欢
WebGUI:网页图形用户界面骰子
06-29
骰子 如何运行： 下载战争：Dice/artifacts/Dice.war 下载服务器： : 提取码头 将 Dice.war 移动到 {jetty base}\webapps 下载安装RabbitMQ服务器： : 运行RabbitMQ服务器 运行 start.jar: java -jar start.jar 转到 ==== Kosci 网页图形用户界面 马切伊·加韦乌 Łukasz Oliwa
蓝桥杯web：4【页面布局】Flex 经典骰子布局
weixin_51167834的博客
03-06 1264
背景介绍 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。 考试需求 补全 index.html 文件空缺的 css 代码。 骰子 1：使用justify-content与align-items属性实现。 骰子 2：使用justify-content、flex-direction与align-items属性实现。 骰子 3：使用justify-content、align-self与align-items...
html5掷骰子小游戏
06-10
一个html5小游戏，可以用来学习画布的一些基本操作以及js的一些操作
弹性布局实例骰子
03-28
弹性布局实例骰子
移动web开发实例flex布局案例源码
02-16
在现代Web开发中，Flex布局（Flexible Box Layout）已经成为创建响应式、动态和灵活的用户界面的首选方法，尤其在移动设备上。本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并...
DiceRoll：骰子滚动Web应用
02-16
DiceRoll是一款基于Web的骰子滚动应用，它利用JavaScript技术为用户提供在线掷骰子的功能。在Web开发领域，JavaScript是一种广泛使用的编程语言，主要用于增强网页的交互性。在这个项目中，我们主要关注JavaScript...
python 掷骰子决定做什么事情 示例
10-26
python 掷骰子决定做什么事情 示例
微信小程序掷骰子掷色子.zip
07-13
在这个“微信小程序掷骰子掷色子.zip”项目中，我们可以看到一个用于创建趣味性游戏的小程序示例，用户可以通过这个小程序体验在线掷骰子或掷色子的乐趣。 首先，我们需要理解微信小程序的基本结构。一个小程序由多...
html5入门游戏掷骰子
08-05
本源码是html5游戏开发入门的一个经典例子，采用面js面向对象，和html5绘图技术实现，对学习html5游戏开发入门有很大帮助
web实训第二天——骰子布局与小程序开发
weixin_40909604的博客
06-20 487
建立touzi.html与touzi.css .html代码 <!DOCTYPE html> <html> <head> <style> div{ float:left} </style> <title>骰子布局</title> <link rel="stylesheet" ...
html css做骰子,纯 CSS 制作摇骰子（随机结果）
weixin_30616309的博客
06-18 3501
大家好，我是 Steven。这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。素材准备首先，我们要准备一张图片：里面是骰子从一到六的面板，然后为了等下转骰子的时候看上去随机一点，这里我将一到六的顺序掉乱一下。HTML 的部分打开 CodePen 编辑器，在 HTML 的部分新增一个 ，class 是 dice。C...
网页实现掷骰子小游戏
qq_39207066的博客
07-23 6434
首先明确需求： 在网页正中间展示骰子，点数为一点，点击骰子，骰子旋转然后停留在随机点位上。再次点击骰子，骰子可以继续旋转并停留在随机点位上。 这里我们使用css3动画、3d旋转配合js实现效果 一，HTML结构 <body> <!-- span是点数 --> <div id="wrapper"&g...
网页HTML5制作flex布局骰子,CSS3的Flexbox骰子布局的实现及问题讲解
weixin_36057489的博客
06-15 670
本文中只是熟悉基本属性的用法，并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题，比如旧版本语法、供应商前缀、浏览器怪癖等：一、First Face我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现：CSS Code复制内容到剪贴板face-01{display:flex;justify-content:...
html简单骰子展示
是建威啊的博客
06-23 2331
html绘制骰子
html掷骰子游戏的代码,html5 canvas掷骰子（简单，学习基础canvas）
weixin_33171065的博客
05-31 637
置骰子游戏var cwidth = 400; //保存画布宽度和高度，用于擦除用var cheight = 300; ////骰子的位置和大小var diceX = 50;var diceY = 50;var diceWidth = 100;var diceHeight = 100;var diceXoff = diceWidth + 20; //第二个骰子偏移量var dotrad = 6; ...
【页面布局】Flex 经典骰子布局 第十三届蓝桥杯（Web 应用开发）线上模拟赛
Pulse的博客
12-02 597
第十三届蓝桥杯（Web 应用开发）线上模拟赛第4题
html实现3D骰子
帅气的鎏氓兔
09-03 8400
Document *{ margin: 0; padding: 0; } body{ overflow: hidden; } .box{ list-style: none; width: 300px; height: 300px; position: relative; margin: 100px auto; trans
弹性布局制作骰子布局
最新发布
12-15
以下是使用弹性布局制作骰子布局的示例代码： ```html .dice { display: flex; flex-wrap: wrap; width: 200px; height: 200px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; } ....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值