zoukankan      html  css  js  c++  java
  • 常用页面布局

    flex、媒体查询、rem

    <!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>
        html {
            font-size: 50px;
        }
        
        @media screen and (min- 320px) {
            html {
                font-size: 21.33333333px;
            }
        }
        
        @media screen and (min- 360px) {
            html {
                font-size: 24px;
            }
        }
        
        @media screen and (min- 375px) {
            html {
                font-size: 25px;
            }
        }
        
        @media screen and (min- 384px) {
            html {
                font-size: 25.6px;
            }
        }
        
        @media screen and (min- 400px) {
            html {
                font-size: 26.66666667px;
            }
        }
        
        @media screen and (min- 414px) {
            html {
                font-size: 27.6px;
            }
        }
        
        @media screen and (min- 424px) {
            html {
                font-size: 28.26666667px;
            }
        }
        
        @media screen and (min- 480px) {
            html {
                font-size: 32px;
            }
        }
        
        @media screen and (min- 540px) {
            html {
                font-size: 36px;
            }
        }
        
        @media screen and (min- 720px) {
            html {
                font-size: 48px;
            }
        }
        
        @media screen and (min- 750px) {
            html {
                font-size: 50px;
            }
        }
        
        body {
            min- 320px;
             15rem;
            margin: 0 auto;
            line-height: 1.5;
            font-family: Arial, Helvetica;
            background: #F2F2F2;
        }
        
        .container {
            display: flex;
            flex-flow: row wrap;
            background-color: rgb(178, 236, 112);
             16rem;
            height: 8rem;
        }
        
        .container .item1 {
            /* 是container儿子 同时还是item1_item的父亲 */
            display: flex;
            flex-flow: column;
            flex: 30%;
            background-color: cadetblue;
        }
        
        .container .item2 {
            display: flex;
            flex-flow: row wrap;
            flex: 70%;
            background-color: chocolate;
        }
        
        .item1 .item1_item {
            flex: 1;
            box-sizing: border-box;
            border: 0.02rem solid #F2F2F2;
            background-color: rgb(38, 230, 188);
        }
        
        .item2 .item2_item {
            box-sizing: border-box;
            flex: 25%;
            height: 50%;
            border: 0.02rem solid #F2F2F2;
        }
        
        .item2 div:nth-of-type(even) {
            background-color: rgb(219, 18, 79);
        }
        
        .item2 div:nth-of-type(odd) {
            background-color: rgb(219, 18, 79);
        }
    </style>
    
    <body>
        <div class="container">
            <div class="item1">
                <div class="item1_item">1-1</div>
                <div class="item1_item">1-2</div>
            </div>
            <div class="item2">
                <div class="item2_item">2-1</div>
                <div class="item2_item">2-2</div>
                <div class="item2_item">2-3</div>
                <div class="item2_item">2-4</div>
                <div class="item2_item">2-5</div>
                <div class="item2_item">2-6</div>
                <div class="item2_item">2-7</div>
                <div class="item2_item">2-8</div>
            </div>
        </div>
    </body>
    
    </html>
    

    flex、媒体查、rem

    <!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>
        html {
            font-size: 50px;
        }
        
        @media screen and (min- 320px) {
            html {
                font-size: 21.33333333px;
            }
        }
        
        @media screen and (min- 360px) {
            html {
                font-size: 24px;
            }
        }
        
        @media screen and (min- 375px) {
            html {
                font-size: 25px;
            }
        }
        
        @media screen and (min- 384px) {
            html {
                font-size: 25.6px;
            }
        }
        
        @media screen and (min- 400px) {
            html {
                font-size: 26.66666667px;
            }
        }
        
        @media screen and (min- 414px) {
            html {
                font-size: 27.6px;
            }
        }
        
        @media screen and (min- 424px) {
            html {
                font-size: 28.26666667px;
            }
        }
        
        @media screen and (min- 480px) {
            html {
                font-size: 32px;
            }
        }
        
        @media screen and (min- 540px) {
            html {
                font-size: 36px;
            }
        }
        
        @media screen and (min- 720px) {
            html {
                font-size: 48px;
            }
        }
        
        @media screen and (min- 750px) {
            html {
                font-size: 50px;
            }
        }
        
        body {
            min- 320px;
             15rem;
            margin: 0 auto;
            line-height: 1.5;
            font-family: Arial, Helvetica;
            background: #F2F2F2;
        }
        
        .container {
            display: flex;
            flex-flow: row wrap;
            background-color: rgb(178, 236, 112);
             15.8rem;
            height: 9.6rem;
        }
        
        .container .item1 {
            flex: 70%;
            background-color: rgb(38, 230, 188);
        }
        
        .container .item2 {
            display: flex;
            flex-flow: column nowrap;
            flex: 30%;
            background-color: rgb(219, 18, 79);
        }
        
        .item2 .item2_item {
            box-sizing: border-box;
            flex: 1;
            height: 33.33%;
            border: 0.02rem solid #F2F2F2;
        }
    </style>
    
    <body>
        <div class="container">
            <div class="item1"></div>
            <div class="item2">
                <div class="item2_item">2-1</div>
                <div class="item2_item">2-2</div>
                <div class="item2_item">2-3</div>
            </div>
        </div>
    </body>
    
    </html>
    

    响应式布局

    <!DOCTYPE html>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>
            .container {
                height: 150px;
                background-color: pink;
                margin: 0 auto;
            }
            /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
            
            @media screen and (max- 767px) {
                .container {
                     100%;
                }
            }
            /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
            
            @media screen and (min- 768px) {
                .container {
                     750px;
                }
            }
            /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
            
            @media screen and (min- 992px) {
                .container {
                     970px;
                }
            }
            /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
            
            @media screen and (min- 1200px) {
                .container {
                     1170px;
                }
            }
        </style>
    </head>
    
    <body>
        <!-- 响应式开发里面,首先需要一个布局容器 -->
        <div class="container"></div>
    </body>
    
    </html>
    

    流式布局

    <!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>
            * {
                margin: 0;
                padding: 0;
            }
            
            section {
                /* 宽度设置为百分比 */
                 100%;
                max- 980px;
                min- 320px;
                margin: 0 auto;
            }
            
            section div {
                /* 宽度设置为百分比 */
                float: left;
                 50%;
                height: 400px;
            }
            
            section div:nth-child(1) {
                background-color: pink;
            }
            
            section div:nth-child(2) {
                background-color: purple;
            }
        </style>
    </head>
    
    <body>
        <section>
            <div></div>
            <div></div>
        </section>
    </body>
    
    </html>
    

    flex 案例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BingNiter</title>
    </head>
    <style>
        html {
            font-size: 25px;
        }
        
        body {
            margin: 0 auto;
            padding: 0;
            min- 600px;
            box-sizing: border-box;
        }
        
        .flex_container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-flow: row wrap;
             1270px;
            height: 590px;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background: url(./images/bgc.webp) no-repeat;
            background-size: 100% auto;
        }
        
        .header_link {
            position: absolute;
            top: 0;
            left: 0;
             100%;
            height: 140px;
            display: block;
            z-index: 100;
            text-decoration: none;
        }
        
        .flex_items_left,
        .flex_items_right {
            box-sizing: border-box;
            margin-top: 146px;
        }
        
        .flex_items_left {
            position: relative;
             1000px;
            height: 440px;
            display: flex;
            flex-flow: row wrap;
        }
        
        .flex_container a[class^=item] {
            margin-right: auto;
            overflow: hidden;
        }
        
        .flex_items_right {
             190px;
            height: 440px;
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .flex_items_left .item-01 {
            position: relative;
             190px;
            height: 210px;
            box-sizing: border-box;
        }
        
        .flex_items_right .item-02 {
            position: relative;
             190px;
            height: 100px;
            margin-bottom: 10px;
        }
        
        .item-01 .item-01_lazyimg>img,
        .item-01_shoppimg>img,
        .item-01_title .item-01_title_img>img,
        .item-02_lazyimg>img {
             100%;
            height: 100%;
        }
        
        .item-01_shoppimg {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
             130px;
            height: 130px;
        }
        
        .item-01_title .item-01_title_img {
            position: absolute;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
             174px;
            height: 30px;
        }
        
        .item-01_title>span {
            position: absolute;
            bottom: 41px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 17px;
            color: #ffffff
        }
        
        span[class=item-01_desc_text] {
            position: absolute;
            bottom: 7px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            color: #DE452B;
        }
        
        .item-02_lazyimg {
             100%;
            height: auto;
        }
        
        .flex_container a[class^=item-01]:hover::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
             190px;
            height: 140px;
            opacity: .2;
            z-index: 100;
            background-color: white;
        }
        
        .item-02_lazyimg:hover::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
             190px;
            height: 100px;
            opacity: .2;
            z-index: 100;
            background-color: white;
        }
    </style>
    
    <body>
        <section class="flex_container">
            <a href="#" class="header_link" title="双11有好礼"></a>
            <section class="flex_items_left">
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item1.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item2.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item3.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item4.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item5.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item6.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item7.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item8.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item9.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
                <a href="#" class=item-01>
                    <div class="item-01_lazyimg">
                        <img src="./images/bankground.webp" alt="">
                    </div>
                    <div class="item-01_shoppimg">
                        <img src="./images/item10.webp" alt="">
                    </div>
                    <div class="item-01_title">
                        <div class="item-01_title_img">
                            <img src="./images/title.webp" alt="">
                        </div>
                        <span class="item-01_title_text">满300减100</span>
                    </div>
                    <span class="item-01_desc_text">乐享生活</span>
                </a>
            </section>
            <section class="flex_items_right">
                <a href="#" class="item-02">
                    <div class="item-02_lazyimg">
                        <img src="./images/item_shop1.webp" alt="">
                    </div>
                </a>
                <a href="#" class="item-02">
                    <div class="item-02_lazyimg">
                        <img src="./images/item_shop2.webp" alt="">
                    </div>
                </a>
                <a href="#" class="item-02">
                    <div class="item-02_lazyimg">
                        <img src="./images/item_shop3.webp" alt="">
                    </div>
                </a>
                <a href="#" class="item-02">
                    <div class="item-02_lazyimg">
                        <img src="./images/item_shop4.webp" alt="">
                    </div>
                </a>
            </section>
        </section>
    </body>
    
    </html>
    
  • 相关阅读:
    Chrome技巧
    jQuery中.bind() .live() .delegate() .on()的区别
    BRAVEHEART勇敢的心威廉姆华莱士战场演讲
    CSS3小模块hover左右交替互换动画
    sublime text 3
    百度图片搜索页的图片展示列表模块jquery效果
    出埃及记:摩西劈开红海
    用位数组计算整数中1的个数
    Using the XPath Wrappers
    【转】为Xcode 4挑选自己喜欢的字体和颜色(Panic Sans)
  • 原文地址:https://www.cnblogs.com/bingziweb/p/13921067.html
Copyright © 2011-2022 走看看