CSS学习笔记8：实操——运用浮动简单布局网页

最新推荐文章于 2024-04-18 10:38:28 发布

远春儿

最新推荐文章于 2024-04-18 10:38:28 发布

阅读量1.6k

点赞数 4

分类专栏：前端基础文章标签： css 布局

本文链接：https://blog.csdn.net/sinat_34647836/article/details/55004060

版权

前端基础专栏收录该内容

20 篇文章 4 订阅

订阅专栏

学习完浮动，我们就可以利用已学的知识做一个初级的网页布局了。下面我们布局成下图所示的网页：
如图：
这里写图片描述

思路：由大到小拆分盒子

1.先看上下分成3大部分，头部，中间和尾部3个大盒子。三个大盒子按照标准文档流上下排列，无需浮动。
2.拆分头部第一个大盒子：头部可拆分成1个红色盒子和2个绿色盒子。红色盒子左浮动，2个绿色盒子右浮动。思考：为什么较长的绿色盒子没有贴在较短的绿色盒子后面，与之并排在第一行？那是因为，第一行绿色盒子和红色盒子中间的空间较小，较长的绿色盒子自动跌落贴右墙。
3.拆分中间的盒子，中间的盒子分为左右2个小盒子，并使两个盒子左浮动。右边的盒子右可继续拆分为上下两个盒子，无需浮动。上面的盒子可拆分成左右两个盒子，都左浮动。左边的盒子可拆分3个天蓝的盒子，不浮动。思考为什么天蓝色的3个盒子不需要浮动？因为，天蓝色的父亲盒子已经左浮动了。

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 970px;
            height: 103px;
            /*自动居中*/
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            width: 277px;
            height: 103px;
            background-color: red;
        }
        .header .language{
            float: right;
            width: 137px;
            height: 49px;
            background-color: green;
            margin-bottom: 8px;
        }
        .header .nav{
            float: right;
            width: 679px;
            height: 46px;
            background-color: green;
        }

        .content{
            width: 970px;
            height: 435px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .content .banner{
            float: left;
            width: 310px;
            height: 435px;
            background-color: gold;
            margin-right: 10px;
        }
        .content .rightPart{
            float: left;
            width: 650px;
            height: 435px;
        }
        .content .rightPart .main{
            width: 650px;
            height: 400px;
            margin-bottom: 10px;
        }
        .content .rightPart .links{
            width: 650px;
            height: 25px;
            background-color: blue;
        }
        .content .rightPart .main .news{
            float: left;
            width: 450px;
            height: 400px;
        }
        .content .rightPart .main .hotpic{
            float: left;
            width: 190px;
            height: 400px;
            background-color: purple;
            margin-left: 10px;
        }
        .content .rightPart .main .news .news1{
            width: 450px;
            height: 240px;
            background-color: skyblue;
            margin-bottom: 10px;
        }
        .content .rightPart .main .news .news2{
            width: 450px;
            height: 110px;
            background-color: skyblue;
            margin-bottom: 10px;
        }
        .content .rightPart .main .news .news3{
            width: 450px;
            height: 30px;
            background-color: skyblue;
        }
        .footer{
            width: 970px;
            height: 35px;
            background-color: navy;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="logo">logo</div>
        <div class="language">语言选择</div>
        <div class="nav">导航条</div>
    </div>

    <!-- 主要内容 -->
    <div class="content">
        <div class="banner">大广告</div>
        <div class="rightPart">
            <div class="main">
                <div class="news">
                    <div class="news1"></div>
                    <div class="news2"></div>
                    <div class="news3"></div>
                </div>
                <div class="hotpic"></div>
            </div>
            <div class="links"></div>
        </div>
    </div>

    <!-- 页尾 -->
    <div class="footer"></div>
</body>
</html>