CSS开发-简单布局模板

开开心心的摆烂

于 2022-04-18 16:40:19 发布

阅读量720

点赞数 2

分类专栏：前端小练习文章标签： css3 html 前端

本文链接：https://blog.csdn.net/l15367918596/article/details/124253229

版权

前端小练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客展示了一个简单的网页布局设计，包括头部、主体和底部。主体部分由左导航、主要内容区域和右侧栏组成，主要内容区域进一步划分为图片展示区和促销折扣区。整个布局采用固定宽度，使用HTML和CSS进行样式定义，呈现出清晰的视觉结构。

摘要由CSDN通过智能技术生成

实现图如下：

代码如下：

<!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>简单布局</title>
    <style>
        body{
            background-color: #f4f4f4;
        }
        .header{
            width:1920px;
            height:171px;
            background-color: #fff;
            margin:0 auto;
        }
        main{
            width:1190px;
            height:470px;
            margin:10px auto 30px;
            background-color: #f5f5f5;
        }
        footer{
            width:1190px;
            height:260px;
            margin:0px auto;
            background-color: red;
        }
        .header-top{
            width:100%;
            height:31px;
            background-color: #e3e4e5;
        }
        .header-content{
            width: 100%;
            height: 140px;
            background-color: #ffffff;
        }
        nav,article,aside,.article-image,.article-discount{
            height: 100%;
            float:left;
        }
        nav{
            width: 190px;
            background-color: #fefefe;
        }
        article{
            width: 790px;
            background-color: #f5f5f5;
            margin:0px 10px;
        }
        aside{
            width:190px;
            background-color:#ffffff;
        }
        article>div.article-image{
            width:590px;
            background-color:yellow;
        }
        article>div.article-discount{
            width:190px;
            background-color: #f6f6f6;
            margin-left:10px;
        }
        article div.article-discount-01{
            width: 100%;
            height:150px;
            background-color:#cedbdd;
        }
        article div.article-discount-02{
            width: 100%;
            height: 150px;
            background-color: #ceddd5;
            margin:10px 0px;
        }
        article div.article-discount-03{
            width:100%;
            height:150px;
            background-color:#d7d9e4;
        }
    </style>
</head>
<body>
    <!-- 网页头部 -->
    <div class="header">
        <div class="header-top"></div>
        <div class="header-content"></div>
    </div>

    <!-- 网页主体 -->
    <main>
        <!-- <div class="div-nav"></div>
        <div class="div-"></div>
        <div class="div-"></div>
        <div class="div-"></div> -->
        <!-- 左导航 -->
        <nav></nav>
        <!-- 主体 -->
        <article>
            <div class="article-image"></div>
            <div class="article-discount">
                <div class="article-discount-01"></div>
                <div class="article-discount-02"></div>
                <div class="article-discount-03"></div>
            </div>
        </article>
        <!-- 右边栏 -->
        <aside></aside>
    </main>

    <!-- 网页底部 -->
    <footer>
        
    </footer>
</body>
</html>