随笔分类 - CSS
摘要：tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会
阅读全文
posted @ 2020-06-05 17:22
前端一点红
摘要：Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样，它的目的是解决这些团队使用 npm 面临的少数问题，即： 安装的时候无法保证速度/一致性 安全问题，因为 npm 安装时允许运行代码
阅读全文
posted @ 2020-06-05 17:16
前端一点红
摘要：在常规网页开发中（单页应用除外哈），经常会遇到把一些通用内容的页面集中到一个页面中，需要使用这些页面只需要包含引入即可，这样有利于维护和修改，当通用页面修改时只需更改一个文件就可以了，不需要每个文件单独处理。 例如：一个网站的页脚信息在每个网页都是一样的，把它命名为footer.html文件，在其他
阅读全文
posted @ 2020-06-05 17:07
前端一点红
摘要：在网页布局中，通常需要实现左边定宽右边自适应布局，默认html的结构如下： <div class="box"> <div class="left">左边定宽</div> <div class="right">右边自适应</div> </div 1、浮动布局 左边设置左浮动，右边宽度设置100% .l
阅读全文
posted @ 2020-06-05 17:05
前端一点红
摘要：前言 在JSBridge实现后，前端网页与原生的交互已经通了，接下来就要开始规划API，明确需要提供哪一些功能来供前端调用。 但是在这之前，还有一点重要工作需要做： 明确H5与Native的职责划分，确定哪一些功能可以由H5实现，哪一些功能只能由原生实现 Native与H5职责划分 使用Hybrid
阅读全文
posted @ 2020-06-05 16:58
前端一点红
摘要：Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 nodeType值为1 nodeName为元素标签名 nodeValue为null parentNode
阅读全文
posted @ 2020-06-03 20:25
前端一点红
摘要：渐进式 Web 应用是利用现代浏览器的特性，可以添加到主屏幕上，表现得像原生应用程序一样的 Web 应用程序。 什么是渐进式 Web 应用 渐进式 Web 应用（PWA）本质上与普通的网站没有什么不同 - 它也是由 HTML、CSS 和 JavaScript 组成，并且存活于浏览器中。将 PWA 与
阅读全文
posted @ 2020-06-03 20:22
前端一点红
摘要：最近一两年前端最火的技术莫过于ReactJS，即便你没用过也该听过，ReactJS由业界顶尖的互联网公司facebook提出，其本身有很多先进的设计思路，比如页面UI组件化、虚拟DOM等。本文将带你解开虚拟DOM的神秘面纱，不仅要理解其原理，而且要实现一个基本可用的虚拟DOM。 1.为什么需要虚拟D
阅读全文
posted @ 2020-06-03 20:17
前端一点红
摘要：背景 最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行，碰到某个国家的地标就弹出该国的相应say hello的tip，要求横屏显示，不能竖屏。 然而当用户竖屏打开时，而且没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。 而且有些机型有些app不能横
阅读全文
posted @ 2020-06-03 20:14
前端一点红
摘要：看到一个需求，如下图，知乎手机网页版的一个视觉效果，对内容很长的部分有一个渐变的隐藏的效果，个人觉得这个设计还是很好的，符合手机大小的应用场景，没有一下子显示完全，可以很快的滑倒页面底部，一定程度上减少了滑动时间，用户体验很好，对整个页面有一个大概的预览，强迫症会感觉很爽。 具体怎么实现这个效果，分
阅读全文
posted @ 2020-06-03 20:12
前端一点红
摘要：calc的介绍 在css3样式中有一个类似与函数的计算属性calc()，它主要用于指定元素的长度，无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px，calc是支持单位的混合使用
阅读全文
posted @ 2020-06-03 20:09
前端一点红
摘要：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。 伪类 用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以
阅读全文
posted @ 2020-06-03 20:07
前端一点红
摘要：局部属性和全局属性 局部属性：有些元素能规定自己的属性，这种属性称为局部属性。比如link元素，它具有的局部属性有href、 rel、 hreflang、 media、 type、 sizes这六个。全局属性：可以用来配置所有元素共有的行为，这种属性称为全局属性，可以用在任何一个元素身上。 1、ac
阅读全文
posted @ 2020-06-03 20:04
前端一点红
摘要：使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ 1 img.desaturate { 2 filter: grayscale(100%); 3 -webkit-filter: g
阅读全文
posted @ 2020-06-02 12:36
前端一点红
摘要：在h1标签中，新增span标签来保存标题内容，然后将其样式设置为display:none <style> h1 { width: 64px; height: 64px; background: url(); font: 12px/1 '微软雅黑'; } span { display: none; }
阅读全文
posted @ 2020-06-02 11:19
前端一点红
摘要：序 display有几种属性：inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置；block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义；为了弥补inline和block的不足，又扩充了inline-block
阅读全文
posted @ 2020-06-02 11:06
前端一点红
摘要：最近在做公司内部的一个的一个SDK的重构，这里总结一些经验分享给大家。 类型检查和智能提示 作为一个SDK，我们的目标是让使用者能够减少查看文档的时间，所以我们需要提供一些类型的检查和智能提示，一般我们的做法是提供JsDoc，大部分编辑器可以提供快捷生成JsDoc的方式，我们比较常用的vscode可
阅读全文
posted @ 2020-06-02 11:02
前端一点红
摘要：场景概述 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开
阅读全文
posted @ 2020-06-02 10:53
前端一点红
摘要：PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。 JS代码： <script type="text/javascript"> function fileSel
阅读全文
posted @ 2020-06-02 10:46
前端一点红
摘要：Sticky Footer 经典的上-中-下布局。 当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方 demo link <body> <header>HEADER</header> <article>CON
阅读全文
posted @ 2020-06-02 10:44
前端一点红
浙公网安备 33010602011771号