教你如何用 HTML + CSS 来设计响应式的网站布局

原创已于 2022-02-26 15:12:11 修改 · 629 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

于 2022-02-26 15:09:30 首次发布

本文探讨了网页在不同分辨率下（1000px以上、500px以下）的布局变化，包括导航栏和主要内容区块如何适应。CSS代码展示了如何使用媒体查询实现自适应设计，确保在小屏幕设备上的良好体验。

先来看一下成品：

正常分辨率大于1000px（100%）：

分辨率小于1000px，网页内容排版发生变化：

分辨率小于500px时，导航栏发生变化：

css代码：

            *{
                box-sizing: border-box;
            }
            .header{
                background-color:white ;
                /* width:100%; */
                padding:20px 0;
                text-align:center;
            }
            .row1::after{
                display: table;
                clear:both;
                content:"";
            }
            .ul1{
                overflow:hidden;
                background-color: rgb(83, 78, 78);
                list-style-type: none;
                margin:0;
                padding:0;
            }
            .ul1 li{
                float:left;
            }
            .ul1 li a{
                
                text-decoration: none;
                color:white;
                display:block;
                padding:1em;
            }
            .ul1 li a:hover{
                background-color: rgb(180, 175, 175);
                color:black;
            }
            .main1{
                float:left;
                width:74.99%;
                /* background-color: ; */
                margin-top: 10px;
                
            }
            .side1{
                float:left;
                width:24.99%;
                /* background-color: ; */
                margin-top: 10px;
                padding-left:10px;
            }
            .neirong1{
                padding:1em;
                margin-top: 10px;
                background-color: white;
            }
            .img1{
                width:100%;
                padding:40px 20px;
                background-color: gray;
                height:100px;
                border:1px solid red;
            }
            .footer{
                text-align: center;
                /* width:100%; */
                padding:20px 0;
                margin-top:10px;
                background-color: lightblue;
            }
            @media screen and (max-width:1000px){
                .main1,.side1{
                    width:100%;
                    padding:0;
                }
            }
            @media screen and (max-width:500px){
                .ul1 li{
                    width:100%;
                    text-align: center;
                }
            }

html代码：

<div style="padding:20px 20px;background-color: lightgray;overflow:hidden;">
            <div class="header">
                <h1>My Website</h1>
                <p>Resize the browser window to see the effect.</p>
            </div>
            <!-- <div class="row1"> -->
                <ul class="ul1">
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li style="float:right"><a href="">Link</a></li>
                </ul>
            <!-- </div> -->

            <div class="row1">
                <div class="main1">
                    <div class="neirong1">
                        <h2>TITLE HEADING</h2>
                        <p><b>Title description, Dec 7, 2017</b></p>
                        <div class="img1">
                            Image
                        </div>
                        <p>Some text</p>
                        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                        </p>

                    </div>
                    <div class="neirong1">
                        <h2>TITLE HEADING</h2>
                        <p><b>Title description, Sep 2, 2017</b></p>
                        <div class="img1">
                            Image
                        </div>
                        <p>Some text</p>
                        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                        </p>

                    </div>
                </div>
            

            
                <div class="side1">
                    <div class="neirong1">
                        <h2>About Me</h2>
                        <div class="img1">
                                Image
                        </div>
                        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
                    </div>
                    <div class="neirong1">
                        <h2>Popular Post</h2>
                        <div class="img1">
                            Image
                        </div>
                        <div class="img1">
                            Image
                        </div>
                        <div class="img1">
                            Image
                        </div>
                            
                    </div>
                    <div class="neirong1">
                        <h2>Follow Me</h2>
                        <p>Some text...</p>
                    </div>
                </div>
            </div>
                
            <div class="footer">
                <h2>Footer</h2>
            </div>
            

        </div>