在学习完了基本的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
设置为网格
将父盒子layout设置为grid，宽度为全体窗口，用template-rows设置行高，用template-columns分别设置三个盒子的宽度，个中auto实现center盒子的宽度自适应。须要把稳的是，这里用template-rows设置了固定的行高，因此center的高度不会自适应。
仿写练习
适宜初学者练习的网页有很多，可以打开网址之家去里面挑一挑，以静态页面为主的网站。作者自己因此豆瓣首页（局部）进行练习的。练习过程中，千万不要去看网站源码（此时你也有很多地方看不懂），先试着自己剖析和思考，用所学的知识看看能做到哪一步。
笔者学习时的仿写
放上比拟图，还是有很多不一样的地方，网页也没有功能，作为初学者这都是正常的。静态网页练习的紧张目的是熟习HTML+CSS布局，培养做网页的思维。详细细节随着学习的深入，可以让网页更还原、页面更精美，网页功能也能逐步完善起来，实现真正的网站开拓。
