一、框架
搭建一个完整的网页，首先要考虑网页的框架：
常用的框架有：页头+主体+页尾；
所以主体部分代码应该为：
<body> <header>头部代码</header> <main>主体代码</main> <footer>尾部代码</footer> </body>
页头可以做成两到三部分：顶部，招牌，导航栏；
<header> <div>顶部内容代码</div> <div>网站招牌代码</div> <nav>导航栏代码</nav> </header>
主体也可以做成全宽的和主体+侧边栏的；
全宽的
<main> <section>全宽布局模块/section> <section>全宽布局模块/section> <section>全宽布局模块/section> </main>
主体+侧边栏
<main> <section>全宽布局模块/section> <section>全宽布局模块/section> <section>全宽布局模块/section> </main>
页尾可以做成两到三部分：底部+版权信息；
<footer> <div>底部区域模块</div> <div>版权信息模块</div> </footer>
所以整个网页框架构成应该是这样子的
<body>
<header>
<div>顶部内容代码</div>
<div>网站招牌代码</div>
<nav>导航栏代码</nav>
</header>
<main>
<section>全宽布局模块/section>
<section>全宽布局模块/section>
<section>全宽布局模块/section>
</main>
<footer>
<div>底部区域模块</div>
<div>版权信息模块</div>
</footer>
</body>
二、布局
框架构造好后，就开始布局结构了，要分析一下框架里面有几个大模块，大模块里面又有几个小模块，比如说头部有三个大模块：顶部，招牌，导航栏；顶部也可以分成左右两个小模块或左中右三个小模块，并确定每个小模块的宽度或宽度比例，招牌可以分成logo模块和广告模块和搜索模块左中右三个小模块，同样要确定每个小模块的宽度或宽度比例；这就是布局；如下图
<div style="width:100%"> <div style="width:50%;">日历模块</div> <div style="width:50%;">社会化媒体模块</div> </div>
三、模块
网页的每一个区域都会实现特有的功能，这个功能区域就是模块；
比如说菜单栏；
比如说一篇文字的文章；
比如说各种排版图文组合模块；
比如说幻灯片模块；
比如说日历，最新文章，分类目录，标签模块等小工具
这些都属于模块；
这就是我们构建网页时的基本思路。
注：本网站只是说明一些思路，代码没有使用样式（class或id选择器）部分。
重点：
网页怎么布局？
网页模块怎么制作和修改？
分享创造价值
学习成就梦想
我是前方录
微信/QQ:34419369
加我好友，每天都有不一样的分享！
学习更多网站知识，请加ＱＱ群：632528856；
