移动端布局

最新推荐文章于 2024-09-02 10:28:14 发布

amynn

最新推荐文章于 2024-09-02 10:28:14 发布

阅读量254

点赞数 1

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

本文链接：https://blog.csdn.net/amynn/article/details/119597295

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

- 移动端布局

移动端布局

一.属性（弹性盒子）

在这里插入图片描述

<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%;
        }

效果

在这里插入图片描述

练习

一.题目一

在这里插入图片描述

二.题目二

在这里插入图片描述

amynn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端布局

文章目录移动端布局一.属性（弹性盒子）效果二.属性（弹性项目）效果移动端布局一.属性（弹性盒子）<body> <div class="main"> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> <div class="c4">
复制链接

扫一扫

专栏目录