<!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. 阿里巴巴云原生混部系统 Koordinator 正式开源

    ​简介: 脱胎于阿里巴巴内部,经过多年双 11 打磨,每年为公司节省数十亿的混部系统 Koordinator 今天宣布正式开源.通过开源,我们希望将更好的混部能力.调度能力开放到整个行业,帮助企业客户 ...

  2. Kubernetes 稳定性保障手册 -- 极简版

    简介: Kubernetes 在生产环境中的采用率越来越高,复杂度越来越高,由此带来的稳定性保障的挑战越来越大. Kubernetes 在生产环境中的采用率越来越高,复杂度越来越高,由此带来的稳定性保 ...

  3. 十年再出发，Dubbo 3.0 Preview 即将在 3 月发布

    ​简介:随着Dubbo和HSF的整合,我们在整个开源的体系中更多地去展现了 HSF 的能力,能够让更多的人通过使用 Dubbo 像阿里巴巴之前使用 HSF 一样更好的构建服务化的系统. 2011 年, ...

  4. 10个Bug环环相扣，你能解开几个？

    ​简介:由阿里云云效主办的2021年第3届83行代码挑战赛已经收官.超2万人围观,近4000人参赛,85个团队组团来战.大赛采用游戏闯关玩儿法,融合元宇宙科幻和剧本杀元素,让一众开发者玩得不亦乐乎. ...

  5. C++ 多态与虚拟：Class 语法语义

    1.object与class:在object-oriented programming编程领域,对象(object)有更严格的定义.对象是由数据结构和用于处理该结构的过程(称为methods)组成的实 ...

  6. [FE] Quasar BEX 预览版指南

    BEX(Browser Extension)是 Quasar 基于同一套代码允许编译成浏览器扩展来运行,支持 Firefox & Chrome. 截止目前(2019/12/25), bex 模 ...

  7. 关于多个 Cookie 的分隔符这件事

    对于 Cookie 的处理上,我最近遇到一个问题,那就是如何分割 Cookie 的内容.有人说是使用逗号分割,有人说是使用分号分割,究竟用哪个才是对的?其实这个答案是需要分为两个过程,分别是请求和响应 ...

  8. Windows 窗口样式 什么是 WS_EX_NOREDIRECTIONBITMAP 样式

    我觉得我可以加入历史博物馆了,加入微软历史博物馆,本文也是和大家吹历史的博客 简单说这个 WS_EX_NOREDIRECTIONBITMAP 样式是 Win8 提供的,用来做画面图层混合的功能.什么是 ...

  9. 详解csrf（跨站请求伪造）

    1.什么是csrf (csrf攻击原理)? 用户正常访问A网站,A网站设置cookie被用户浏览器保存 用户不关闭浏览器,直接访问恶意网站,该恶意网站内隐藏式内嵌了A网站接口的请求链接 触发该请求链接 ...

  10. .Net 线程与锁

    一台服务器能运行多少个线程,大致取决于CPU的管理能力.CPU负责线程的创建.协调.切换.销毁.暂停.唤醒.运行等.一个应用程序中,必须有一个进程维持应用程序的运行环境,一个进程可同时有多个线程协作处 ...