10-版心和布局流程

最新推荐文章于 2022-05-24 19:33:14 发布

「已注销」

最新推荐文章于 2022-05-24 19:33:14 发布

阅读量362

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_45240749/article/details/104876679

版权

在网页制作中，版心是关键，它通常有固定的宽度并居中显示。布局流程包括确定版心、分析模块、制作HTML结构和使用CSS布局。常见的布局方式有一列固定宽度居中、两列左窄右宽和通栏平均分布。

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

版心和布局流程

布局流程
常用的布局方式

在制作网页时，要想使页面结构清晰、有条理，需要对网页进行"排版"。

“版心”(可视区) 是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

确定页面的版心（可视区）
分析页面中的行模块，以及每个行模块中的列模块
制作HTML结构
CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

常用的布局方式

一列固定宽度且居中

最普通的、最为常用的结构：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚内外边距 */
        * {
    
            margin: 0;
            padding: 0;
        }
        div {
    
            text-align: center;
            margin: 0 auto;
            width: 960px;
            margin-bottom: 10px;
        }
        .top {
    
            height: 80px;
            background-color: pink;
        }
        .banner {
    
            height: 120px;
            background-color: purple;
        }
        .main {
    
            background-color: hotpink;
            height: 500px;
        }
        .footer {
    
            height: 150px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="top">top</div>