html5写骰子 css

最新推荐文章于 2024-11-08 10:53:54 发布
原创最新推荐文章于 2024-11-08 10:53:54 发布 · 1k 阅读
CC 4.0 BY-SA版权
文章标签：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 设置背景块和骰子的共同属性： */
    section,
    span {
        /* 设置为弹性盒子 */
        display: flex;
        /* 加边框：美观 */
        border: 2px solid black;
        /* 背景色：美观 */
        background-color: aquamarine;
        /* 设置为怪异盒子，即宽高不被margin和padding影响 */
        box-sizing: border-box;
        /* 设置圆角半径20px */
        border-radius: 20px;
    }

    /* 给section设置宽高 */
    section {
        width: 650px;
        height: 150px;
        /* 侧轴对齐方式：使得骰子垂直居中 */
        align-items: center;
        /* 主轴对齐方式 ：平均分*/
        justify-content:
            space-evenly;
        /* 补充易混点：
            1.space-between:紧贴父元素两边，平均分布
            2.space-around:每个子元素有固定的边距进行分布
        */
    }

    /* span为骰子容器 */
    span {
        width: 100px;
        height: 100px;
        display: flex;
        background-color: pink;
        /* 让骰子中的子元素在容器里贴边平均分布开 */
        justify-content: space-between;
        padding: 5px;
    }

    /* 骰子的子元素：小点 */
    b {
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 100%;
    }

    /* 给第一个骰子设置小点的位置 */
    span:nth-child(1) {
        /* 主轴水平 */
        justify-content: center;
        /* 侧轴垂直 */
        align-items: center;
    }

    /* 给第二个骰子设置第二个小点的位置，因为第一个点的位置默认就是在左上 */
    span:nth-child(2) b:nth-child(2) {
        align-self: flex-end;
    }

    /* 给第三个骰子设置第二个小点的位置 ，因为在最前面已经设置过span内的元素space-between:贴边平均分布了，所以只需要设置中间的点居中和第三个点垂直方向（align-self）为flex-end*/
    span:nth-child(3) b:nth-child(2) {
        align-self: center;
    }

    span:nth-child(3) b:nth-child(3) {
        align-self: flex-end;
    }

    /* 第四个点分两组，i为分组，首先给i设置主轴方向是竖着的（colmun）他，再给主轴对齐方式设置贴边对齐 */
    i {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* 第五个骰子，只需要设置中间的第二个分组为居中对齐，可以用子类的align-self直接设置居中,
这里如果误用为align-items效果不会显示的，align-items是针对i起效果的，而i的侧轴方向现在是横着的，因为在上面一个代码中给i设置了主轴为竖着，所以现在i的侧轴就是横着的*/
    span:nth-child(5) i:nth-child(2) {
        align-self: center;
    }
</style>

<body>
    <section>
        <span>
            <b></b>
        </span>
        <span>
            <b></b>
            <b></b>
        </span>
        <span>
            <b></b>
            <b></b>
            <b></b>
        </span>
        <span>
            <i>
                <b></b>
                <b></b>
            </i>
            <i>
                <b></b>
                <b></b>
            </i>
        </span>
        <span>
            <i>
                <b></b>
                <b></b>
            </i>
            <i>
                <b></b>
            </i>
            <i>
                <b></b>
                <b></b>
            </i>
        </span>
        <span>
            <i>
                <b></b>
                <b></b>
                <b></b>
            </i>
            <i>
                <b></b>
                <b></b>
                <b></b>
            </i>

        </span>
    </section>
</body>

</html>