本文作者：大象
本文地址：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
时间： 2024-10-28 14:54:58