<!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. .NET开源强大、易于使用的缓存框架 - FusionCache

    前言 缓存在程序中扮演着提升性能.降低资源消耗.改善用户体验等重要角色,是构建高效.可伸缩.稳定的系统不可或缺的重要组成部分.今天大姚给大家分享一款.NET开源(基于MIT license).强大.易 ...

  2. K8s集群nginx-ingress监控告警最佳实践

    本文分享自华为云社区<K8s集群nginx-ingress监控告警最佳实践>,作者:可以交个朋友. 一 背景 nginx-ingress作为K8s集群中的关键组成部分.主要负责k8s集群中 ...

  3. 【git】ignore文件详解

    1.功能 可以指定git,对于某些文件或者文件夹不进行追踪记录,例如一些依赖或者编译中间文件等. 2.使用注意 2.1 对于已经有提交记录的文件 对于已经提交的文件,即使加入了ignore文件也会被g ...

  4. 力扣396(java)-旋转数组（中等）

    题目: 给定一个长度为 n 的整数数组 nums . 假设 arrk 是数组 nums 顺时针旋转 k 个位置后的数组,我们定义 nums 的 旋转函数  F 为: F(k) = 0 * arrk[0 ...

  5. 技术解读：Dragonfly 基于 P2P 的智能镜像加速系统 | 龙蜥技术

    简介: 结合 Dragonfly 子项目 Nydus 进行按需加载可以最大限度提升镜像下载速度. 编者按:上世纪末期,基于 C/S 模式的思想,人们发展了 HTTP . FTP 等应用层协议.然而 C ...

  6. 基于 Mesh 的统一路由在海外业务的实践

    ​简介:本文主要介绍我们最近在利用 Service Mesh 架构解决海外业务问题中一些实践和价值探索.我们在海外业务引入 Mesh 架构过程中,充分利用 Istio 的基于 yaml 来描述和定义路 ...

  7. 这样才是代码管理和 Commit 的正确姿势! | 研发效能提升36计

    ​简介:效能提升从小习惯开始,这样才是代码管理和 Commit 的正确姿势! ​ 专栏策划|雅纯 志愿编辑|张晟 软件交付是以代码为中心的交付过程,其中代码的作用有几点:第一,最终的制品要交付成什么样 ...

  8. WebAssembly + Dapr = 下一代云原生运行时？

    简介: 云计算已经成为了支撑数字经济发展的关键基础设施.云计算基础设施也在持续进化,从 IaaS,到容器即服务(CaaS),再到 Serverless 容器和函数 PaaS (fPaaS 或者 Faa ...

  9. 解密 Dubbo 三大中心的部署架构

    ​简介:Dubbo作为一个微服务框架,Dubbo SDK与应用服务绑定在同一个进程内,它跟随着应用服务被部署在分布式集群各个位置,为了在分布式环境下实现各个应用服务间的协作, Dubbo 定义了一些中 ...

  10. 先行一步，7大技术创新和突破，阿里云把 Serverless 领域的这些难题都给解了

    ​简介: 函数计算 FC 首创 GPU 实例.业内首发实例级别可观测和调试.率先提供端云联调和多环境部署能力.GB 级别镜像启动时间优化至秒级.VPC 网络建连优化至200ms,Serverless ...