Jquery开发官网的总结

红太狼 2022-11-16 05:42 245阅读 0赞

### 文章目录 ###

*  一、 拿到UI的设计图后
 *  二、观察核心占比
 *  三、查看多页面的公共部分
 *   *  1、iframe
     *  2、object标签
     *  3、load加载

--------------------

# 一、 拿到UI的设计图后 #

看下是否有无要求需要自适应移动端，有要求的话：推荐BootStrap框架来开发，推荐一个好用的[开发模板网址][Link 1]，免费下载下来进行对应修改即可。  
我此次是没有要求自适应，因为现在很多公司的官网的移动端和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，取相同名字便于维护。

[Link 1]: http://www.templatesy.com

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关在官网下载jQuery

1.最近工作涉及到前端的内容，要下载jQuery，在官网下载的时候，有几点需要注意一下，记录备忘到下载页面：[http://code.jquery.com/jquery/]

柔光的暖阳◎/ 2023年10月10日 08:17/ 0 赞/ 138 阅读

相关官网项目完成总结

目录前言： 1.总结（个人感受） 2.rem适配\[1920\1080设计图\] 2.1 在static目录下新建js文件 page:flexble 2.2 在as

向右看齐/ 2023年10月01日 08:41/ 0 赞/ 71 阅读

相关 jeecg官网(jeecg官网 ios开发)

360云盘在线预览文件和视屏播放 1. 服务端安装openOffice，可以将word等文档转化为pdf，后台用pdf2swf转成swf文件，前台调用FlexPaperV

叁歲伎倆/ 2023年09月26日 15:09/ 0 赞/ 231 阅读

相关 jquery官网(jquery下载官网)

官网在哪里官网　　官方论坛 ![jquery官网(jquery下载官网)\_jquery官网(jquery下载官网)][jquery_jquery_jquery_

ゝ一世哀愁。/ 2023年09月26日 15:01/ 0 赞/ 174 阅读

相关官网改版项目问题总结

最近官网改版的任务交给了我，开发使用的是jq操作dom，后台php渲染的方式，如今已经开发完成，现在把一些问题记录下来，已备忘。 1、Safari浏览器不能自动播放视频这

小灰灰/ 2023年08月17日 16:32/ 0 赞/ 217 阅读

相关 Spring官网阅读 | 总结篇

> 接近用了4个多月的时间，完成了整个《Spring官网阅读》系列的文章，本文主要对本系列所有的文章做一个总结，同时也将所有的目录汇总成一篇文章方便各位读者来阅读。下面这张

╰+哭是因爲堅強的太久メ/ 2023年07月25日 09:18/ 0 赞/ 80 阅读

相关 Mockjs-官网学习总结

安装： Node (CommonJS) 安装 npm install mockjs // 使用 Mock var Mock =

柔情只为你懂/ 2023年06月14日 10:46/ 0 赞/ 71 阅读

相关 xtrabackup_增量备份恢复步骤(总结官网)

官网 https://www.percona.com/doc/percona-xtrabackup/2.4/backup_scenarios/incremental_

傷城~/ 2023年01月13日 00:47/ 0 赞/ 206 阅读

相关 Jquery开发官网的总结

文章目录一、拿到UI的设计图后二、观察核心占比三、查看多页面的公共部分 1、iframe 2、object标签

红太狼/ 2022年11月16日 05:42/ 0 赞/ 246 阅读

相关 jquery 写官网（全部功能）

jquery 写官网最近有个需求就是写一个官网，内容包含：导航/简介/产品/优势/加入我们等。导航点击事件 <div class="navList">

约定不等于承诺〃/ 2021年07月25日 11:55/ 0 赞/ 487 阅读