css使用flex布局实现骰子1~6

最新推荐文章于 2024-09-18 09:47:26 发布

摇曳de瘋丶

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量1.4k

点赞数 2

文章标签： html css3

本文链接：https://blog.csdn.net/qq_37000055/article/details/115410995

版权

本文介绍了如何利用CSS3的Flex布局来实现一个可以展示1到6数字的骰子效果，详细讲解了HTML结构和CSS样式设置。

摘要由CSDN通过智能技术生成

css使用flex布局实现骰子1~6

效果

在这里插入图片描述

Html

<body>
    <div class='div1 border'>
        <span></span>
    </div>
    <div class='div2 border'>
        <span></span>
        <span></span>
    </div>
    <div class='div3 border'>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class='div4 border'>
        <div class='flex-row'>
            <span></span>
            <span></span>
        </div>
        <div class='flex-row'>
            <span