移动端布局

最新推荐文章于 2025-04-18 11:39:51 发布

amynn

最新推荐文章于 2025-04-18 11:39:51 发布

阅读量274

点赞数 1

分类专栏： js 文章标签： css3 js

本文链接：https://blog.youkuaiyun.com/amynn/article/details/119597295

版权

js 专栏收录该内容

6 篇文章

订阅专栏

文章目录

- 移动端布局

移动端布局

一.属性（弹性盒子）

在这里插入图片描述

<body>
    <div class="main">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
    </div>
</body>

.main {
    width: 400px;
    height: 700px;
    background-color: blue;
    /* 弹性盒子 */
    display: flex;
    /* 主轴是x,左右 */
    /* flex-direction: row;*/
    flex-wrap: nowrap;
    flex-flow: row wrap;
    justify-content: center;
    /* align-items: flex-start; */
    align-content: flex-start;
}

.c1 {
    /* 弹性项目 */
    width: 100px;
    height: 100px;
    background-color: red;
}

.c2 {
    /* 弹性项目 */
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.c3 {
    /* 弹性项目 */
    width: 100px;
    height: 100px;
    background-color: green;
}

.c4 {
    /* 弹性项目 */
    width: 200px;
    height: 100px;
    background-color: black;
}

效果

在这里插入图片描述

二.属性（弹性项目）

在这里插入图片描述

效果

在这里插入图片描述

三.图文混排+滑动效果

代码

<body>
    <div class="top">
        <ul>
            <li>
                <img src="/img/购物车.png" alt="">
                <span>头部米面</span>
            </li>
            <li><img src="/img/购物车.png" alt="">
                <span>粮油米面</span>
            </li>
            <li><img src="/img/购物车.png" alt="">
                <span>粮油米面</span>
            </li>
            <li><img src="/img/购物车.png" alt="">
                <span>粮油米面</span>
            </li>
            <li><img src="/img/购物车.png" alt="">
                <span>粮油米面</span>
            </li>
            <li><img src="/img/购物车.png" alt="">
                <span>粮油米面</span>
            </li>
            <li><img src="/img/购物车.png" alt="">
                <span>尾部米面</span>
            </li>
        </ul>
    </div>
    <div class="main"></div>
    <div class="bottom"></div>
</body>

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

html {
    font-size: 16px;
}

.top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(0, 255, 13);
}

.top ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    /* justify-content: space-around; */
    flex-wrap: nowrap;
    /* overflow: auto; */
    overflow-x: scroll;
    overflow-y: hidden;
}

.top ul li {
    width: 18%;
    height: 100%;
    background-color: rgb(183, 0, 255);
    display: flex;
    /* 主轴是y */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.top ul li img {
    width: 68%;
    height: auto;
}

.main {
    position: fixed;
    width: 100%;
    height: 400px;
    top: 100px;
    left: 0;
    background-color: rgb(255, 0, 128);
}

.bottom {
    position: fixed;
    width: 100%;
    height: 200px;
    top: 500px;
    left: 0;
    background-color: blue;
}

效果

在这里插入图片描述

框架

  * {
            margin: 0;
            padding: 0;
        }

        html {
            /* 100/(量出来的值/200) */
            font-size: 16.10vw;
        }

        body {
            font-size: 16px;
        }

        .top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            /* (量出来/200) */
            height: 1.33rem;
            width: 100%;
            background-color: burlywood;
        }

        .main {
            position: fixed;
            top: 1.33rem;
            height: 8.955rem;
            width: 100%;
            background-color: blue;
        }

        .buttom {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 1.235rem;
            background-color: aquamarine;
            width: 100%;
        }