随笔分类 - HTML
摘要：我们都知道需要给html和body标签设置了高度height:100%之后，再给内部的div设置height:100%的时候，内部div的高度100%才会起到作用。这是由于：%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height。解决如下： html,body{ heigh
阅读全文
posted @ 2020-06-11 00:44
前端一点红
摘要：一、基本概念 刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？ 你可以点击这里：QQ空间广告示意demo 接下来就说说这个效果的具体实现思路： 将两张图片通过定位，相对于图片容器
阅读全文
posted @ 2020-06-10 23:32
前端一点红
摘要：<pliga' 1,="" 'onum'="" 'kern'="" 1;="" margin:="" 0px="" 1.75em;="" text-rendering:="" geometricprecision;="" color:="" rgb(58,="" 65,="" 69);=""
阅读全文
posted @ 2020-06-10 23:28
前端一点红
摘要：前言 前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获（毕竟我还是个菜鸟）以及代码的实现，希望能够帮到一些
阅读全文
posted @ 2020-06-10 23:23
前端一点红
摘要：PX、PT、EM等都是我们常用的长度单位，尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗？这里为大家找到了一个px、pt、em和percent大小转换的一个表格，尤其针对字体大小的转换十分方便。希望大家能够喜欢！ 熊猫办公https://www.wode007.co
阅读全文
posted @ 2020-06-10 23:20
前端一点红
摘要：最近一段时间，关于 通过 CSS 创建 “keylogger”（键盘记录器） 的讨论很多。 有些人呼吁浏览器厂商去“修复”它。有些人则深入研究，表示它仅能影响通过类 React 框架建立的网站，并指责 React。而真正的问题却在于认为第三方内容是“安全”的。 第三方图片 <img src="htt
阅读全文
posted @ 2020-06-10 23:16
前端一点红
摘要：写在前面 在讨论回流与重绘之前，我们要知道： 浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上
阅读全文
posted @ 2020-06-10 23:14
前端一点红
摘要：用户上传头像然后截图的需求很常见，很多做法是把图像发送到后端，把裁剪后的结果发送给浏览器，这种方式会增加处理时延。最近正好学习了HTML5里的canvas，发现它的图片处理功能比较强大，就打算用canvas提供的API实现纯前端的剪切。这里头关键有三步：显示未经处理的图片，得到裁剪区域，显示裁剪后的
阅读全文
posted @ 2020-06-10 23:11
前端一点红
摘要：摘要 在各种BS架构的应用程序中，往往都希望服务端能够主动地向客户端推送各种消息，以达到类似于邮件、消息、待办事项等通知。 往BS架构本身存在的问题就是，服务器一直采用的是一问一答的机制。这就意味着如果客户端不主动地向服务器发送消息，服务器就无法得知如何给客户端推送消息。 随着HTML、浏览器等各项
阅读全文
posted @ 2020-06-09 18:36
前端一点红
摘要：在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。 （1）背景色过渡变化 下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开
阅读全文
posted @ 2020-06-09 18:29
前端一点红
摘要：在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法： 1、UI背景图实现 直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！ 2、 css3中transform属性 其实了解css3的朋友，一看到这个
阅读全文
posted @ 2020-06-09 18:15
前端一点红
摘要：在移动端h5开发的时候，发现如果input在页面底部，当触发input焦点的时候会弹出系统虚拟键盘，虚拟键盘会遮挡input输入框。这会很影响用户体验，于是在网上找到了如下的解决办法： 方法一:使用window.scrollTo() 1 <input type="text" onfocus="inp
阅读全文
posted @ 2020-06-09 18:06
前端一点红
摘要：为一个网站选择类型尺寸是项艰巨的任务. 标题和段落的尺寸在网页布局和可读性方面处理起来很棘手. 谢天谢地, 我们有模块化缩放可以引导我们. 模块化缩放是一个数字序列以某种方式关联另一个序列. Tim Brown,更多版面 在版面中应用的模块化比例实现了视觉层次效果与和谐的比例。它们提供了一组数值作为
阅读全文
posted @ 2020-06-09 17:51
前端一点红
摘要：前言 前端框架时代，为开发体验、效率与页面性能带来，非常大的革命。大家纷纷拿起一系列打包工具(webpack/parcel etc.)，配合一系列加载器快速搭建起一个 SPA 页面。 SPA 应用带来的好处非常明显； 提升页面切换体验 降低切换时间 易于部署&前后端分离 但是也带来一系列性能问题：
阅读全文
posted @ 2020-06-09 17:30
前端一点红
摘要：最近重构了一个项目，一个基于redux模型的react-native项目，目标是在混乱的代码中梳理出一个清晰的结构来，为了实现这个目标，首先需要对项目的结构做分层处理，将各个逻辑分离出来，这里我是基于典型的MVC模型，那么为了将现有代码重构为理想的模型，我需要做以下几步： 拆分组件 逻辑处理 抽象、
阅读全文
posted @ 2020-06-08 17:43
前端一点红
摘要：我们在开发移动端web项目时经常遇到设置border:1px，但是显示的边框却为2px或是3px粗细，这是因为设备像素比devicePixelRatio为2或3引起的。 何为“设备像素比devicePixelRatio” 设备上物理像素和设备独立像素(device-independent pixel
阅读全文
posted @ 2020-06-08 17:22
前端一点红
摘要：meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 必要属性 属性值描述 content some text 定义与http-equiv或name属性相关的元信息 可选属性
阅读全文
posted @ 2020-06-08 17:13
前端一点红
摘要：微信webview内置了调整字体大小的功能，用户可以根据实际情况进行调节。但是这也会导致字体大小改变以后，出现页面布局错乱的情况。 1、iOS的解决方案是覆盖掉微信的样式： 1 body { /* IOS禁止微信调整字体大小 */ 2 -webkit-text-size-adjust: 100% !
阅读全文
posted @ 2020-06-08 17:04
前端一点红
摘要：htm中doctype标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 dotype 的特点： <!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写 <!doctyp
阅读全文
posted @ 2020-06-08 17:02
前端一点红
摘要：我们都知道需要给html和body标签设置了高度height:100%之后，再给内部的div设置height:100%的时候，内部div的高度100%才会起到作用。这是由于：%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height。解决如下： 1 html,body{ 2 h
阅读全文
posted @ 2020-06-08 16:43
前端一点红
浙公网安备 33010602011771号