html报表模板【html报表模板课程问答】

> >

?

HTML中表单元素、表格常用标签

夜已深

展开

表单元素相关标签：
1)
：标签用于为用户输入创建 HTML 表单。
2)：标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
3)：select 元素可创建单选或多选菜单。4)：option 元素定义下拉列表中的一个选项（一个条目）。option 元素位于 select 元素内部。5)：标签定义多行的文本输入控件。可以通过 cols 和 rows 属性来规定 textarea 的尺寸。</p><p>6)<button>：<button>标签定义一个按钮。</p><p>7)<fieldset>：fieldset 元素可将表单内的相关元素分组。</p><p>8)<legend>：legend 元素为 fieldset 元素定义标题（caption）。</p><p>9)补充：</p><p>a)客户端向服务端发送数据可以有两种方式：1. 使用表单<form>提交；2. 使用超链接传参数多个参数全部用&号连接起来。</p><p>b)<form action=”指定表单数据提交的处理地址” method=”post/get”></p><p>如：<form action=”……/login.jsp?username=james&age=22”>….</form></p><p>Method属性指定提交方式：post方式数据以暗文形式提交，即在浏览器地址栏上看不到提交的数据；get方式提交的数据在浏览器地址栏上可以看到，所以对敏感数据的提交都会选择post。</p><p>表格相关标签：</p><p>10)<table>：<table> 标签定义 HTML 表格。</p><p>11)<thead>：<thead> 标签定义表格的表头。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。</p><p>12)<tbody>：<tbody> 标签表格主体（正文）。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。</p><p>13)<tfoot>：<tfoot>标签定义表格的页脚（脚注或表注）。</p><p>14)<th>：定义表格内的表头单元格。</p><p>15)<tr>：<tr> 标签定义 HTML 表格中的行。<td>是列。</p><p>16)<td>：<td> 标签定义 HTML 表格中的标准单元格。</p><p>17)<caption>：caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。</p></p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>前端开发：一个简单、使用canvas元素的HTML5图表（Chart.js）</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">感性</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>Chart.js是一个开源、简单而灵活、使用HTML5的canvas元素的JavaScript图表，支持柱型和线型混合显示提供清晰的视觉区别，在所有现代浏览器（IE9+）提供强大的渲染性能，有8种不同的图表类型，每一种都是可定制的；当浏览器大小发生改变时他会重新绘制图表。</p><p>1、下载及初始化</p><p>https://github/chartjs/Chart.js</p><p>在github下载后，你必须构建Chart.js生成dist文件。然后在页面中引入生成的dist/Chart.js文件；或者直接引入托管平台上的Chart.js文件。</p><p>然后在页面body中创建一个<canvas>元素。</p><p>最后，以上准备好了就能创建一个图表了，在页面中添加一个脚本。</p><p>npm安装命令：npm install chart.js --save</p><p>bower安装命令：bower install chart.js --save</p><p>2、基本演示</p><p>①柱形图表</p><p>②线形图表</p><p>③面积图表</p><p>④饼形图表</p><p>⑤柱、线混合</p><p>⑥散点图</p><p>⑦网格线图表</p><p>官方网站：</p><p>http://chartjs.org/</p><p>Chart.js只有一些基础的图表，简单的可视化数据展示，同时能够动态改变数据、更新颜色、添加数据等，能够重绘图表调整到完美规模的粒度。内含多种鼠标事件，提供许多选项来配置动画的样子。Chart.js适合只需要简单图表的项目，如果需要更复杂的显示，可以选择echarts或Highcharts图表库。</p><p>有哪里写得不好的地方请大家提出来，请轻喷，谢谢。同时有什么与编程相关的好东西可以推举给我，再次感谢！</p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>分享八套免费的带后台的Html5响应式网站模板</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">余翠风</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>每套模板不仅仅带后台（SiteServer CMS），而且还带模板使用说明手册的。不仅仅可以下载到模板，还能下载到整个后台，本地直接配置起来就可以使用。</p><p>1、企业站模板一</p><p>在线浏览地址：http://templates.siteserver/medraut/index.htmlGitHub下载地址：https://github/siteserver/template-medraut</p><p>这是一套响应式的企业网站，适合企业、公司、或者产品型公司。分类展示，信息展示、增加网站的互动性。跟Banner大图对应起来，整个网站展示方面可以做的非常绚丽多彩。</p><p></p><p>2、门户站模板</p><p>在线浏览地址：http://templates.siteserver/girish/index.htmlGitHub下载地址：https://github/siteserver/template-girish</p><p>这一套自适应的站长模板，这套模板，我们会发现它虽然模块不少，有评论、有注册登录、有搜索、有文章排行、专题等模块，但它的结构还是比较简单的，模板页面数量少，首页、栏目页、文章内容页，栏目页还跟首页结构一样。</p><p></p><p>3、企业站模板二</p><p>在线浏览地址：http://templates.siteserver/batraz/index.htmlGitHub下载地址：https://github/siteserver/template-batraz</p><p>这是一套响应式网站模板，适应于互联网、企业、媒体、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理，而响应式网站不同设备内容源码是一样的。因此，你不得不担心响应式网站在移动端的速度以及流量消耗，我们采用图片处理技术后，在手机上会只加载尺寸更小的图片。</p><p></p><p>4、大学官网模板</p><p>在线浏览地址：http://templates.siteserver/albrecht/index.htmlGitHub下载地址：https://github/siteserver/template-albrecht</p><p>这是一套学校模板，适用于各类大学、综合院校，当然删减一些栏目，一样适用各个中小学网站。同样作为一套自适应的学校模板，这套模板包含了学校主页、院系列表页、院系主页、科研专题页、教学专题页、周边生活专题、图片列表页、人员列表专页、新闻列表页、搜索结果页、内容页等板块。</p><p></p><p>5、博客模板</p><p>在线浏览地址：http://templates.siteserver/scevola/index.htmlGitHub下载地址：https://github/siteserver/template-scevola</p><p>这是一套响应式博客模版，适应于科技、个人博客、互联网、媒体等产品型公司网站模板。所有图片在手机端都进行过处理，简单而又清爽的企业、博客响应式模板。</p><p></p><p>6、单页H5模板</p><p>在线浏览地址：http://templates.siteserver/milenko/index.htmlGitHub下载地址：https://github/siteserver/template-milenko</p><p>这是一套响应式的单页宣传性网站，适合一些房产、或者产品型公司，简单的展示一些个人或者企业信息。图片切换板块对图片进行分类展示，可以保持内容图片的多样性又不杂乱，增加网站的互动性。可以一次性展示多张图片，跟banner大图对应起来，整个网站展示方面可以做的非常绚丽多彩。整个网站单页展示，虽然看起来略显单薄，但对应有些企业来说非常适合，展示必要的信息，用户浏览起来直观、不繁重。</p><p></p><p>7、企业站模板三</p><p>在线浏览地址：http://templates.siteserver/aeson/index.htmlGitHub下载地址：https://github/siteserver/template-aeson</p><p>这是一套响应式网站模板，适应于地产、汽车、互联网、建筑、媒体、家居、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理，而响应式网站不同设备内容源码是一样的。</p><p></p><p>8、企业站模板四</p><p>在线浏览地址：http://templates.siteserver/kevan/index.htmlGitHub下载地址：https://github/siteserver/template-kevan</p><p>这是一套响应式网站模板，适应于企业、汽车公司、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理，而响应式网站不同设备内容源码是一样的。因此，你不得不担心响应式网站在移动端的速度以及流量消耗，我们采用图片处理技术后，在手机上会只加载尺寸更小的图片。</p><p></p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>基于nose-html-report定制测试报告</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">漓奈</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>环境准备</p><p>pip3.5 install nose-html-report </p><p>安装目录文件：</p><p>├── __init__.py├── __pycache__│ └── __init__.cpython-35.pyc└── templates├── report2.jinja2└── report.html</p><p>主要修改 __init__.py文件及测试报告模板文件report2.jinja2</p><p>jinja2模板有自己的语法，具体可以谷歌，如：</p><p>if elif else endif 条件语法：</p><p>{% if not test.failed %}{% set test_status="Pass" %}{% elif test.failed and test.type == 'skipped' %}{% set test_status="Skip" %}{% elif test.failed and test.type != 'skipped' %}{% set test_status="Fail" %}{%- else -%}{% set test_status="Error" %}{%- endif %}</p><p>for语法：</p><p>L{% for test in group.tests %}</p><p>{%- endfor -%}</p><p></p><p>测试报告定制的实现主要包括如下类</p><p>class OutputRedirector(object): # 输出重定向类</p><p>包含一个文件对象fp，主要包括如下方法</p><p>def write(self, s): def writelines(self, lines):def flush(self):def readall(self):</p><p>class Group(object): # 测试用例组</p><p>主要包括如下两个对象</p><p>self.stats = {'errors': 0, 'failures': 0, 'passes': 0, 'skipped': 0} # 用例组的结果状态统计self.tests = [] # 用例组中具体测试用例统计</p><p>class HtmlReport(Plugin): # 测试报告插件</p><p>构造函数def startTest(self, test): # 重定向输出初始化def complete_test_output(self, err_msg='', traceback=''): # 测试完成后的断开重定向链接同时返回缓存数据def begin(self):def complete_global_output(self):def options(self, parser, env): 通过nosetests运行测试用例时携带的命令选项 def configure(self, options, config): 通过命令配置进行实际相关配置两边的加载根据配置加载指定模板def report(self, stream): 基于模板，对模板中的变量进行赋值，写测试报告通过self.report_data，以group为单位，对测试结果结果进行传递，group中包含stats及tests对象，分别记录该测试组中测试运行状态及具体用例信息""Writes an Xunit-formatted XML fileThe file includes a report of test errors and failures."""self.stats['total'] = sum(self.stats.values())for group in self.report_data.values(): group.stats['total'] = sum(group.stats.values())self.report_file.write(self.jinja.get_template(os.path.basename(self.report_template_filename)).render( report=self.report_data, stats=self.stats, start_time = str(self.test_start_time)[:19], rawoutput=self._format_output(selfplete_global_output()), duration_time = self.test_duration_time - datetime.resolution))self.report_file.close()if self.config.verbosity > 1: stream.writeln("-" * 70) stream.writeln("HTML: %s" % self.report_file.name)def addSuccess(self, test): # 测试成功返回的状态信息及用例详情name = id_split(test.id())group = self.report_data[name[0]]self.stats['passes'] += 1group.stats['passes'] += 1group.tests.append({ 'name': name[-1], 'failed': False, 'output': self._format_output(selfplete_test_output()), 'shortDescription': test.shortDescription(), 'time': str(datetime.now() - self.test_start_time),})def addError(self, test, err, capt=None): # 测试失败返回的状态信息及用例详情、错误信息等"""Add error output to Xunit report."""exc_type, exc_val, tb = errtb = ''.join(traceback.format_exception( exc_type, exc_val if isinstance(exc_val, exc_type) else exc_type(exc_val), tb))name = id_split(test.id())group = self.report_data[name[0]]if issubclass(err[0], SkipTest): type = 'skipped' self.stats['skipped'] += 1 group.stats['skipped'] += 1else: type = 'error' self.stats['errors'] += 1 group.stats['errors'] += 1group.tests.append({ 'name': name[-1], 'failed': True, 'type': type, 'errtype': nice_classname(err[0]), 'message': exc_message(err), 'tb': self._format_output(tb), 'output': self._format_output(selfplete_test_output(exc_message(err), tb)), 'shortDescription': test.shortDescription(), 'time': str(datetime.now() - self.test_start_time),})def addFailure(self, test, err, capt=None): # 测试失败返回的状态信息及用例详情、失败详情"""Add failure output to Xunit report."""exc_type, exc_val, tb = errtb = ''.join(traceback.format_exception( exc_type, exc_val if isinstance(exc_val, exc_type) else exc_type(exc_val), tb))name = id_split(test.id())group = self.report_data[name[0]]self.stats['failures'] += 1group.stats['failures'] += 1group.tests.append({ 'name': name[-1], 'failed': True, 'errtype': nice_classname(err[0]), 'message': exc_message(err), 'tb': self._format_output(tb), 'output': self._format_output(selfplete_test_output(exc_message(err), tb)), 'shortDescription': test.shortDescription(), 'time': str(datetime.now() - self.test_start_time),})def _format_output(self, o): 字符相关编码</p><p>if isinstance(o, str): # return o.decode('latin-1') return o.decode('UTF-8') else: return o</p><p></p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>HTML关于制作表格</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">万怨</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p><html></p><p><head></p><p><title>实现表格</title></p><p><body ></p><p><table border="1px" align="center" width="477"></p><p><tr></p><p><td >学</td ></p><p><td >习</td ></p><p><td >HTML</td ></p><p></tr></p><p><tr></p><p><td >学</td ></p><p><td >关</td ></p><p><td >注</td ></p><p><td >我</td ></p><p></table></p><p></body></p><p></html> </p> </div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>世界上最好的 HTML5 表格AG-grid</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">莎伦</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>ag-Grid是世界上最好的数据网格。</p><p>在前端框架层出不穷的今天，在大数据时代，数据表格的展示成为很多开发者和企业头疼的问题，很多网格框架看起来很好，但一旦用到企业开发中却发现其性能的不足，每个表格只能展示区区1000条左右的数据，如果有更多的数据需要展示就只能选择分页显示，这个对于很多场景是行不通的，比如我开发的某个项目，其每个功能都希望能一次性展示完所有的数据，最多的有1w多条，这个时候如果采用普通的表格，浏览器马上卡死无法使用。为了解决这个问题，我采用了ag-grid这个网格插件，问题马上就得到解决。废话不多说，下面给出demo源码，希望能帮助和我一样被表格性能、功能困扰的程序猿。欢迎大家访问blog.fundodoo了解更多。</p><p></p><p>index.html内容如下：</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><script> var __basePath = ''; </script></p><p><style></p><p>html, body { margin: 0; padding: 0; height: 100%; }</p><p>.main {</p><p>display: none;</p><p>}</p><p>.main.selected {</p><p>display: block;</p><p>}</p><p></style></p><p><script src="ag-grid.min.js"></script></head></p><p><body></p><p></p><p><p class="main selected" style=" height: 90%; padding-top: 25px; box-sizing: border-box;"></p><p><p onclick = "asyncData()">table</p></p><p><p id="myGrid" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table1</p></p><p><p id="myGrid1" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table2</p></p><p><p id="myGrid2" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table3</p></p><p><p id="myGrid3" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table4</p></p><p><p id="myGrid4" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table5</p></p><p><p id="myGrid5" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table6</p></p><p><p id="myGrid6" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table7</p></p><p><p id="myGrid7" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table8</p></p><p><p id="myGrid8" style="height: 100%;"></p></p><p></p></p><p><p style="height: 100%; padding-top: 25px; box-sizing: border-box;"></p><p><p>table9</p></p><p><p id="myGrid9" style="height: 100%;"></p></p><p></p></p><p></p><p><p style="position: absolute; top: 0px; right: 20px;"></p><p></p><p><p></p><p><label class="tab-item active" style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab1</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab2</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab3</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab4</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab5</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab6</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab7</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab8</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="showTab()">Tab9</button></p><p></label></p><p><label style="margin-left: 20px;"></p><p><button onclick="onBtExport()">Export to CSV</button></p><p></label></p><p></p></p><p></p></p><p><script src="main.js"></script></p><p><script></p><p>var lis = document.getElementsByClassName("tab-item");</p><p>var ps = document.getElementsByClassName("main");</p><p>for(var i = 0; i < lis.length;i++) {</p><p>lis[i].index = i;</p><p>lis[i].onclick = function () {</p><p>for(var i = 0; i < lis.length;i++) {</p><p>//replace:这个非常不好用，jquery</p><p>lis[i].classList.remove("active");</p><p>ps[i].classList.remove("selected");</p><p>}</p><p>this.classList.add("active");</p><p>ps[this.index].classList.add("selected");</p><p>}</p><p>}</p><p>var asyncData = function(){</p><p>var httpRequest = new XMLHttpRequest();</p><p>httpRequest.open('GET', 'http://172.16.7.39:16800/13000k');</p><p>httpRequest.send();</p><p>httpRequest.onreadystatechange = function() {</p><p>if (httpRequest.readyState === 4 && httpRequest.status === 200) {</p><p>var httpResult = JSON.parse(httpRequest.responseText);</p><p>gridOptions.api.setRowData(httpResult);</p><p>}</p><p>};</p><p>}</p><p></script></p><p></body></p><p></html></p><p></p><p>main.js内容如下</p><p></p><p>var columnDefs = [{headerName: "", colId: "rowNum",suppressResize:true,suppressMovable:true, valueGetter: function(params){return Number(params.node.id) + 1 ;}, width: 65, pinned: 'left'},</p><p>{</p><p>// column group 'Participant</p><p>headerName: 'Participant',</p><p>// marryChildren: true,</p><p>children: [</p><p>{</p><p>headerName: 'Name',</p><p>rowDrag: true,</p><p>field: 'Name',</p><p>width: 200,</p><p>editable: true,</p><p>enableRowGroup: true,</p><p>// enablePivot: true,</p><p>pinned: 'left',</p><p>filter: 'personFilter',</p><p>floatingFilterComponent: 'personFloatingFilterComponent',</p><p>checkboxSelection: function (params) {</p><p>// we put checkbox on the name if we are not doing grouping</p><p>return params.columnApi.getRowGroupColumns().length === 0;</p><p>},</p><p>headerCheckboxSelection: function (params) {</p><p>// we put checkbox on the name if we are not doing grouping</p><p>return params.columnApi.getRowGroupColumns().length === 0;</p><p>},</p><p>headerCheckboxSelectionFilteredOnly: true</p><p>},</p><p>{</p><p>headerName: "Language", field: "Language", width: 150, editable: true, filter: 'agSetColumnFilter',</p><p>cellEditor: 'agSelectCellEditor',</p><p>enableRowGroup: true,</p><p>enablePivot: true,</p><p>// rowGroupIndex: 0,</p><p>// pivotIndex: 0,</p><p>pinned: 'left',</p><p>cellEditorParams: {</p><p>values: ['English', 'Spanish', 'French', 'Portuguese', 'German',</p><p>'Swedish', 'Norwegian', 'Italian', 'Greek', 'Icelandic', 'Portuguese', 'Maltese']</p><p>},</p><p>// pinned: 'left',</p><p>headerTooltip: "Example tooltip for Language",</p><p>filterParams: {</p><p>selectAllOnMiniFilter: true,</p><p>newRowsAction: 'keep',</p><p>clearButton: true</p><p>}</p><p>},</p><p>{</p><p>headerName: "Country", field: "Country", width: 150, editable: true,</p><p>// pivotIndex: 1,</p><p>// rowGroupIndex: 1,</p><p>enableRowGroup: true,</p><p>pinned: 'left',</p><p>enablePivot: true,</p><p>cellEditor: 'agRichSelect',</p><p>cellEditorParams: {</p><p>values: ["Argentina", "Brazil", "Colombia", "France", "Germany", "Greece", "Iceland", "Ireland",</p><p>"Italy", "Malta", "Portugal", "Norway", "Peru", "Spain", "Sweden", "United Kingdom",</p><p>"Uruguay", "Venezuela", "Belgium", "Luxembourg"]</p><p>},</p><p>// pinned: 'left',</p><p>floatCell: true,</p><p>filterParams: {</p><p>// cellHeight: 20,</p><p>newRowsAction: 'keep',</p><p>selectAllOnMiniFilter: true,</p><p>clearButton: true</p><p>},</p><p>floatingFilterComponent: 'countryFloatingFilterComponent',</p><p>icons: {</p><p>sortAscending: '<i class="fa fa-sort-alpha-asc"/>',</p><p>sortDescending: '<i class="fa fa-sort-alpha-desc"/>'</p><p>}</p><p>}</p><p>]</p><p>},</p><p>{</p><p>// column group 'Game of Choice'</p><p>headerName: 'Game of Choice',</p><p>children: [</p><p>{</p><p>headerName: "Game Name", field: "GameName", width: 180, editable: true, filter: 'agSetColumnFilter',</p><p>tooltipField: 'game.name',</p><p>cellClass: function () {</p><p>return 'alphabet';</p><p>},</p><p>filterParams: {</p><p>selectAllOnMiniFilter: true,</p><p>newRowsAction: 'keep',</p><p>clearButton: true</p><p>},</p><p>enableRowGroup: true,</p><p>enablePivot: true,</p><p>// pinned: 'right',</p><p>// rowGroupIndex: 1,</p><p>icons: {</p><p>sortAscending: '<i class="fa fa-sort-alpha-asc"/>',</p><p>sortDescending: '<i class="fa fa-sort-alpha-desc"/>'</p><p>}</p><p>},</p><p>{</p><p>headerName: "Bought", field: "Bought", filter: 'agSetColumnFilter', editable: true, width: 150,</p><p>// pinned: 'right',</p><p>// rowGroupIndex: 2,</p><p>// pivotIndex: 1,</p><p>enableRowGroup: true,</p><p>enablePivot: true,</p><p>enableValue: true,cellStyle: { "text-align": "center" }, </p><p>floatCell: true,</p><p>filterParams: {</p><p>selectAllOnMiniFilter: true,</p><p>newRowsAction: 'keep',</p><p>clearButton: true</p><p>}</p><p>}</p><p>]</p><p>},</p><p>{</p><p>// column group 'Performance'</p><p>headerName: 'Performance',</p><p>groupId: 'performance',</p><p>children: [</p><p>{</p><p>headerName: "Bank Balance", field: "BankBalance", width: 180, editable: true,</p><p>type: 'numericColumn',</p><p>enableValue: true,</p><p>// colId: 'sf',</p><p>// valueGetter: '55',</p><p>// aggFunc: 'sum',</p><p>icons: {</p><p>sortAscending: '<i class="fa fa-sort-amount-asc"/>',</p><p>sortDescending: '<i class="fa fa-sort-amount-desc"/>'</p><p>}</p><p>},</p><p>{</p><p>headerName: "Extra Info 1",field:"Apr", columnGroupShow: 'open', width: 150, editable: false,</p><p>suppressSorting: true, suppressMenu: true, cellStyle: { "text-align": "right" }</p><p>},</p><p>{</p><p>headerName: "Extra Info 2",field:"Aug", columnGroupShow: 'open', width: 150, editable: false,</p><p>suppressSorting: true, suppressMenu: true, cellStyle: { "text-align": "left" }</p><p>}</p><p>]</p><p>},</p><p>{</p><p>headerName: "Rating", field: "Rating", width: 120, editable: true, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>},</p><p>{</p><p>headerName: "Total Winnings", field: "TotalWinnings", filter: 'agNumberColumnFilter', type: 'numericColumn',</p><p>editable: true, width: 170,</p><p>enableValue: true,</p><p>icons: {</p><p>sortAscending: '<i class="fa fa-sort-amount-asc"/>',</p><p>sortDescending: '<i class="fa fa-sort-amount-desc"/>'</p><p>}</p><p>},</p><p>{</p><p>headerName: "Dec", field: "Dec", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Feb", field: "Feb", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Jan", field: "Jan", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Jul", field: "Jul", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Jun", field: "Jun", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Mar", field: "Mar", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "May", field: "May", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Nov", field: "Nov", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Oct", field: "Oct", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>,</p><p>{</p><p>headerName: "Sep", field: "Sep", width: 120, editable: false, </p><p>floatCell: true,</p><p>enablePivot: true,</p><p>enableValue: true</p><p>}</p><p>];</p><p></p><p>var gridOptions = {</p><p>columnDefs: columnDefs,</p><p>rowData:[],</p><p>enableFilter: true,</p><p>enableSorting: true,</p><p>showToolPanel: true,</p><p>rowSelection: 'multiple',</p><p>enableColResize:true,</p><p>pinnedTopRowData: [</p><p></p><p>],</p><p>pinnedBottomRowData: [</p><p></p><p>]</p><p>};</p><p></p><p>var gridOptions1 = {</p><p>columnDefs: columnDefs,</p><p>enableFilter: true,</p><p>enableSorting: true,</p><p>showToolPanel: true,</p><p>rowSelection: 'multiple',</p><p>pinnedTopRowData: [</p><p></p><p>],<...</div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>「报表制作技巧」tab页形式展现多张报表</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">向忆秋</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>业务系统中，很多报表都是沿用之前EXCEL的报表样式，原来以sheet格式显示的表，客户在web端展现的时候也希望也有同样的格式，润乾在实现这种效果和EXCEL一样简单灵活，轻松将数据报表以多个TAB页的形式展现在页面中，达到了一同展现，同时进行查询、打印、导出EXCEL结果文件等操作。</p><p>在润乾报表中如何实现这样多个tab页形式的报表呢？下面我们一起来看下具体操作。</p><p>如上面截图的效果，首先分别定义订单.rpx和订单明细.rpx两张报表，然后在文件菜单中有新建报表组的选项。</p><p>点击该选项后，我们就可以在弹出的对话框中增加订单.rpx和订单明细.rpx两张报表。</p><p>url类型可以是相对路径也可以是绝对路径。点击确定后，我们在润乾的报表设计器下就能卡到两个sheet标签，默认的名称是sheet1,sheet2……</p><p>右键这个sheet名称，可以进行修改这个标题的名称。</p><p>可以通过左右拖拽调整显示的顺序，右键这些sheet名称通过弹出的快捷菜单中的左移、右移选项也可以调整位置，还可以删除当前的sheet,或者在当前的sheet前再插入个报表。</p><p>哦哦，忘记说了其实添加完报表后，保存了报表组，就可以在页面上看到截图一的效果了哦！是不是比大神编码写的还要快很多？快点到润乾官网下载个报表，亲自感受下它的便捷吧！</p><p></p><p>温馨提示：在报表教程的报表组章节有更加全面的报表组功能介绍。在线访问网址：http://doc.raqsoft/report/tutorial/bbz152.html</p><p></p><p></p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>HTML5表格基础语法</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">红豆冰</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>学习目标：1.表格的基本格式 2.<table>标签下的常用属性3.<table>标签下的边框设置 4.<tr><th><td>标签下的常用属性 5.拆分与合并单元格 6.表格的结构化、直列化、标题 7.表格的嵌套在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多。 </p><p>表格的基本格式格式: <table> <tr>… <th>…</th> <th>…</th> <th>…</th> </tr> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> </table> </p><p>能:<table>…</table>用来声明表格开始与结束.<tr>…</tr>用来设置表格的行. <th>…</th>用来设置标题栏位.<td>…</td>用来设置数据栏位.</p><p><table>标签下的属性 </p><p><table> 标签下的边框设置 </p><p>1.4 <tr><th><td>标签下的常用属性</p><p>拆分与合并单元格 </p><p>表格的结构化、直列化、标题 (1).结构化格式： <table> <thead>……</thead> --------表头区 <tbody>……</tbody> --------表体区……………………… <tfoot>……</tfoot> --------表尾区 </table></p><p>(2).直列化格式：<colgroup>….</colgroup> </p><p>个别直列设置格式:<col>功能完全和<colgroup>一样. (3).表格的标题： <table> <caption>….</caption> </table> <caption>下的属性值有: </p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>HTML图片标签和表格</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">Nerissa</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>1.图片标签(单标记行内标签)</p><p>2.表格（块标签）</p><p>表格的格式</p><p>3. 表格的属性</p><p>例如</p><p>效果</p><p><tr>的属性</p><p><td>的属性</p><p></p><p></p></div> </div> </div> </div> </div> </li><li> <div class="top"> <div class="wenhao">?</div> <p>HTML之表格布局与美化</p> </div> <div class="bottom"> <div class="center"> <div class="head"> <div class="photo"> <img src="//a.300.cn/toutiao-head/default-head.png"> </div> <p class="name">萧若山</p> <div class="unfold cua"> <span>展开</span> <img src="//s.300.cn/v3.0/home/images/bcask/zhankai.png?20230104203054" class="img_a"> <img src="//s.300.cn/v3.0/home/images/bcask/shouqi.png?20230104203054" class="img_b"> </div> </div> <div class="solution"> <div class="left"> <img src="//s.300.cn/v3.0/home/images/bcask/daan.png?20230104203054"> </div> <div class="right"> <div class="designer_leave"> <p>本文主要讨论表格的布局及美化。首先我们通过表1来看HTML中表格包含哪些标签及属性以及表2中表格的css属性。</p>表1：表格标签及属性<p></p>表2：表格css属性<p>其中有几个属性是我们常用来实现表格布局及美化的：</p><p>1、rowspan和colspan分别规定单元格横跨的行数和列数，其作用于标签th、td，这是改变表格布局的两个重要属性。</p><p></p>图1：colspan和rowspan测试代码<p>以图1中代码为例，我们给不同的td分别设置了rowspan、colspan、rowspan和colspan属性，得到了图2的结果。（ps：table默认有cellpadding、cellspacing，因此可以看到单元格之间有空隙）</p><p></p>图2：colspan和rowspan测试结果<p>2、frame和rules分别规定外侧边框和内侧边框的显示部位。</p>图3：frame和rules测试代码<p>以图2中代码为例，在图1代码基础上加入了frame和rules属性，得到图4结果。（ps：当table有设置rules属性时，table的border-collapse（css属性）默认值会变成collapse（单元格边框合并））</p>图4：frame和rules测试结果<p>其中rules属性值groups值得注意，它规定行组和列祖之间有边框。一般使用col和colgroup来规定列祖，使用thead、tbody、tfoot来规定行组。</p><p></p>图5：无col、tbody等标签测试代码<p>如果table中没有上述规定行组和列祖的标签时（如图5代码所示），表格不显示边框，测试结果如图6。</p><p></p><p></p>图7：有col、tbody等标签测试代码<p>如图7所示，如果代码中含有col、tbody等标签，会得到图8所示结果。由图可以看出行组能“穿透”合并的单元格，但是列祖不能。实际上是因为设置tbody这类标签时，tbody包含的部分会独立出来，而设置col这类标签只是在原来的基础上将列进行“分类”，并不会影响到原本的结构。</p><p></p>图8：有col、tbody等标签测试结果<p></p><p></p><p></p></div> </div> </div> </div> </div> </li> </ul> </div> </div> <div class="edu_wenda_content"> <div class="video_wrap"> <h1 class="title">html报表模板</h1> </div> <div class="video_wrap"> <div class="item item_one"> <div class="show-top-video"> <div class="show-top-video-l"> <div class="show-video player"> <div class="pop-up" style="display: none"> <p id="pop_msg"></p> <div class="button">好的</div> </div> <div class="videoBox in"> <video id="videoPlayer_1" oncontextmenu="return false;" check-url="/edu/" data-level="1" data-mod="train" data-id="37" isplay="0" class="player" data-cid="0" type="video/mp4" poster="//a.300.cn/video/20201124/5fbc9bd47370a.jpg"> 您的浏览器不支持HTML5视频。</video> <a href="javascript:void(0);" class="video-play playBt video_one"></a> </div> </div> </div> <div class="show-top-video-r"> <div class="show-section-ul" style="touch-action: none;"> <ul class="show-section-ul-wrap" style="transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 1000ms; transform: translate(0px, 0px) translateZ(0px);"> <li class="active"> <a href="/edu/37.html" data-tooltip-tri=""> <p>1、只需3秒快速实现求和</p> </a> </li><li class="active"> <a href="/edu/37_16.html" data-tooltip-tri=""><p>2、如何快速填充序号</p> </a> </li><li class="active"> <a href="/edu/37_17.html" data-tooltip-tri=""><p>3、如何自动填充序号（公式法）</p> </a> </li><li class="active"> <a href="/edu/37_18.html" data-tooltip-tri=""><p>4、数据条的神奇应用</p> </a> </li><li class="active"> <a href="/edu/37_19.html" data-tooltip-tri=""><p>5、多文本快速合并</p> </a> </li><li class="active"> <a href="/edu/37_20.html" data-tooltip-tri=""><p>6、查找与替换的不同玩法</p> </a> </li><li class="active"> <a href="/edu/37_21.html" data-tooltip-tri=""><p>7、快速定位到指定区域</p> </a> </li><li class="active"> <a href="/edu/37_22.html" data-tooltip-tri=""><p>8、数据排序、工资条制作</p> </a> </li><li class="active"> <a href="/edu/37_23.html" data-tooltip-tri=""><p>9、快速筛选(模糊、精确筛选）</p> </a> </li><li class="active"> <a href="/edu/37_24.html" data-tooltip-tri=""><p>10、快速插入空行</p> </a> </li><li class="active"> <a href="/edu/37_25.html" data-tooltip-tri=""><p>11、快速删除空行</p> </a> </li><li class="active"> <a href="/edu/37_26.html" data-tooltip-tri=""><p>12.快速跳转到天涯海角</p> </a> </li><li class="active"> <a href="/edu/37_27.html" data-tooltip-tri=""><p>13、.同时查看两个Excel文件</p> </a> </li><li class="active"> <a href="/edu/37_28.html" data-tooltip-tri=""><p>14、用条件格式扮靓报表</p> </a> </li><li class="active"> <a href="/edu/37_29.html" data-tooltip-tri=""><p>15、一键插入Excel图表</p> </a> </li><li class="active"> <a href="/edu/37_30.html" data-tooltip-tri=""><p>16、批量处理行高、列宽</p> </a> </li><li class="active"> <a href="/edu/37_31.html" data-tooltip-tri=""><p>17、利用拆分功能查看数据</p> </a> </li><li class="active"> <a href="/edu/37_32.html" data-tooltip-tri=""><p>18、批量录入相同内容</p> </a> </li><li class="active"> <a href="/edu/37_33.html" data-tooltip-tri=""><p>19、工作表快速跳转</p> </a> </li><li class="active"> <a href="/edu/37_34.html" data-tooltip-tri=""><p>20、批量录入表格模板（精品课程）</p> </a> </li><li class="active"> <a href="/edu/37_35.html" data-tooltip-tri=""><p>21、Excel函数与公式的应用、公式循环引用的查找</p> </a> </li><li class="active"> <a href="/edu/37_36.html" data-tooltip-tri=""><p>22、IF函数单条件判断同比增长</p> </a> </li><li class="active"> <a href="/edu/37_37.html" data-tooltip-tri=""><p>23、用sum函数格式相同，连续多表数据汇总</p> </a> </li><li class="active"> <a href="/edu/37_38.html" data-tooltip-tri=""><p>24、excel快捷键</p> </a> </li><li class="active"> <a href="/edu/37_39.html" data-tooltip-tri=""><p>25、VLOOKUP函数——根据销售员匹配销售额</p> </a> </li><li class="active"> <a href="/edu/37_40.html" data-tooltip-tri=""><p>26、统计各部门销售总额</p> </a> </li><li class="active"> <a href="/edu/37_41.html" data-tooltip-tri=""><p>27、统计指定条件个数</p> </a> </li><li class="active"> <a href="/edu/37_42.html" data-tooltip-tri=""><p>28、怎样输入当前日期和时间、星期数</p> </a> </li><li class="active"> <a href="/edu/37_43.html" data-tooltip-tri=""><p>29、销售业绩排名</p> </a> </li><li class="active"> <a href="/edu/37_44.html" data-tooltip-tri=""><p>30、Sumproduct函数-万能函数（销售额汇总求和）</p> </a> </li><li class="active"> <a href="/edu/37_45.html" data-tooltip-tri=""><p>31、根据销售员，地区，商品名称汇总</p> </a> </li><li class="active"> <a href="/edu/37_46.html" data-tooltip-tri=""><p>32、批量替换PPT字体</p> </a> </li><li class="active"> <a href="/edu/37_47.html" data-tooltip-tri=""><p>33、给销售额数据批量添加万元单位</p> </a> </li><li class="active"> <a href="/edu/37_48.html" data-tooltip-tri=""><p>34、一秒快速核对两列数据</p> </a> </li><li class="active"> <a href="/edu/37_49.html" data-tooltip-tri=""><p>35、快速定位到指定单元格或区域</p> </a> </li><li class="active"> <a href="/edu/37_50.html" data-tooltip-tri=""><p>36、快速制作双行标题工资条</p> </a> </li><li class="active"> <a href="/edu/37_51.html" data-tooltip-tri=""><p>37、给你的表格做个瘦身</p> </a> </li><li class="active"> <a href="/edu/37_52.html" data-tooltip-tri=""><p>38、快速打开常用的Excel文件</p> </a> </li><li class="active"> <a href="/edu/37_53.html" data-tooltip-tri=""><p>39、快速打开多个Excel文件</p> </a> </li><li class="active"> <a href="/edu/37_54.html" data-tooltip-tri=""><p>40、利用创建组—快速隐藏/展开多列数据</p> </a> </li><li class="active"> <a href="/edu/37_55.html" data-tooltip-tri=""><p>41、快速制作下拉菜单</p> </a> </li><li class="active"> <a href="/edu/37_56.html" data-tooltip-tri=""><p>42、复制粘贴表格，如何保留数据源列宽格式一致？</p> </a> </li><li class="active"> <a href="/edu/37_57.html" data-tooltip-tri=""><p>43、两列数据位置互换</p> </a> </li><li class="active"> <a href="/edu/37_58.html" data-tooltip-tri=""><p>44、1秒钟扮靓报表——如何实现表格隔行换色</p> </a> </li><li class="active"> <a href="/edu/37_59.html" data-tooltip-tri=""><p>45、快速删除重复记录——保留唯一值</p> </a> </li><li class="active"> <a href="/edu/37_60.html" data-tooltip-tri=""><p>46、快速向下填充、向右填充，文本或公式</p> </a> </li><li class="active"> <a href="/edu/37_61.html" data-tooltip-tri=""><p>47、给Excel文件添加密码</p> </a> </li><li class="active"> <a href="/edu/37_62.html" data-tooltip-tri=""><p>48、插入带图片的批注</p> </a> </li><li class="active"> <a href="/edu/37_63.html" data-tooltip-tri=""><p>49、输入公式后不计算？</p> </a> </li><li class="active"> <a href="/edu/37_64.html" data-tooltip-tri=""><p>50、如何设置单元格缩进</p> </a> </li><li class="active"> <a href="/edu/37_65.html" data-tooltip-tri=""><p>51、快速解决Excel表格总显示货币格式</p> </a> </li><li class="active"> <a href="/edu/37_66.html" data-tooltip-tri=""><p>52、批量添加万元单位</p> </a> </li><li class="active"> <a href="/edu/37_67.html" data-tooltip-tri=""><p>53、你会四舍五入么？</p> </a> </li><li class="active"> <a href="/edu/37_68.html" data-tooltip-tri=""><p>54、用RAND函数机选彩票</p> </a> </li><li class="active"> <a href="/edu/37_69.html" data-tooltip-tri=""><p>55、冻结首行你会么？</p> </a> </li><li class="active"> <a href="/edu/37_70.html" data-tooltip-tri=""><p>56、超链接的高级应用</p> </a> </li><li class="active"> <a href="/edu/37_71.html" data-tooltip-tri=""><p>57、IFERROR函数-屏蔽错误值</p> </a> </li><li class="active"> <a href="/edu/37_72.html" data-tooltip-tri=""><p>58、批量填充颜色</p> </a> </li><li class="active"> <a href="/edu/37_73.html" data-tooltip-tri=""><p>59、录入数据</p> </a> </li><li class="active"> <a href="/edu/37_74.html" data-tooltip-tri=""><p>60、快速输入工号</p> </a> </li><li class="active"> <a href="/edu/37_75.html" data-tooltip-tri=""><p>61、快速行列转置</p> </a> </li><li class="active"> <a href="/edu/37_76.html" data-tooltip-tri=""><p>62、自定义缩放界面</p> </a> </li><li class="active"> <a href="/edu/37_77.html" data-tooltip-tri=""><p>63、多个单元格同时输入</p> </a> </li><li class="active"> <a href="/edu/37_78.html" data-tooltip-tri=""><p>64、如何计算立方米？</p> </a> </li><li class="active"> <a href="/edu/37_79.html" data-tooltip-tri=""><p>65、快速制作双行标题工资条</p> </a> </li><li class="active"> <a href="/edu/37_80.html" data-tooltip-tri=""><p>66、输入带方框的√和×</p> </a> </li><li class="active"> <a href="/edu/37_81.html" data-tooltip-tri=""><p>67、快速将姓名对齐</p> </a> </li><li class="active"> <a href="/edu/37_82.html" data-tooltip-tri=""><p>68、快速输入性别</p> </a> </li><li class="active"> <a href="/edu/37_83.html" data-tooltip-tri=""><p>69、按单位职务排序</p> </a> </li><li class="active"> <a href="/edu/37_84.html" data-tooltip-tri=""><p>70、自动计算合同到期日期</p> </a> </li><li class="active"> <a href="/edu/37_85.html" data-tooltip-tri=""><p>71、计算时间间隔</p> </a> </li><li class="active"> <a href="/edu/37_86.html" data-tooltip-tri=""><p>72、日期和时间的拆分</p> </a> </li><li class="active"> <a href="/edu/37_87.html" data-tooltip-tri=""><p>73、快速处理不规范的日期格式</p> </a> </li><li class="active"> <a href="/edu/37_88.html" data-tooltip-tri=""><p>74、快速填充合并单元格</p> </a> </li><li class="active"> <a href="/edu/37_89.html" data-tooltip-tri=""><p>75、效率加倍的快捷键</p> </a> </li><li class="active"> <a href="/edu/37_90.html" data-tooltip-tri=""><p>76、快速复制表格和对象</p> </a> </li><li class="active"> <a href="/edu/37_91.html" data-tooltip-tri=""><p>77、快速创建工作表副本</p> </a> </li><li class="active"> <a href="/edu/37_92.html" data-tooltip-tri=""><p>78、快速复制序列号</p> </a> </li><li class="active"> <a href="/edu/37_93.html" data-tooltip-tri=""><p>79、快速显示公式</p> </a> </li><li class="active"> <a href="/edu/37_94.html" data-tooltip-tri=""><p>80、多个单元格同时输入</p> </a> </li><li class="active"> <a href="/edu/37_95.html" data-tooltip-tri=""><p>81、快速调整显示比例</p> </a> </li><li class="active"> <a href="/edu/37_96.html" data-tooltip-tri=""><p>82、快速自动填充</p> </a> </li><li class="active"> <a href="/edu/37_97.html" data-tooltip-tri=""><p>83、快速填充（Ctrl+E）</p> </a> </li><li class="active"> <a href="/edu/37_98.html" data-tooltip-tri=""><p>84、Ctrl与数字键结合</p> </a> </li><li class="active"> <a href="/edu/37_99.html" data-tooltip-tri=""><p>85、快速将多列数据整理为1列</p> </a> </li><li class="active"> <a href="/edu/37_100.html" data-tooltip-tri=""><p>86、快速将1列数据拆分为多列</p> </a> </li><li class="active"> <a href="/edu/37_101.html" data-tooltip-tri=""><p>87、快速定位公式</p> </a> </li><li class="active"> <a href="/edu/37_102.html" data-tooltip-tri=""><p>88、快速录入数据</p> </a> </li><li class="active"> <a href="/edu/37_103.html" data-tooltip-tri=""><p>89、快速累计求和</p> </a> </li><li class="active"> <a href="/edu/37_104.html" data-tooltip-tri=""><p>90、身份证号码显示为0怎么办？</p> </a> </li><li class="active"> <a href="/edu/37_105.html" data-tooltip-tri=""><p>91、快速制作斜线表头</p> </a> </li><li class="active"> <a href="/edu/37_106.html" data-tooltip-tri=""><p>92、文本竖向显示</p> </a> </li><li class="active"> <a href="/edu/37_107.html" data-tooltip-tri=""><p>93、神奇的监视窗口</p> </a> </li><li class="active"> <a href="/edu/37_108.html" data-tooltip-tri=""><p>94、不一样的格式刷</p> </a> </li><li class="active"> <a href="/edu/37_109.html" data-tooltip-tri=""><p>95、快速美化图表</p> </a> </li><li class="active"> <a href="/edu/37_110.html" data-tooltip-tri=""><p>96、快速生成当前日期</p> </a> </li><li class="active"> <a href="/edu/37_111.html" data-tooltip-tri=""><p>97、快速找出循环引用</p> </a> </li><li class="active"> <a href="/edu/37_112.html" data-tooltip-tri=""><p>98、快速提取信息</p> </a> </li><li class="active"> <a href="/edu/37_113.html" data-tooltip-tri=""><p>99、二维表快速转换为一维表</p> </a> </li><li class="active"> <a href="/edu/37_114.html" data-tooltip-tri=""><p>100、快速多表合并</p> </a> </li></ul> <div class="iScrollVerticalScrollbar iScrollLoneScrollbar" style="overflow: hidden;"> <div class="iScrollIndicator" style="transition-duration: 1000ms; display: none; height: 8px; transform: translate(0px, -8px) translateZ(0px); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);"></div> </div> </div> </div> </div> </div> <div class="item item_one"> <div class="show-top-video"> <div class="show-top-video-l"> <div class="show-video player"> <div class="pop-up" style="display: none"> <p id="pop_msg"></p> <div class="button">好的</div> </div> <div class="videoBox_two in_two"> <video id="videoPlayer_2" oncontextmenu="return false;" check-url="/edu/" data-level="1" data-mod="train" data-id="192" isplay="0" class="player" data-cid="0" type="video/mp4" poster="//a.300.cn/video/20201012/5f8421cc0edab.jpg"> 您的浏览器不支持HTML5视频。</video> <a href="javascript:void(0);" class="video-play playBt video_two"></a> </div> </div> </div> <div class="show-top-video-r"> <div class="show-section-ul show-section-ul_two" style="touch-action: none;"> <ul class="show-section-ul-wrap" style="transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 1000ms; transform: translate(0px, 0px) translateZ(0px);"> <li class="active"> <a href="/edu/192.html" data-tooltip-tri=""> <p>第一讲：企业开设官方抖音号，都有哪些好处？</p> </a> </li><li class="active"> <a href="/edu/192_152.html" data-tooltip-tri=""><p>第二讲：关于抖音平台，企业必须了解这些</p> </a> </li><li class="active"> <a href="/edu/192_153.html" data-tooltip-tri=""><p>第三讲：什么样的内容在抖音上可以火？</p> </a> </li><li class="active"> <a href="/edu/192_154.html" data-tooltip-tri=""><p>第四讲：企业抖音号的内容策划技巧</p> </a> </li><li class="active"> <a href="/edu/192_155.html" data-tooltip-tri=""><p>第五讲：企业抖音号的运营技巧</p> </a> </li><li class="active"> <a href="/edu/192_156.html" data-tooltip-tri=""><p>第六讲：抖音蓝V认证与案例分析</p> </a> </li></ul> <div class="iScrollVerticalScrollbar iScrollLoneScrollbar" style="overflow: hidden;"> <div class="iScrollIndicator" style="transition-duration: 1000ms; display: none; height: 8px; transform: translate(0px, -8px) translateZ(0px); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);"></div> </div> </div> </div> </div> </div> </div> </div> </div>  </div>  <div class="pop-warning"> <div class="pop-login"> <p class="pop-title">所有视频需要登录后，才能观看</p> <p class="pop-p">请先登录您的帐号，即可完整播放，如果您尚未注册帐号，请先点击注册。</p> <div class="pop-btns"> <a href="//www.300.cn/sso/login" class="need_log pop-btn btn-a home_login">去登录</a> <a href="//www.300.cn/reg/register" class="mark_reg pop-btn btn-b home_reg">去注册</a> </div> <a href="javascript:void(0);" class="pop-close"></a> </div> </div>   <div class="hidden-lg"> <script src="https://s.300.cn/static/v1/libs/js/public.m.js?20230104203054"></script> <script src="https://s.300.cn/static/v1/libs/js/form.m.js?20230104203054"></script> <script type="text/javascript" src="https://s.300.cn/static/v1/js/headsearch.js?20230104203054"></script> <div class="footer m"> <div class="copy-right"> <p> Copyright © 1999-2026 中企动力科技股份有限公司（300.cn）All Rights Reserved </p> <p>京公网安备11030102010293号京ICP证010249-2</p> <p>代理域名注册服务机构：中网瑞吉思（天津）科技有限公司北京新网数码信息技术有限公司</p> <p>域名注册服务机构许可证编号：京D3-20220007</p> <p>中企动力域名投诉处理：400-660-5555-9 service4006@300.cn</p> <p>中国互联网络信息中心（受理范围：“.CN”和“.中国”域名）投诉处理 010-58813000 service@cnnic.cn</p> </div> </div> <script> $(function(){ $('#footerDialogLabel').click(function(){ $("#footerDialog").stop().fadeIn(300); }) $('#footerDialog').on('touchmove',function(e){ e.stopPropagation(); e.preventDefault(); }) $('#footerDialog #consultClose').click(function(){ $("#footerDialog").stop().fadeOut(300); }) $('#footerDialog .verify_image_footer').on('click',function(){$(this).attr('src','/verify/verify?date='+ (+new Date()))}) }) </script>  <div class="footerDialogModalWrap" id="footerDialog"> <form action="/customer/feedback" method="post"> <input type="hidden" class="log_id" name="log_id" value="" /> <input type="hidden" class="promoteSlug" name="promoteSlug" value="" />  <input type="hidden" class="channelSlug" name="channelSlug" value="" /> <input type="hidden" class="formSlug" name="formSlug" value="" /> <input type="hidden" class="landUrl" name="landUrl" value="" /> <input type="hidden" class="formType" name="formType" value="手机站底表单" />  <input type="hidden" class="eventType" name="eventType" value="m-bottom-form" /> <div class="pop-form-wrap"> <div id="consultClose" class="pop-form-close"> <img src="https://s.300.cn/v3.0/m-branch/images/consult-close.png" alt=""> </div> <p class="pop-form-title">立即联系我</p> <div class="pop-form-content"> <div class="pop-form-item"> <input type="text" name="company" placeholder="请输入公司名称"> </div> <div class="pop-form-item"> <input type="text" name="mobile" placeholder="请输入手机号码"> </div> <div class="pop-form-item"> <input type="text" name="truename" placeholder="请输入联系人"> </div> <div class="flex-row pop-form-item"> <input type="text" id="verify" name="verify" class="verifyInput" placeholder="请输入验证码"> <img style="width:auto;height: 8vw;display: inline-block; vertical-align: middle;" src="https://s.300.cn/v3.0/home/images/yzm_null.jpg" class="verify_image_footer" data-act="" alt=""> </div> <div class="pop-form-btn"> <input type="hidden" name="baiduSource" id="baiduSource" value="INTENTION_SOURCE_300_FORM02" /> <div id="consultSubmit" class="pop-form-submit consult-submit zixunsubmit">立即提交</div> </div> </div> </div> </form> </div> </div>  <div class="hidden-xs hidden-md hidden-sm _pc"> <div class="footer"> <div class="footer-topbar"> <div class="main-wrap new-w1200"> <ul class="footer-topbar-content clearfix"> <li class="footer-topbar-item"> <div class="cycle cycle1"> <span class="f28">7</span> x <span class="f28">24</span> </div> <div>全国售后支持</div> </li> <li class="footer-topbar-item"> <div class="cycle cycle2"><span class="f28">100</span> 倍</div> <div>故障时长赔付</div> </li> <li class="footer-topbar-item"> <div class="cycle cycle3"><span class="f28">26</span> 年</div> <div>26年行业服务经验</div>  </li> <li class="footer-topbar-item"> <div class="cycle cycle4"><span class="f28">70</span> 家</div> <div>全国售后支持</div> </li> <li class="footer-topbar-item"> <div class="cycle cycle5"><span class="f28">1600</span>+ 名</div> <div>超千人的设计、研发团队</div> </li> <li class="footer-topbar-item"> <div class="cycle cycle6"><span class="f28">150</span> 万</div> <div>服务企业客户150万家</div> </li> </ul> <div class="line"></div> </div> </div> <div class="footer-body"> <div class="main-wrap footer-content new-w1200"> <div class="clearfix"> <div class="footer-menu"> <a target="_blank" href="https://www.300.cn//contact.html">联系我们</a><span>|</span> <a href="https://www.300.cn//feedback.html" target="_blank">意见反馈</a><span>|</span> <a href="https://www.300.cn//aboutus/org.html" target="_blank">全国网点</a><span>|</span> <a href="https://www.300.cn//map.html" target="_blank">站点地图</a><span>|</span>  <a href="https://www.myce.cn/" target="_blank">行业站</a><span>|</span> <a href="https://mailv.zmail300.cn/webmail/login.php?msg=login&source=300" target="_blank">邮箱登录</a><span>|</span> <a href="https://en.300.cn/" target="_blank">English</a><span>|</span> <a href="http://www.ce-group.cn/" target="_blank">中企集团官网</a> </div> <div class="copyright mt10"> Copyright © 1999-2026 中企动力科技股份有限公司（300.cn）版权所有 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11030102010293 " target="_blank" style="color: #999">京公网安备11030102010293号 </a><a href="http://beian.miit.gov.cn" target="_blank" style="color: #999">京ICP证010249-2</a><span style=" display: inline-block; vertical-align: middle; margin-left: 10px; "> <script id="IPv6Script" type="text/javascript" src="https://ipv6.knet.cn/logo.dll?sn=ES19120636ND144173&w=47"></script> </span> </div> <div class="footer-menu mt10">代理域名注册服务机构：中网瑞吉思（天津）科技有限公司北京新网数码信息技术有限公司</div> <div class="footer-menu mt10">域名注册服务机构许可证编号：京D3-20220007</div> <div class="footer-menu mt10">中企动力域名投诉处理：400-660-5555-9 service4006@300.cn</div> <div class="footer-menu mt10">中国互联网络信息中心（受理范围：“.CN”和“.中国”域名）投诉处理 010-58813000 service@cnnic.cn</div> <div class="kx-wrap clearfix"> <div class=" fl"> <div class="fl"> <script id="kXScript_1" type="text/javascript" src="https://kxlogo.knet.cn/seallogo.dll?sn=2009111300100000738&h=28"></script> </div> </div> </div> </div> <div class="footer-tel clearfix"> <i class="iconfont iconshouyedibudianhua fl"></i> <div class="fl"> <div> 售后服务：<span class="sll-tel">400-660-5555-1</span> </div>  </div> </div> </div> </div> </div> </div> <script charset="UTF-8" src="https://s.300.cn/static/v1/libs/js/sensorsdata/sensorsdata.min-1.26.12.js"></script> <script charset="UTF-8"> function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null; } var sensors = window['sensorsDataAnalytic201505']; sensors.init({ server_url: 'https://cdp-event.ceboss.cn/sa?project=production', heatmap: { scroll_notice_map: 'not_collect' }, use_client_time: true, show_log: false, send_type: 'beacon', }); var productName300cn = ZQDL.util.productName300cn; var domaintmp = document.domain; var custId300cn = getCookie('300cn_custId'); domaintmp = domaintmp.replace(/dev-/, ''); domaintmp = domaintmp.replace(/test-/, ''); domaintmp = domaintmp.replace(/pre-/, ''); if(custId300cn){ sensors.login(custId300cn) } var str = { is_login: custId300cn ? true : false, product_name: productName300cn[domaintmp], }; if($('#live_carousel_id').val()!=undefined && $('#live_carousel_title').val()!=undefined){ str.live_carousel_id = $('#live_carousel_id').val(); str.live_carousel_title = $('#live_carousel_title').val(); } sensors.registerPage(str); // 设置用户属性 sensors.setProfile({ user_agent: navigator.userAgent, }); /*神策活动埋点数据*/ sensors.register({ ce_hd_slug:getCookie('ce_hd_slug')?getCookie('ce_hd_slug') : 'gz_gz_gz', user_agent: navigator.userAgent, // 新增这一行 }); sensors.quick('autoTrack'); var consoleApiBaseUri = 'https://new-api-console.300.cn'; var shopApiBaseUri = 'https://api-shop.300.cn'; var memberPcBaseUri = 'https://new-console.300.cn'; var portalBuyBaseUri = 'https://portalbuy.300.cn'; var basePcUri = 'https://www.300.cn/'; var baseMUri = 'https://m.300.cn'; var baseuriMmemberHome = 'https://h5.300.cn'; </script>  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '2627684817413321'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2627684817413321&ev=PageView&noscript=1" /></noscript>  <script> const ZQDL_CLIENT = "www"; </script> <script src="//s.300.cn/v4.0/home/js/dialog.min.js?20230104203054"></script> <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>   <div class="v30-contact"> <div class="v30-contact-item-block v30-contact-in transition v30-contact-online"> <a href="https://tb.53kf.com/code/client/10168926/3" class="shangqiao zixun_count" zixun="bd" target="_blank" > <div class="v30-contact-item flex-col"> <div class="img-block"> <img src="//s.300.cn/v3.0/home/images/contact/contact-online.svg" alt="img"> </div> <p class="v30-contact-item-p zixun_count" zixun="bd">在线咨询</p> </div> <div class="v30-contact-item-in"> <p class="v30-contact-item-in-p transition zixun_count" zixun="bd">建站在线咨询</p> </div> </a> </div> <div class="v30-contact-item-block v30-contact-in transition v30-contact-search"> <a href="javascript:void(0);"> <div class="v30-contact-item flex-col"> <div class="img-block"> <img src="//s.300.cn/v3.0/home/images/contact/contact-search.svg" alt="img"> </div> <p class="v30-contact-item-p">获取方案</p> </div> <div class="v30-contact-item-in"> <p class="v30-contact-item-in-p transition">获取建站报价/方案</p> </div> </a> <div class="v30-contact-form transition"> <p class="v30-contact-title">我们联系您<a href="javascript:void(0);" class="cf-close"><img src="//s.300.cn/v3.0/home/images/contact/contact-pop-close.svg" alt="img"></a></p> <div id="botttom_form"> <form action="/customer/feedback?is_ajax=1" method="post" id="submitform" name="submitform"> <input type="hidden" name="is_pop" value="1" /> <input type="hidden" class="log_id" name="log_id" value="" /> <input type="hidden" class="promoteSlug" name="promoteSlug" value="" />  <input type="hidden" class="channelSlug" name="channelSlug" value="" /> <input type="hidden" class="formSlug" name="formSlug" value="" /> <input type="hidden" class="landUrl" name="landUrl" value="" /> <input type="hidden" name="formType" value="PC咨询联系浮窗" />  <input type="hidden" name="eventType" value="pc-zixun" />  <input type="hidden" class="sourceUrl" name="sourceUrl" value="" /> <input type="hidden" name="baiduSource" value="INTENTION_SOURCE_300_FORM01" /> <div class="cf-form"> <div class="cf-form-item"> <input type="tel" value="" class="phoneNumber" name="mobile" id="mobile" required="required" placeholder="输入手机号"> </div> <div class="cf-form-item"> <input type="text" id="verify" name="verify" class="verify verifyInput" required="required" placeholder="验证码"> <a id="verify_mes" style="display: inline-block; vertical-align: middle;" href="javascript:void(0);"><img style="height: 28px; width:auto; display: block;" src="//s.300.cn/v3.0/home/images/yzm_null.jpg" class="verify_image" data-act="" alt=""></a> </div> <div class="cf-form-item"> <button type="button" class="btn-b submit zixunsubmit">提交</button> </div> </div> </form> </div>  </div> </div> <div class="v30-contact-item-block v30-contact-in transition v30-contact-wx"> <a href="javascript:void(0);"> <div class="v30-contact-item flex-col"> <div class="img-block"> <img src="//s.300.cn/v3.0/home/images/contact/contact-weixin.svg" alt="img"> </div> <p class="v30-contact-item-p">微信咨询</p> </div> <div class="v30-contact-item-in"> <p class="v30-contact-item-in-p transition flex-col" style="line-height: normal;">扫一扫添加<br>动力姐姐微信</p> </div> </a> <div class="v30-contact-qr-show"> <div class="img-block"> <img src="https://a.300.cn/banner/20201209/5fd0705ba8c9b.jpg" alt="img"> </div> </div> </div> <div class="v30-contact-item-block v30-contact-top"> <div class="v30-contact-item flex-col"> <div class="img-block"> <img src="//s.300.cn/v3.0/home/images/contact/contact-top.svg" alt="img"> </div> <p class="v30-contact-item-p">TOP</p> </div> </div> </div> <script> if ($(".v30-contact").length > 0) { $(".v30-contact-in:not(.v30-contact-search)").on("mouseenter", function() { $(this).addClass("cur").siblings(".v30-contact-in").removeClass("cur"); $(".v30-contact-search").removeClass("cur"); $(".v30-contact-search").find(".v30-contact-form").removeClass("cur"); }).on("mouseleave", function() { $(this).removeClass("cur"); }); $(".v30-contact-search").on("mouseenter", function() { $(this).addClass("cur").siblings(".v30-contact-in").removeClass("cur"); setTimeout(function(){ if ($(".v30-contact-search").hasClass("cur")) { } }, 1000); }).on("mouseleave", function() { if ($(this).find(".v30-contact-form").hasClass("cur")) { return; } else { $(this).removeClass("cur"); } }); $(".v30-contact-search a").on("click", function() { if ($(this).siblings(".v30-contact-form").hasClass("cur")) { $(this).siblings(".v30-contact-form").removeClass("cur"); $(this).parent(".v30-contact-search").removeClass("cur"); } else { $(this).parent(".v30-contact-search").addClass("cur"); $(this).siblings(".v30-contact-form").addClass("cur"); $(this).siblings(".v30-contact-form").find(".float-v30-contact").show(); } }); $(".v30-contact-wx").on("mouseenter", function() { $(this).addClass("cur").siblings(".v30-contact-in").removeClass("cur"); setTimeout(function(){ if ($(".v30-contact-wx").hasClass("cur")) { $(".v30-contact-qr-show").fadeIn("fast"); } }, 600); }).on("mouseleave", function() { $(this).removeClass("cur"); $(".v30-contact-qr-show").fadeOut("fast"); }); $(".cf-close").on("click", function() { $(this).parents(".v30-contact-search").removeClass("cur"); $(this).parents(".v30-contact-form").removeClass("cur"); }); $(window).on("load scroll", function() { var top = $(document).scrollTop(), wHeight = $(window).height(); if (top > wHeight) { $(".v30-contact-top").fadeIn("fast"); $(".v30-contact").css({ "height": 576 }); } else { $(".v30-contact-top").hide(); $(".v30-contact").removeAttr("style"); } }); $(".v30-contact-top").on("click", function() { $("html,body").stop().animate({ scrollTop: 0 }, 500); }); } </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ad721a4a8912aa77ef574a4de1ff8526"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/10168926/3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script> <script src="//s.300.cn/plugins/common/js/public.js?20230104203054"></script> <script type="text/javascript"> ZQDL.util.path = {"shopapi":"api-shop.300.cn","account":"https:\/\/account.300.cn","oldapi":"\/\/console.300.cn","consoleBuy":"\/\/portalbuy.300.cn","consoleApi":"\/\/new-api-console.300.cn","console":"\/\/new-console.300.cn","oldconsole":"\/\/console.300.cn\/platform","300cn":"","analytics":{"cnzz":"1260942543","baidu":"6f0f6cbf8573c4abf74207e5f6cf014","qq":"XzgwMDE0NDcwMF8zODA4NzdfODAwMTQ0NzAwXw"},"surl":{"url":"http:\/\/wx.300.cn\/index.php","tenant_id":1,"channel_type":1,"token_id":"ab0d4dfcd4cf0e76825641696088f919","passwordKey":"app#interface!"}}; ZQDL.util.protocol = ("https:" == document.location.protocol) ? " https://" : " http://"; ZQDL.util.zixun = {"tq":{"work":["08:59","17:45"],"no_work":[],"url":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=8958279","qq":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=8958279"},"bd":{"work":["17:45","08:59"],"no_work":["00:00","23:59"],"url":"http:\/\/p.qiao.baidu.com\/cps\/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2210515806%22%2C%22userId%22%3A%2222490479%22%7D","qq":"http:\/\/p.qiao.baidu.com\/cps\/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2210515806%22%2C%22userId%22%3A%2222490479%22%7D"},"360":{"work":["17:45","08:59"],"no_work":[],"url":"http:\/\/p.qiao.baidu.com\/cps\/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2210515806%22%2C%22userId%22%3A%2222490479%22%7D","qq":"http:\/\/p.qiao.baidu.com\/cps\/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2210515806%22%2C%22userId%22%3A%2222490479%22%7D"},"tx":{"work":["17:45","08:59"],"no_work":[],"url":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=9246087","qq":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=9246087"},"sg":{"work":["17:45","08:59"],"no_work":[],"url":"http:\/\/p.qiao.baidu.com\/cps\/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2210515806%22%2C%22userId%22%3A%2222490479%22%7D","qq":"http:\/\/p.qiao.baidu.com\/cps\/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2210515806%22%2C%22userId%22%3A%2222490479%22%7D"},"sm":{"work":["17.45","08.59"],"no_work":[],"url":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=8958280","qq":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=8958280"},"wy":{"work":["17.45","08.59"],"no_work":[],"url":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=8958280","qq":"http:\/\/float2006.tq.cn\/static.jsp?version=vip&admiuin=8861514<ype=0&iscallback=1&page_templete_id=18369&is_message_sms=0&is_send_mail=0&uin=8958280"},"baidu_url":"http:\/\/p.qiao.baidu.com\/cps\/chat?siteId=10660374&userId=22490479","qq_url":"http:\/\/wpa.b.qq.com\/cgi\/wpa.php?ln=1&key=XzgwMDE0NDcwMF80NjQ2ODlfODAwMTQ0NzAwXzJf"}; </script> <script src="//s.300.cn/plugins/common/js/url.js?20230104203054"></script> <script> $(function () { URL_obj.init({ redirectTo: "m", isFilterUrl: true }); }); </script> <script src="//s.300.cn/plugins/swiper/js/swiper.min.js?20230104203054"></script> <script src="//s.300.cn/plugins/iscroll/iscroll.min.js?20230104203054"></script> <script src="//s.300.cn/plugins/player/js/show.js?20230104203054"></script> <script> var video1 = document.getElementById('videoPlayer_1'); var video2 = document.getElementById('videoPlayer_2'); var state; video1.onclick = function () { video2.pause(); if (video1.paused) { video1.play(); } else { video1.pause(); } }; video1.addEventListener('play', function () { xuanfu1(); $(".videoBox").css("z-index", "10"); $(".videoBox_two").css("z-index", "7"); }); video1.addEventListener('pause', function () { /* $(".videoBox").css("z-index","-1"); }); video2.onclick = function () { video1.pause(); if (video2.paused) { video2.play(); } else { video2.pause(); } } video2.addEventListener('play', function () { xuanfu2() $(".videoBox_two").css("z-index", "10") $(".videoBox").css("z-index", "7") }); video2.addEventListener('pause', function () { }); function xuanfu1() { video2.pause(); var ha = $('.videoBox').height(); $(window).scroll(function () { if ($(window).scrollTop() > ha + 500) { $('.videoBox').css('bottom', '0px'); $('.videoBox').removeClass('in').addClass('out'); } else { $('.videoBox').removeClass('out').addClass('in'); } }); } function xuanfu2() { video1.pause(); var ha = $('.videoBox_two').height(); $(window).scroll(function () { if ($(window).scrollTop() > ha + 500) { $('.videoBox_two').css('bottom', '0'); $('.videoBox_two').removeClass('in_two').addClass('out_two'); } else { $('.videoBox_two').removeClass('out_two').addClass('in_two'); } }); } $(".unfold").each(function () { $(this).on("click", function () { if ($(this).hasClass("cua")) { var opt_slide_height = $(this).parents(".head").siblings(".solution").find(".designer_leave").height(); $(this).parents(".head").siblings(".solution").find(".right").animate({ "height": opt_slide_height, }, 300); $(this).parents(".head").siblings(".solution").find(".right").css("padding-bottom", "20px"); $(this).removeClass("cua"); $(this).find("span").text("收起"); $(this).find(".img_a").hide().siblings(".img_b").show(); } else { $(this).parents(".head").siblings(".solution").find(".right").animate({ "height": 102, }, 300); $(this).parents(".head").siblings(".solution").find(".right").css("padding-bottom", "0px"); $(this).addClass("cua"); $(this).find("span").text("展开"); $(this).find(".img_b").hide().siblings(".img_a").show(); } }); }) var page = ""; var maxPage = ""; var jsonCateList = ""; $(function () { var section_scroll = new IScroll('.show-section-ul', { scrollbars: 'custom', interactiveScrollbars: true, mouseWheel: true, }); var current_section = { init: function () { var cur = $("#series_title").val(); $(".show-section-ul ul li").each(function () { var _this = $(this); if ($.trim(_this.find("a > p").html()) === cur) { _this.addClass("active"); } }); section_scroll.scrollToElement(".show-section-ul .active", 1000, true, true, IScroll.utils.ease.quadratic); if (section_scroll.hasVerticalScroll) { $(".show-section-ul .iScrollVerticalScrollbar").show(); section_scroll.refresh(); }; } } current_section.init(); $(".pop-up .button").on("click", function () { $(this).parents(".pop-up").hide() }) }); $(function () { var section_scroll = new IScroll('.show-section-ul_two', { scrollbars: 'custom', interactiveScrollbars: true, mouseWheel: true, }); var current_section = { init: function () { var cur = $("#series_title").val(); $(".show-section-ul_two ul li").each(function () { var _this = $(this); if ($.trim(_this.find("a > p").html()) === cur) { _this.addClass("active"); } }); section_scroll.scrollToElement(".show-section-ul_two .active", 1000, true, true, IScroll.utils.ease.quadratic); if (section_scroll.hasVerticalScroll) { $(".show-section-ul_two .iScrollVerticalScrollbar").show(); section_scroll.refresh(); }; } } current_section.init(); $(".pop-up .button").on("click", function () { $(this).parents(".pop-up").hide() }); var regs = $('.home_reg'); if (regs.length > 0) { var url = 'https://' + window.location.hostname + window.location.pathname; regs.each(function(){ $obj=$(this); $obj.attr({ "href": "/reg/register?referer=" + encodeURIComponent(url) + "?ch=mkt_edu_seo_196" }); }); if (ZQDL.cookie.get("vt_origin")) { ZQDL.cookie.set("vt_origin", "mkt_edu_seo_196", { domain: '300.cn' }); } } }); </script>  <script src="//s.300.cn/plugins/common/js/form.js?20230104203054"></script> <script type="text/javascript"> ZQDL.apps.vistCount.load('https://s.300.cn/plugins/common/js/hm.js', function(){ var visittrack_siteId ="300cn"; var visittrack_url="https://s.300.cn/plugins/common/images/a.png"; var visittrack_memberId = 300; var usrid= VisitTrack.getSessionValueFlowing(); if(usrid){ ZQDL.cookie.set('userId',usrid); ZQDL.apps.visitSessionId=usrid; } VisitTrack.visittrack_log( visittrack_siteId, visittrack_url, visittrack_memberId); ZQDL.apps.vistCount.init(); ZQDL.apps.vistCount.initForm(); ZQDL.apps.vistCount.countUrl = visittrack_url; $('.zixun_count').on('click',function(){ZQDL.apps.vistCount.zixunClick(this);}); $('.visit_count').on('click',function(){ZQDL.apps.vistCount.visitCount(this);}); $('.baidu_call').on('click',function(){ZQDL.apps.vistCount.baiduCallClick(this);}); }) </script>  <script src='//visitor.weiwenjia.com/public/js/visitor/index.js?siteId=1748&oid=11651423&signature=Fkld19qGW4yRDHy6ghLO/g==' data-visitor='visitor-identify' ></script> <script src="//s.300.cn/plugins/common/js/loadtime.js?20230104203054"></script> <div class="popup-main"> <div class="popup-block"> <div class="popup-title">我们尽快联系您<span class="popup-close close" tabindex="0"></span></div> <div class="popup-content"> <div class="popup-form"> <form action="/customer/feedback?is_ajax=1" method="post" id="pop_form" name="submitform"> <input type="hidden" class="log_id" name="log_id" value="" /> <input type="hidden" class="promoteSlug" name="promoteSlug" value="" />  <input type="hidden" class="channelSlug" name="channelSlug" value="" /> <input type="hidden" class="formSlug" name="formSlug" value="" /> <input type="hidden" class="landUrl" name="landUrl" value="" /> <input type="hidden" class='formType' name="formType" value="" />  <input type="hidden" class="eventType" name="eventType" value="" />  <input type="hidden" class="sourceUrl" name="sourceUrl" value="" /> <div class="popup-form-item"> <label class="popup-label">公司名称</label> <input type="text" value="" name="company" id="company" class="popup-input" placeholder="输入公司名"> </div> <div class="popup-form-item required"> <label class="popup-label">手机号码</label> <input type="text" value="" class="required popup-input phoneNumber" name="mobile" id="mobile" required_msg="手机号码不能为空" placeholder="输入手机号"> </div> <div class="popup-form-item"> <label class="popup-label">联系人</label> <input type="text" value="" name="truename" id="name" class="popup-input" placeholder="输入联系人"> </div> <div class="popup-form-item required"> <label class="popup-label">验证码</label> <input type="text" value="" class="required popup-input verify verify-input verifyInput" id="verify" name="verify" required_msg="验证码不能为空" placeholder="输入验证码" /> <a id="verify_mes" style="display: inline-block; vertical-align: middle;" href="javascript:void(0);"><img style="height: 34px; width:auto; display: block;" src="//s.300.cn/v2.0/home/images/yzm_null.jpg" class="verify_image" data-act="" alt=""></a></div> <div class="popup-form-item popup-button"> <button type="button" class="btn-b popup-btn close">取消</button> <button type="button" class="btn-a popup-btn confirm zixunsubmit">提交</button> </div> </form> </div> </div> </div> </div> </body> </html>