AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

css 实现数字0-9

分类：Flex作者：编程之家原文地址

参考阮一峰老师的css flex布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

效果：

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>骰子</title>
</head>
<body>

    <div class="Box zero">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <div class="Box one">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="Box two">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>


    <div class="Box three">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>


    <div class="Box four">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
    </div>



    <div class="Box five">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <div class="Box six">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>


    <div class="Box seven">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
    </div>

    <div class="Box eight">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <div class="Box nine">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>

    </div>

</body>

<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: center;
        flex-wrap: wrap;
        align-content: center;
    }

    .Box {
        background-color: #bbbbbb;
        border: #d7d7d7 1px solid;
        border-radius: 10%;
        width: 100px;
        height: 100px;
    }

    .zero {
        display: flex;

        justify-content: space-between;
    }
    .zero .line {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .one {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;    /* 交叉轴对齐方式 */
    }

    .item {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
    }

    .two {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .two .line:nth-of-type(1), .two .line:nth-of-type(3), .two .line:nth-of-type(5){
        display: flex;
        justify-content: space-between;
    }
    .two .line:nth-of-type(2) {
        align-self: flex-end;
    }

    .two .line:nth-of-type(4) {
        align-self: flex-start;
    }

    .three {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .three .line:nth-of-type(1){
        display: flex;
        justify-content: space-between;
    }
    .three .line:nth-of-type(2), .three .line:nth-of-type(4) {
        align-self: flex-end;
    }
    .three .line:nth-of-type(3), .three .line:nth-of-type(5) {
        display: flex;
        justify-content: space-between;
    }


    .four {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .four .line:nth-of-type(1){
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .four .line:nth-of-type(2){
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .four .line:nth-of-type(3) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .four .line:nth-of-type(4) {
        display: flex;
        align-self: center;
    }
    .four .line:nth-of-type(5), .four .line:nth-of-type(6) {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .five {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .five .line:nth-of-type(1),.five .line:nth-of-type(3),.five .line:nth-of-type(5) {
        display: flex;
        justify-content: space-between;
    }
    .five .line:nth-of-type(2) {
        display: flex;
        align-self: flex-start;
    }
    .five .line:nth-of-type(4) {
        display: flex;
        align-self: flex-end;
    }


    .six {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .six .line:nth-of-type(1),.six .line:nth-of-type(3),.six .line:nth-of-type(5){
        display: flex;
        justify-content: space-between;
    }
    .six .line:nth-of-type(2){
        display: flex;
        align-self: flex-start;
    }
    .six .line:nth-of-type(4){
        display: flex;
        justify-content: space-between;
    }


    .seven{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .seven .line:nth-of-type(1){
        display: flex;
        justify-content: space-between;
    }
    .seven .line:nth-of-type(2), .seven .line:nth-of-type(3),.seven .line:nth-of-type(4),.seven .line:nth-of-type(5){
        display: flex;
        justify-content: flex-end;
    }

    .eight{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .eight .line{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .nine {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nine .line:nth-of-type(1),.line:nth-of-type(2),.nine .line:nth-of-type(3),.nine .line:nth-of-type(5){
        display: flex;
        justify-content: space-between;
    }
    .nine .line:nth-of-type(4){
        display: flex;
        justify-content: flex-end;
    }


</style>
</html>

 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是...
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner&qu...
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相...
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是...
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况...
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他...
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此…...
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><met...
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native