在 web 应用中，免不了需要从 web 服务器中获取资源，如果可以将所有的资源都合并到一个 .zip 文件中，这时候只需要做一次请求，这样既减少了服务器的压力，同时也可以加快 web 应用的呈现速度。...', 'js/ht-modeling.js', 'obj/equipment.mtl', 'obj/equipment.obj', 'image/equipment.jpg' 在资源加载顺序中，要标明响应资源的相对于...第二步、在 html 文件中引入 JSZip 和 JSZipUtils 库，接下来就是请求 .zip 文件，并对 .zip 文件做解析处理。...在 .zip 文件中有包含图片文件，JSZip 只能获取到图片文件的 ArrayBuffer 数据，这时需要将 ArrayBuffer 转换为 Base64 才能够为浏览器所识别，所以这里定义了一个转换函数...，有涉及到 3D 模型数据与 HT 3D 拓扑应用的结合，在 .zip 文件中的 obj 目录就是存放 3D 模型数据，在文件读取中，将 3D 模型数据以文本对形势读取出来存放到变量中，再将数据传递到
大家好，我是爱撸码的开源大叔！ Excel 作为办公软件中使用最频繁的产品之一，是我们办公活动中必不可缺的一环。如果我们的系统中能够集成 Excel，相比会是我们一大亮点。...今天大叔就给大家推荐一款强大的、完全开源的类 Excel 在线表格：Luckysheet。 特性 ---- Luckysheet 功能强大、配置简单、完全开源，下面给大家介绍其中一部分特性。 ️...格式设置 样式 (修改字体样式，字号，颜色或者其他通用的样式) 条件格式 (突出显示所关注的单元格或单元格区域；强调异常值；使用数据栏、色阶和图标集（与数据中的特定变体对应）直观地显示数据) 文本对齐及旋转...PDF) 树形菜单 (类似 Excel 中的分级显示（分组）) 表格新功能 (类似 Excel 中表格的筛选器和切片器) CSV,TXT导入及导出 (专为 Luckysheet 打造的导入导出插件，支持密码...、水印、公式等的本地导入导出) 插入svg形状 (支持Pen tool (opens new window)的插入、修改和删除，并且随表格的变动而产生变化) 文档 (完善文档和API) 使用步骤 第一步
原理： 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理) function autoPlayAudio1() { wx.config...({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '',...wx.ready(function() { document.getElementById('audio').play(); }); } 就是关键的那一句
"44年前我们就把人类送上了月球了，但现在我们仍然无法在css中实现垂直居中 -James Anderson" 难题 在CSS中对元素进行水平居中是非常简单的；如果是一个行内元素，就对父元素设置text-align...就这样在前端开发圈内看似及其常见的需求，从理论上似乎极其简单，在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤为如此....一路走来走了不少弯路，希望初入前端的小伙伴们可以走的更加通畅，总结分享给大家： 下面就让我们来探索现代css的强大威力： 基于表格布局法的解决方案 利用表格的显示模式，需要用到一些冗余的HTML元素 思路来源...，固定宽度和高度的情况是极少的，对于那些需要居中的元素来说，其尺寸往往是由其内容决定的.如果能够找到一个属性的百分比以元素自身的宽高作为基准，那么难题就迎刃而解！...但是没有任何技巧十全十美，我们需要注意几点： 我们有时不能选择绝对定位，他对整个布局影响太过强烈 如果需要居中的元素已经在高度上超过了视口，那它的顶部部分就会被视口裁掉 在某些浏览器中，这个方法可能会导致元素的显示模糊
什么是响应式网页 Responsive Web Page，响应式网页/自适应网页，即一个页面既可以在 PC 浏览器中浏览，也可以在手机、平板中浏览，并且配合不同设备有不同的响应结果，响应式网页的特点：...视口 － viewport IOS 中的 Safari 最早引入的概念 视口：移动设备中，浏览器里显示网页的一块区域(PC 端会忽略) 对于响应式网页，设置视口的信息： (1)....:767px)"> 不足：即使不满足当前设备条件的 CSS 文件也会被请求，但不会生效 ②....在客户端浏览器中编译 Less - 不推荐使用 ①. 编写 xx.less 文件 ②. 编写 xx.html，引入 xx.less;再引入 less.js ③....浏览器访问 xx.html 会自行下载 xx.less，less.js 文件，并且在客户端进行编译转换成 xx.css (2). 在服务器端编译 less - 推荐使用 ①.
做响应式设计时，一定要确保 HTML 包含了各种屏幕尺寸所需的全部内容。你可以对每个屏幕尺寸应用不同的 CSS，但是它们必须共享同一份 HTML。...虽然要先给移动端写布局，但是心里装着整体的设计，才能帮助我们在实现过程中做出合适的决定。 断点——一个特殊的临界值。屏幕尺寸达到这个值时，网页的样式会发生改变，以便给当前屏幕尺寸提供最佳的布局。...在媒体查询断点中推荐使用 em 单位。在各大主流浏览器中，当用户缩放页面或者改变默认的字号时，只有 em 单位表现一致。以 px 或者 rem 单位为断点在 Safari 浏览器里不太可靠。...# 给大视口添加样式 https://codepen.io/cellinlab/pen/bGaxYNb # 处理表格 在移动设备的流式布局里，表格的问题特别多。如果表格的列太多，很容易超过屏幕宽度。...不支持的浏览器会根据 src 属性加载相应的 URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做出调整。 图片作为流式布局的一部分，请始终确保它不会超过容器的宽度。
在Word中，只要按住【ALT】键，再用鼠标点击这个单词，即可在右侧的【信息检索】任务窗格看到翻译的结果。并且还可以选择多种语言互译，这一招在IE浏览器中也同样适用！...压缩图片，减小文档尺寸 如果文档中插入过多的图片会使文档尺寸变得十分臃肿，在Word中可以通过压缩图片的方式在一定程度上减轻这种负担。...在【选项】中还可以对图片压缩质量进行控制，如果只是为了电子传阅，选择【电子邮件（96dpi）】就能在很大程度上缩小图片的尺寸了。...自动重复标题行 在Word中插入表格的时候往往表格在一页中显示不完全，需要在下一页继续，为了阅读方便我们会希望表格能够在续页的时候自动重复标题行。...只需选中原表格的标题行，然后在【表格工具】－【布局】中选择【重复标题行】即可，在以后表格出现分页的时候，会自动在换页后的第一行重复标题行。
css样式 如果只考虑这些兼容性比较好的客户端，那么你可以在谷歌浏览器测试通过后即发送模板，然后你就可以下班了 但愿你可以这么好运。...而实际上，由于邮件客户端实现标准不一，很多时候需要兼容其他客户端场景 于是实现出来的方案是折中或者说是一个降级的方案。 在实现过程中碰到一些问题，总结出来。...兼容性问题 样式使用内联，outlook中会去掉模板头中style中的样式 布局使用table，因为outlook中会将div转换为内联样式 比如要实现一块内容居中的效果，需要外层套一个宽度100%的table...邮箱模版中属性兼容性：https://www.campaignmonitor.com/css/ 代码兼容性验证：http://validator.w3.org/ 邮箱功能：outlook中自带查看源文件功能...，可以看到经过outlook解析后的模版内容 本地浏览器测试：使用chrome，IE8来测试兼容性 本地客户端测试：使用notepad++，自带插件，可以调用本地outlook客户端发送模版(菜单路径：
网页的组成 浏览器 代替用户向服务器发请求 接收并解析数据展示给用户 服务器 存储数据 处理并响应请求 协议 规范数据在传输过程中的打包方式 开发前的准备 运行环境：浏览器，设置chrome为默认浏览器...四级标题 五级标题 六级标题 段落标签： 段落文本 普通文本标签： 行分区标签，用于对特殊文本特殊处理 格式标签： 浏览器会忽略代码中的换行和空格...想要实现页面中的换行，需要借助于换行标签。 字符实体： 某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。...此时需要将这类字符转换为其他的形式书写 例： 使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号...合并之后需要删除被合并的单元格，保证表格结构完整 image.png 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入中 <table border
电子邮件在本质上只是个 HTML 文档，跟网页一样，只不过是在邮件客户端、面非网络浏览器中呈现视觉效果。但除此之外，二者都能渲染，也就是把 HTML 代码转换成文本、图形和图像——即内容的可视化。...其实在 2005 年那会，网站和邮件系统的开发其实非常相似。浏览器和邮件客户端会以几乎相同的方式呈现 HTML，而且功能也相差不大。...而且即使这样，成功率也不是 100%…… 而且更离奇的是，如今 Web 开发中最糟糕的实践竟然仍是邮件开发中的最佳实践。下面，就让我们一探究竟。...也就是说，在 Outlook 中打开电子邮件基本上相当于在 Word 中打开文档，所以我们得先摆正思路——手头开发的并不是电子邮件，而是 Word 文档。...但如果稍不注意，这里也有陷阱： 在 Outlook 中，我们没办法直接向元素中添加 display:none。相反，大家需要把它打包进，然后再隐藏掉。
一、固定定位概念语法 ---- 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;...固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的 本质是一种 特殊的绝对定位 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...DOCTYPE html> html lang="en"> 固定定位示例 /* 设置高度
在高于IE6(包含)的浏览器中，统一都使用IE6内核渲染 在低于IE6的浏览器中，使用当前浏览器中最高版本的内核进行渲染 IE=...class 1、定宽容器 在不同宽度大小的设备上均提供了固定的宽度值 类 ：.containe lg :...允许放置列,在每行中，最多会等分成12列。...所以在创建列的时候要指定列的宽度(当前列要占据几列的宽) 4、列 会根据适用的屏幕分成4中类型 类： 1、...-2 : 在超小屏幕中，占两列的宽(width:16.66%) ...... .col-xs-12: 在超小屏幕中
您可以在单个选项卡式窗口中打开多个文档/文件例如使用浏览器IE 8/9/10、Firefox和Google ChromeKutools for Excel、Word、Outlook是功能强大的插件拥有适用于...Office Tab简介Office选项卡支持在一个选项卡式窗口中打开，查看，编辑多个Office文档，例如Web浏览器-Google Chrome，Firefox等。...使用固定的标签长度，所有标签的长度都相同。...04、在Outlook中批量回复多封电子邮件Kutools for Outlook 提供了一个方便的工具，可以帮助快速批量回复多封相同内容的邮件，这样你就不用一一回复邮件了，只需要选中所有邮件，然后使用指定的模板回复邮件即可一次...06、在Outlook中轻松处理重复项新的删除重复的电子邮件/联系我们/任务功能可以帮助您一次根据指定的条件轻松删除重复的电子邮件、联系人和任务，这有助于保持您的 Outlook 文件夹干净并释放 Outlook
(4)fixed固定定位 a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。 b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。...4、：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。 5、：表格的一个单元格，一行中包含几对这行中就有几个单元格。 6、表格中列的个数，取决于一行中数据单元格的个数。...(1)摘要：表格简介文本"> 摘要的内容不会在浏览器中显示。...1.用空格占位符 但 有不间断的特性。即连续的 会在同一行内显示。即使有多个 ，浏览器也不会把它们回车拆行。...空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 标签。 nowrap 文本不会换行，文本在同一行上继续，直到遇到为止。
请注意，有几种技巧十分流行，但在这里并不会深入探讨，原因如下： 1、表格布局法(利用表格的显示模式)需要用到一些冗余的 HTML 元素，实现起来不够优雅简洁，因此这里不多介绍。...接下来，只要换用基于百分比的 CSS 变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸写死。...3、在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因 为元素可能被放置在半个像素上。...我们之所以要讨论其他方案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。但其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。... 我们先给这个 main 元素指定一个固定的尺寸，然后借助 Flexbox 规范 所引入的 align-items 和 justify-content 属性，我们可以让它内部的文本也实现居中
试想一下，你在夜深人静的时候，准备睡前查看一下订阅的邮件周报，而且还是一个精心设计过的HTML富文本邮件。...6 对于img标签，用属性来控制尺寸，style = "width:100px"这样的代码在outlook2013会失效，而且图片会把定宽的td和table撑开。...outlook2013之前又只支持用attr来固定图片宽高，css定义width完全无效，还会撑破td和table），一旦写了固定值就会影响到上面说的手机邮箱客户端，怎么处理这个冲突就是关键点了。...="vertical-align:middle">文字 放到outlook里当然无效，td本身的垂直居中在各个版本中的表现也是各不相同。.../article/AA-00861/0/Issues-with-HTML-Emails-in-Different-Email-Clients.html 文章中的链接如无法打开，可以点击下方链接跳转到知乎查看
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了...在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。...1.0表示不缩放 user-scalable – 用户是否可以手动缩放,no表示不可以手动缩放 忽略将页面中的数字识别为电话号码： 的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。...我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局 ###调整html元素大小的值### 有css与js两种方式 css方式： html { font-size:
Outlook糟糕的兼容性我们之前从未编写过HTML邮件，也就完全没考虑过各个邮件客户端对HTML的兼容性问题。在网上找到一些资料后，我们被Outlook对HTML的兼容性之差所震惊。...首先，Windows Outlook并没有一个自己的HTML渲染引擎，而是使用Word的渲染引擎去解析HTML。...与列表的渲染不同，在表格中我们没有像列表渲染一样先预处理数据再生成DOM字符串，而是使用了在遍历中边处理数据边生成DOM字符串的方法。...在表格的渲染中，我们没有像之前的代码一样使用renderChildBlocks把所有子文档块都渲染出来添加进HTML字符串中，而是使用了新的renderSpecifyBlock方法，给定block_id...: 820（飞书文档最大宽度），使用如下的算法来计算缩放后的图片大小：最后我们在样式中设置maxWidth = 100%（在Windows的Outlook中不会生效）来在大多数客户端中保证图片宽度不会撑出父容器
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
