Jquery开发官网的总结

---

一、 拿到UI的设计图后

看下是否有无要求需要自适应移动端，有要求的话：推荐BootStrap框架来开发，推荐一个好用的开发模板网址，免费下载下来进行对应修改即可。
我此次是没有要求自适应，因为现在很多公司的官网的移动端和H5端其实是分开开发的。为了移动端更好的兼容性（不会像BootStrap写很多媒体样式去兼容），后端主要是根据 HttpServletRequest request 中的请求头所带的参数 user-agent来 自动跳转到移动端或者PC端。

二、观察核心占比

我这次项目的要求是中间核心模块占用1200px，剩余的两边自适应缩放。那么每个模块定义的时候：

	{width:1200px;margin:0 auto;}

三、查看多页面的公共部分

引入公共html部分的代码方式：

1、iframe

本来看其他资料解释说不建议试用iframe，使用多了会消耗浏览器资源的组件，也不容易被搜索引擎抓捕iframe标签内的信息。但我此处用iframe是因为缩放时他的滚动条可以隐藏起来。不然影响美观。

<iframe align="center" width="100%" height="781" src="footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

2、object标签

当固定了宽度或者高度时，窗口缩放会出现滚动条，目前我没有找到好的方法去除滚动条，如果有好的方法，评论告诉我呀！！3Q

<object type="text/x-scriptlet" data="footer.html" width=100% height="781px"></object>

3、load加载

<div id="footer"></div>
 <script>
 $(".footer").load("footer.html");
 </script>

footer.html文件里不要放标签，只放核心的要展示的div部分。

---

所有html的对应的css，取相同名字便于维护。