弹性布局理解及应用---骰子小案例

最新推荐文章于 2024-04-30 21:16:29 发布

小斯不斯

最新推荐文章于 2024-04-30 21:16:29 发布

阅读量1.3k

点赞数 3

文章标签：弹性布局

本文链接：https://blog.csdn.net/qq_42181069/article/details/80414660

版权

今天要给大家分享的是css3中非常重要的一个知识点-----弹性布局！！！

有多重要了，在PC端可能还看不出来有多好用，但是在移动端这个弹性布局会非常非常的好用

在给大家分享这个应用小案例之前，先把弹性布局的知识点给梳理一下：

7、案例：骰子的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        body {
            background-color: tomato;
        }

        ul {
            list-style: none;
            margin: 20px;
            padding: 0;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 20px;
            width: 150px;
            height: 150px;

            padding: 10px;
            box-sizing: border-box;

            float:left;
            display: flex;
        }

        li {
            width: 20px;
            height: 20px;
            background-color: #000;
            border-radius: 50%;
        }

        .ul1 {
            justify-content: center;
            align-items: center;
        }

        .ul2 {
            justify-content: space-around;
            align-items: center;
        }

        .ul3 {
            justify-content: space-around;
            padding: 20px;
        }

        .ul3 li:nth-child(2) {
            align-self: center;
        }

        .ul3 li:nth-child(3) {
            align-self: flex-end;
        }

        /* 第四个面 */
        .ul4 {
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .ul4 li {
            margin: 0px 20px;
        }

        /* 第五个面 */
        .ul5 {
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .ul5 li{
            margin: 0px 20px;
        }

        .ul5 li:nth-child(3) {
            margin: 0px 50px;
        }

        /* 第六个面*/
        .ul6 {
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .ul6 li{
            margin: 0px 20px;
        }
    </style>
</head>
<body>
    <h3>骰子的第1个面</h3>
    <ul class="ul1">
        <li></li>
    </ul>
    <h3>骰子的第2个面</h3>
    <ul class="ul2">
        <li></li>
        <li></li>
    </ul>
    <h3>骰子的第3个面</h3>
    <ul class="ul3">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h3>骰子的第4个面</h3>
    <ul class="ul4">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h3>骰子的第5个面</h3>
    <ul class="ul5">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h3>骰子的第6个面</h3>
    <ul class="ul6">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

10、弹性布局总结：

小斯不斯

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
弹性布局理解及应用---骰子小案例

今天要给大家分享的是css3中非常重要的一个知识点-----弹性布局！！！有多重要了，在PC端可能还看不出来有多好用，但是在移动端这个弹性布局会非常非常的好用在给大家分享这个应用小案例之前，先把弹性布局的知识点给梳理一下：7、案例：骰子的实现&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset=...
复制链接

扫一扫