完整的网页布局

usrname为username

于 2022-08-06 02:17:21 发布

阅读量308

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126188429

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习视频链接：完整的网页布局

网络布局图如下：

最终gif效果图：

中间遇到的问题及解决方案：

问题：缩小网页尺寸时，中间栏内容会串到两侧

解决办法：

中间栏需要加左右边距

修改后效果图：

问题：当尺寸缩小至700px时，竖排排列存在间隙

解决办法：

    /* 附加功能：当浏览器宽度小于700时，三个栏进行竖排代替横排*/
    @media screen and (max-width:700px){
        .lside,.rside,.content{
            width: 100%;
            /* 解决因为中间栏有左右间距导致的空白 */
            margin: 0px;

        }
    }

缩小为800px时，无法对齐：

解决办法：

   .header,.nav,.container,.footer{
        float:left;
        width: 100%;
        /* 内边距会影响整个盒子的实际大小，这里更改使其不影响 */
        box-sizing: border-box;
    }

解决效果：

问题：左侧标题不对齐

原因：有内边距

解决办法：

 .lside,.rside,.content{
        padding: 5px;
        /* 去掉内边框影响 */
        box-sizing: border-box;
    }

解决效果：

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    /* 样式初始化 */
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    .main{
        width: 800px;
        margin:auto;
    }
    .header,.nav,.container,.footer{
        float:left;
        width: 100%;
        /* 内边距会影响整个盒子的实际大小，这里更改使其不影响 */
        box-sizing: border-box;
    }
    .header{
        background-color:#ccc;
        padding: 20px;
        text-align: center;
    }
    .nav{
        background-color: #333;
    }
    .nav a{
        color: #fff;
        padding: 10px 20px;
        /* 让链接以块的形式展示 */
        display: inline-block;
        
    }
    .nav a:hover{
        background-color: #bbb;
        color: #000;
    }
    /* 左边栏和右边栏固定宽度200px */
    .lside
    {
        width: 200px;
        float: left;
    }
    .rside{
        width: 200px;
        float: right;
    }
    /* 中间栏需要加左右边距，否则自适应时候会窜到左右栏下方 */
    .content{
        margin: 0px 205px;
    }
    /* 远离导航栏 */
    .lside,.rside,.content{
        padding: 5px;
        /* 去掉内边框影响 */
        box-sizing: border-box;
    }
    .footer{
        padding: 10px;
        background-color: #ccc;
        text-align: center;
    }
    /* 附加功能：当浏览器宽度小于700时，三个栏进行竖排代替横排*/
    @media screen and (max-width:700px){
        .lside,.rside,.content{
            width: 100%;
            /* 解决因为中间栏有左右间距导致的空白 */
            margin: 0px;

        }
    }
</style>

</head>
<body>
    <div class="mian">
        <div class="header">
            <h1>我是网页的头部</h1>
            <p>这里主要放网页的logo或者banner广告</p>
        </div>
        <div class="nav">
            <a href="#">导航项</a>
            <a href="#">导航项</a>
            <a href="#">导航项</a>
            <a href="#">导航项</a>
        </div>
        <div class="container">
            <!-- 主体中放入三个盒子，左中右 -->
            <!-- 因为用margin进行三栏布局，中间的栏自适应，故中间的栏放在第三个 -->
            <div class="lside">
                <h2>我是左边栏</h2>
                <p>
                    我是左边栏的内容我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容我是左边栏的内容
                </p>
            </div>
            <div class="rside">
                <h2>我是右边栏</h2>
                <p>
                    我是右边栏的内容我是右边栏的内容我是右边栏的内容
                    我是右边栏的内容我是右边栏的内容我是右边栏的内容
                    我是右边栏的内容我是右边栏的内容我是右边栏的内容
                    我是右边栏的内容我是右边栏的内容我是右边栏的内容
                    我是右边栏的内容我是右边栏的内容我是右边栏的内容
                </p>
            </div>
            <div class="content">
                <h2>我是中间栏</h2>
                <p>
                    我是中间栏的内容我是中间栏的内容我是中间栏的内容
                    我是中间栏的内容我是中间栏的内容我是中间栏的内容
                    我是中间栏的内容我是中间栏的内容我是中间栏的内容
                    我是中间栏的内容我是中间栏的内容我是中间栏的内容
                    我是中间栏的内容我是中间栏的内容我是中间栏的内容
                </p>
            </div>
        </div>
        <div class="footer">
            <p>我是网页的底部，主要放版权声明，备案信息，联系方式，友情链接等</p>
        </div>
    </div>
</body>
</html>