CSS基础-36双飞翼布局代码实战

最新推荐文章于 2025-08-18 06:30:00 发布

zhaihaohao1

最新推荐文章于 2025-08-18 06:30:00 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/47208475

css基础专栏收录该内容

38 篇文章

订阅专栏

本文通过实例演示了如何使用HTML和CSS实现双飞翼布局。布局包括顶部、左侧、中间和右侧内容区域，并附带底部区域。每个部分都有明确的颜色区分，便于理解布局结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<!--双飞翼布局代码实战-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css15.css" type="text/css" rel="stylesheet">

</head>
<body>
    <div class="shangbian">上边</div>
    <div class="zhongjian">
        <div class="zuobian1">内容左边</div>
        <div class="zhongjian1">内容中间</div>
        <div class="youbian1">内容右边</div>

    </div>
    <div class="jiewei">结尾</div>
</body>
</html>
css:
*{
    margin: 0px;
    padding: 0px;
}

.shangbian{
    background-color: #b3d4fc;
    height: 100px;

}
.zhongjian{
    background-color: aqua;
    height: 300px;

}
.zuobian1{
    background-color: chartreuse;
    float: left;
    color: #ff0000;
    height: 300px;
    width: 30%;


}
.zhongjian1{
    width: 40%;
    height: 300px;
    background-color: darkorange;
    float: left;
}

.youbian1{
    background-color: brown;
    color: #ff0000;
    height: 300px;
    width: 30%;
    float: left;

}

.jiewei{
    background-color: blueviolet;
    height: 100px;

}