html案例网站简介小结

1 整体思路

整体思路：页面分解。

1）拿到页面，并不急于实现细节；而是根据页面的内容逻辑与样式特点把页面划分成多个区块（通过div标签），根据需要，可进一步划分（div里继续嵌套div）。

充分利用盒子模型实现水平方向与垂直方向的间距，可以精确控制距离。

通过盒子模型画水平线、方框非常方便。

不要给页面的每个元素设置width、height，同时要考虑以后可能的变化，总体是设置的越少越好。

各种元素设置尺寸时，建议加上box-sizing:border-box，我们这里没加。

默认的box-sizing值content-box，width仅表示内容宽度，整体宽度还需要加上margin、border、padding的值。

后续我们会通过css进行统一设置。

本案例出现3处居中。

1）div id="main"通过style="margin:0 auto;"实现两边留白，内容整体水平居中；

2）头部与尾部里的内容为纯文字，通过style="text-align:center;"进行水平居中；

3）div id="header"里的h1标签设置padding-top、padding-bottom为同一个值，实现垂直居中。

根据需求场景实体各种不同居中。