标签：
本文作者：大象
本文地址：http://www.cnblogs.com/daxiang/p/4653546.html
在分析和切出设计稿，以及部署项目目录文件后，开始写HTML Demo。
一、<head>里加各类<meta>元素，<link>引入样式。</body>前<script>引入脚本；
二、构建HTML主干结构；
1、网站站点(site)，分页头页尾公用的部分；
2、网站子站(page)（频道）、单页面专题，分页头页尾公用的部分、正文内容区域、两侧悬浮挂件；
具体页面可参阅网易、腾讯、淘宝；
站点顶部一般是用户操作、导航等信息，站点尾部是导航、备案、版权等信息；
频道子站页头一般是LOGO、站内搜索、分类菜单，页尾一般是友链和子站分类导航；
站点公用部分结构，如下处理：着重看 class="site-*" 部分
<!-- site topbar --> <div class="site-topbar"> <div class="section-wrapper"> <div class="topbar-nav"></div> <div class="topbar-info"></div> </div> </div> <!-- /site topbar -->
<!-- site header --> <div class="site-header"> <div class="section"> <div class="section-wrapper"> <h1 class="site-logo"></h1> <div class="header-info"> <div class="header-search"></div> <div class="header-cart"></div> </div> </div> </div> <div class="section"> <div class="section-wrapper"> <div class="category-nav"></div> <div class="header-nav"></div> </div> </div> </div> <!-- /site header -->
<!-- site footer --> <div class="site-footer"></div> <!-- /site footer -->
页面公用部分、正文内容区域、悬浮挂件等结构，如下处理：着重看 class="page-*" 部分
<!-- page wrapper --> <div class="page-wrapper">
<!-- page header --> <div class="page-header"> <!-- page menu --> <div class="section page-menu"> <div class="section-wrapper"> <h2 class="header-logo"></h2> <div class="page-menu-inner"></div> </div> </div> <!-- page menu --> </div> <!-- /page header -->
<!-- page container --> <div class="page-container"> <div class="section"> <div class="section-wrapper"></div> </div> </div> <!-- /page container -->
<!-- page footer --> <div class="page-footer"> <div class="section footer-service"> <div class="section-wrapper"></div> </div> <div class="section footer-about"> <div class="section-wrapper"></div> </div> <div class="section footer-copyright"> <div class="section-wrapper"></div> </div> </div> <!-- /page footer -->
<!-- page pendant --> <div class="page-pendant"> <div class="pendant-wrap"> <div class="to-top J_ToTop"> <span class="to-top-bg"></span> <span>回顶部</span> </div> </div> </div> <!-- /page pendant -->
</div> <!-- /page wrapper -->
class="site-*" 、class="page-*" 主干结构部分，绝不设置 border 、 margin 、 padding 影响初始Box Model；主干结构只是用来表意。
本文为原创文章，同时，某会更新知识点及修正错误，是以转载请务必保留原作者信息！
本文地址：http://www.cnblogs.com/daxiang/p/4653546.html
无废话网页重构系列——（6）HTML主干结构：站点(site)、页面(page)
标签：
原文地址：http://www.cnblogs.com/daxiang/p/4653546.html
