<!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. CPU静默数据错误：存储系统数据不丢不错的设计思考

    简介: 对于数据存储系统来说,保障数据不丢不错是底线,也是数据存储系统最难的部分.据统计,丢失数据中心10天的企业,93%会在1年内破产.那么如果想要做到数据不丢不错,我们可以采取怎样的措施呢? 作者 ...

  2. 如何用 Nacos 构建服务网格生态

    ​简介: Nacos 在阿里巴巴起源于 2008 年五彩石项目(该项目完成微服务拆分和业务中台建设),成长于十年的阿里双十一峰值考验,这一阶段主要帮助业务解决微服务的扩展性和高可用问题,解决了百万实例 ...

  3. [FAQ] eggjs/egg 自定义 favicon.ico

      从  egg 项目配置里找到这一段代码: https://github.com/eggjs/egg/blob/master/config/config.default.js#L205C21-L20 ...

  4. dotnet 6 修复在 System.Text.Json 使用 source generation 源代码生成提示 SYSLIB1032 错误

    在 dotnet 6 内置了通过源代码生成的方式进行序列化 JSON 对象,性能非常高.使用的时候需要将 Json 序列化工具类换成 dotnet 运行时自带的 System.Text.Json 进行 ...

  5. WPF 将控件放入到 UserControl 里获取 HwndSource 为空的情况

    本文记录将 WPF 控件放入到 UserControl 里,如果此 UserControl 没有被设置 Visibility 为可见过,那么放在此 UserControl 内的控件将获取不到 Hwnd ...

  6. Etcd 可视化管理工具，GUI 客户端。

    Etcd Assistant--Etcd 可视化管理工具,GUI 客户端. 下载地址:http://www.redisant.cn/etcd 主要功能: 支持多标签页,同时连接到多个集群 以漂亮的格式 ...

  7. 表和数据连接，而不是和表连接（JOIN）

    1.连接数据,但是顺序会受影响 在使用JOIN连接临时表或子查询时,无法保证结果的顺序与特定值的顺序完全一致.这是因为在查询过程中,数据库优化器可能会选择不同的执行计划,导致结果的顺序发生变化. SE ...

  8. 一个支持Sora模型文本生成视频的Web客户端

    大家好,我是 Java陈序员. 最近 Open AI 又火了一把,其新推出的文本生成视频模型 -- Sora,引起了巨大的关注. Sora 目前仅仅只是发布预告视频,还未开放出具体的 API. 今天, ...

  9. Rust中的并发性：Sync 和 Send Traits

    在并发的世界中,最常见的并发安全问题就是数据竞争,也就是两个线程同时对一个变量进行读写操作.但当你在 Safe Rust 中写出有数据竞争的代码时,编译器会直接拒绝编译.那么它是靠什么魔法做到的呢? ...

  10. 前端使用 Konva 实现可视化设计器（9）- 另存为SVG

    请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 另存为SVG 这一章增强了另存为的能力,实现" ...