<!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>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        section{
            width:100%;
            height:100%;
            /* 触发弹性盒子 */
            display:flex;
            /* 主轴对齐方式 */
            justify-content:space-around;
            /* 侧轴居中 */
            align-items:center;
            /* 换行 */
            flex-wrap:wrap;
        }
        div{
            width: 100px;
            height: 100px;
            background: #e7e7e7;
            padding: 4px;
            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
            border-radius: 10px;
        }
        span{
            display:block;
            width: 24px;
            height: 24px;
            background: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
            border-radius: 12px;
            margin: 4px;
        }
        p{
            background:red;
        }
        /* 第一个div */
            /* div:nth-child(1){
                display:flex;
            }
            div:nth-child(1) span{
                margin:auto;
            } */
        div:nth-child(1){
            display:flex;
            /* 主轴居中 */
            justify-content:center;
            /* 侧轴居中 */
            align-items:center;
        }
        /* 第二个div */
        div:nth-child(2){
            display:flex;
            /* 主轴两端对齐 */
            justify-content:space-between;
        }
        div:nth-child(2) span:nth-child(2){
            align-self:flex-end;
        }
        /* 第三个 */
        div:nth-child(3){
            display:flex;
            /* Y轴为主轴 */
            flex-direction:column;
            /* 主轴对齐 */
            justify-content:space-between;
        }
        div:nth-child(3) span:nth-child(2){
            align-self:center;
        }
        div:nth-child(3) span:nth-child(3){
            align-self:flex-end;
        }
        /* 第四个 */
        div:nth-child(4){
            display:flex;
            /* 主轴对齐方式 */
            justify-content:space-between;
        }
        div:nth-child(4) p{
            display:flex;
            /* 改变主轴方向 */
            flex-direction:column;
            /* 主轴两端对齐 */
            justify-content:space-between
        }
        /* 第五个 */
        div:nth-child(5){
            display:flex;
            justify-content:space-between;
        }
        div:nth-child(5) p{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        div:nth-child(5) p:nth-child(2){
            justify-content:center;
        }
    </style>
</head>
<body>
    <section>
        <div>
            <span></span>
        </div>
        <div>
            <span></span><span></span>
        </div>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <p>
                <span></span><span></span><span></span>
            </p>
            <p>
                <span></span><span></span><span></span>
            </p>
        </div>
        <div>
            <p>
                <span></span><span></span>
            </p>
            <p><span></span></p>
            <p>
                <span></span><span></span>
            </p>
        </div>
        <div></div>
    </section>
</body>
</html>

css制作骰子的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  7. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  8. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  10. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

随机推荐

  1. web常见的攻击方式有哪些？如何防御？

    一.是什么 Web攻击(WebAttack)是针对用户上网行为或网站服务器等设备进行攻击的行为 如植入恶意代码,修改网站权限,获取网站用户隐私信息等等 Web应用程序的安全性是任何基于Web业务的重要 ...

  2. 很强！4.7k star，推荐一款Python工具，可实现自动化操作！！

    1.介绍 在日常工作中,肯定会遇到一些重复性的工作,不管是点击某个按钮.写东西,打印东西,还是复制粘贴拷贝资料之类的,需要进行大量的重复操作.按键精灵大家都听说过,传统的方式,大家可以使用按键精灵将操 ...

  3. HL7消息结构

    HL7消息用于在不同的医疗保健系统之间传输电子数据,每个消息发送相关特定事件(例如患者入院)的信息.HL7消息采用人类可读格式,本节介绍HL7消息的内容以及HL7消息的组织方式. HL7消息由一个或多 ...

  4. 力扣598(java)-范围求和Ⅱ（简单）

    题目: 给你一个 m x n 的矩阵 M ,初始化时所有的 0 和一个操作数组 op ,其中 ops[i] = [ai, bi] 意味着当所有的 0 <= x < ai 和 0 <= ...

  5. 项目实战总结以及接入U-APM

    ​简介: 导致 App 性能低下的原因有很多,除去设备硬件和软件的外部因素,其中大部分是开发者错误地使用线.系统函数.编程范式.数据结构等导致的.即便是较有经验的程序员,也很难在开发时就能避免所有导致 ...

  6. 在 Dubbo3.0 上服务治理的实践

    ​简介: Dubbo 3.0 是在云原生背景下诞生的,使用 Dubbo 构建的微服务遵循云原生思想,能更好的复用底层云原生基础设施.贴合云原生微服务架构. Dubbo3.0 介绍 作者 | 十眠 自从 ...

  7. [FAQ] VsCode 同时多行编辑

      [多光标自定义编辑] 按住 alt 键,鼠标左键点击,出现多个光标. [批量选中匹配编辑] 鼠标选中字符,按快捷键 ctrl + shift + L,字符的右侧都出现光标,可同时编辑. Tool: ...

  8. [Trading] 专业交易: 专业交易员和散户交易员的不同, 什么是专业交易员

    专业交易员可能用的是公司的钱或者自己的钱 有基本工资支持,散户用的是自己的钱 没有人提供工资来做交易. 目标不同,专业交易员的目的是增长投资账户和获得奖金,散户大部分是为了提取盈利收入而无法增长投资账 ...

  9. 非技术 对以后各大应用功能与 AI 助手的思考

    本文记录我对于 AI 助手在未来给各大应用或网站或设备带来的影响的思考 结论:未来的各大应用或网站或者是设备,都不会出现满屏的眼花缭乱的功能,取代的是各自有一个专属的 AI 助手,通过 AI 助手与人 ...

  10. VisualStudio 在 DebuggerDisplay 的属性更改业务逻辑将会让调试和非调试下逻辑不同

    本文记录我写的逗比代码,我在 DebuggerDisplay 对应的属性的 get 方法上,在这个方法里面修改了业务逻辑,如修改界面元素,此时我在 VisualStudio 断点调试下和非断点调试下的 ...