HTML基础网页布局方法

网页布局

1. 当你拿到一个页面的时候，先不要着急去做，先构思后动手…
2. 例如：
   （线画的不标准，见谅~）每个页面基本都有版心宽！
   什么是版心宽？
   也就是你页面中 主体内容都基本在这个图中红线里，看看下面这个页面：
   
   明显也有版心宽，所以当你(小白)动手画的时候，先去量一下版心宽。用PS软件的辅助线去量！里面的每个版块的高度也要量出来方便后面写代码。

怎么来写

首先，观察这个页面的每个版块所代表的内容，给每个版块取一个中文注释方便自己到时候找bug

这样区分开来，就很一目了然，知道每个版块该做什么。（css样式也同步）
当然，在css里，你也可以加上背景颜色来区分帮助你好写代码：
比如我 设版心宽为1000px; ：
html代码：

css样式：

出来的页面：

发现，.header_all中的子元素没有排列在一起，需要给子元素都加上float：left;

红色区就相当于放log之类的地方，黄颜色区就相当于放导航栏区~
往里面添加内容就行啦。
其实还有种方法，不需要给子元素加float；知道的可以留言哦。

后面的就如法炮制，先弄出个框架再添加内容，这样，画页面就非常简单了。

Bye~