初学者：HTML+CSS静态网页开发——网页布局

100人浏览 2024-12-02 08:32:41

在学习完了基本的HTML+CSS标签之后，就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的，值得反复体会和思考！

网页结构

简单提一下常用于表示网页机构的标签：

header 整个页面的标题（也可表示一个内容区块）

main 页面主体部分

footer 整个页面的脚注（也可表示一个内容区块）

article 一块与上下文无关的独立内容

section 表示一个内容区块，常嵌套于article中

aside 在article之外与其内容相关的辅助信息

nav 页面中的导航栏

figure 表示一段独立的流内容

基本网站结构

三栏布局

一个网页最少由header、main、footer三部分组成，那么从三栏布局开始练习吧。无论是上-中-下结构还是左-中-右结构，关键都在于设置中间部分的宽高或位置。我们知道网页的主体内容（版心）是处于居中位置、随网页缩放而缩放的。那么左右（或上下）两栏固定后，须使中间部分自适应。以下总结了几种三栏布局的方法，以左-中-右结构为例：

先写左中右三个盒子。

body部分

1.使用float

利用float使左右脱离文档流

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否则right盒子会跑到下一行右侧）。以上代码中，设置center盒子的左右外边距来实现宽度自适应，若父盒子layout无高度要求，可用min-height实现高度自适应。不加高度自适应也可，在未设置center盒子高度的情况下本身高度会随文本内容的扩充而自动增加。

2.使用position

利用绝对定位脱离文档流

三个盒子都分别使用绝对定位，left、right分别距离窗口左右端为0，center距离窗口左端的间距为left盒子的宽度，距离窗口右端的间距为right盒子的宽度。

3.使用flex

利用弹性盒固有属性

须给父盒子layout加上弹性盒属性，给center盒子设置大于0的flex值，利用弹性盒自动拉伸效果实现center盒子的宽度自适应。

4.使用table

设置为表格

给父盒子layout设置为table，宽度为整个窗口，给三个子盒子都设置为table-cell，此时三个盒子就有了表格的属性。固定left、right盒子的宽度，center盒子自动占满父盒子剩余宽度。需要注意的是，因为父盒子具有表格属性，当left、center、right三者中任意一个盒子高度改变时，其他两个盒子会跟着改变。

5.使用grid