弹性盒实现移动端上下固定布局效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小丸子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,  user-scalable=no">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {margin:0;padding:0;box-sizing: border-box;}

        ul,li {list-style: none;}

        a {text-decoration: none;}

        html,body {height:100%;}

        body {display: flex;flex-direction: column;}

        /*html {*/
        /*    font-size: 12px;*/
        /*}*/
        @media all and (max-width:320px) {
            html {
                font-size:12px;
            }
        }
        @media all and (min-width:321px) and (max-width:375px) {
            html {
                font-size:14px;
            }
        }
        @media all and (min-width:376px) {
            html {
                font-size:16px;
            }
        }

        header {
            background: #0dc441;
            height: 3.67rem;
            width:100%;
            display:flex;
            justify-content: center;
            align-items: center;
        }

        header span {
            display: block;
            width: 5.04rem;
            height:2rem;
            line-height: 2rem;
            background: #64d985;
            text-align: center;
            color:#fff;
            /*涉及到字体大小应该使用px*/
            font-size: 12px;
        }
        header span:nth-child(1) {
            border-radius: 1rem 0 0 1rem;
        }
        header span:nth-child(2) {
            border-radius: 0 1rem 1rem 0;
            background: #3dd067;
        }

        nav {
            height:2.95rem;
            border-bottom: 1px solid #d9d9d9;
            display:flex;
        }
        /*nav > ul {*/
        /*    display: flex;*/
        /*    !*justify-content: space-around;*!*/
        /*}*/
        nav > li {
            flex:1;
            height:2.95rem;
            text-align: center;
            line-height: 2.95rem;
            font-size: 14px;
            color:#666666;
        }

        nav > li:nth-child(1) {
            color:#0dc441;
            border-bottom: 2px solid #0dc441;
        }

        main {
            flex:1;
            background: lightblue;
            overflow: auto;
        }

        section {
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        section figure {
            width: 49%;
            border:1px solid #e5e5e5;
            margin-bottom: 0.41rem;
        }

        section figure img {
            width: 100%;
        }

        section figure figcaption {
            height: 2.46rem;
            border-top:1px solid #e5e5e5;
            text-align: center;
            line-height: 2.46rem;
            font-size: 12px;
        }
        footer {
            height:3.67rem;
            display: flex;
            padding:0 1.25rem;
            justify-content: space-between;
        }

        footer div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        footer div i{
            font-size: 1.33rem !important;
            color:#d6d6d6;
        }

        footer div span {
            font-size: 12px;
            color:#d6d6d6;
        }

        footer div:nth-of-type(3) {
            width: 4.37rem;
            position: relative;
        }

        footer div:nth-of-type(3) img {
            width: 100%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <span>热点</span>
        <span>关注</span>
    </header>

    <nav>
<!--       <ul>-->
           <li>足球现场</li>
           <li>足球生活</li>
           <li>足球美女</li>
<!--       </ul>-->
    </nav>

    <main>
        <section>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
            <figure>
                <img src="./images/img_03.jpg" alt="">
                <figcaption>小丸子吃丸子....</figcaption>
            </figure>
        </section>
    </main>
    <footer>
        <div>
            <i class="iconfont icon-home"></i>
            <span>首页</span>
        </div>
        <div>
            <i class="iconfont icon-fangdajing"></i>
            <span>发现</span>
        </div>
        <div>
            <img src="./images/img_03.png" alt="">
        </div>
        <div>
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </div>
        <div>
            <i class="iconfont icon-tuichu1"></i>
            <span>退出</span>
        </div>
    </footer>
</body>
</html>

posted @ 2023-05-05 13:22  JackieDYH  阅读(24)  评论(0)  编辑  收藏  举报  来源