随笔分类 - html\css
摘要：前端需要性能优化么？ 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、
阅读全文
posted @ 2020-10-18 13:38
浅笑·
摘要：一.h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。 在chrome中：16,15,14,16,17,19; 在firefox中：16,15,14,16,17,20; 在safari中：16,15,14,16,17,19; 在opera中：16,15,1
阅读全文
posted @ 2020-10-18 13:36
浅笑·
摘要：滚动穿透在移动端开发中是一个很常见的问题，产生诡异的交互行为，影响用户体验，同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为，但是作为追求极致的工程师，应该去了解为什么会产生以及如何去解决。 什么是滚动穿透 移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见
阅读全文
posted @ 2020-10-18 13:34
浅笑·
摘要：表单简介 Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时间表单元素时 一般要配合label标签，用于描述其目的。
阅读全文
posted @ 2020-10-18 13:33
浅笑·
摘要：什么是图形验证码 图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共
阅读全文
posted @ 2020-10-18 13:32
浅笑·
摘要：约定 本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件，对于形状规则或者位置有规律的场景，肯定有更简便的实现，这里不做讨论。 像素法 像素检测法的思路是，将canvas中的多个图形（如果有多个的话）分别离屏绘制，并用getImageData()方法分别获取到像素数据保
阅读全文
posted @ 2020-10-18 13:30
浅笑·
摘要：前言 页面为了适应各种设备（PC端、移动端的不同设备）的不同显示情况，增加了媒体查询的功能，通过特定的要求达到不同的样式显示。 媒体查询 @media 媒体类型 and|not|only (媒体特性)｛ /*css样式*/ ｝ 或者 <link rel="stylesheet" media="med
阅读全文
posted @ 2020-10-18 13:29
浅笑·
摘要：css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 Th
阅读全文
posted @ 2020-10-18 13:28
浅笑·
摘要：作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如 1. 昂贵开发成本 2. 软件上线
阅读全文
posted @ 2020-10-14 17:57
浅笑·
摘要：1.opacity opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互。 2.visibility visibility：hidden将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它不会
阅读全文
posted @ 2020-10-14 17:55
浅笑·
摘要：通过改变charset=utf-8中的utf-8就可以改变网页的编码。 一般我们在写css文件时候也需要在css文件顶部使用@charset "utf-8";来定义此CSS文件编码类型。一般html源代码和css文件编码要统一，如果不统一会导致CSS hack，页面乱码网页页面排版乱等兼容问题。 国
阅读全文
posted @ 2020-10-14 17:53
浅笑·
摘要：当我们想在表达式上进行匹配简单的值或者是参数数量时，我们可以使用Guards；它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 为了尽量接近css的声明性，Less选择了使用通过受保护的Guards的mixins而不
阅读全文
posted @ 2020-10-14 17:52
浅笑·
摘要：1.利用css3属性 appearance。 该属性（强制）更改（改变）默认（原生）样式。 Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。 所以可以利用该属性取消checkb
阅读全文
posted @ 2020-10-14 17:51
浅笑·
摘要：过渡 transition 1.过渡的定义和使用 在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式在一定
阅读全文
posted @ 2020-10-14 17:49
浅笑·
摘要：1.文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合。 a. html的命名原则引文件统一使用index.htm index.html index.asp文件名（小写）各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：关于我们 \ aboutus 信息反馈 \ feed
阅读全文
posted @ 2020-10-14 17:48
浅笑·
摘要：结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <he
阅读全文
posted @ 2020-10-14 17:45
浅笑·
摘要：当涉及到简化 css 设计和开发相关的工作时，工具总能创造奇迹。值得指出的是，绝大多数的网页设计者和开发人员对不同的 css 工具都感到兴奋，这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。下面给大家介绍几个CSS工具，它们将通过最大限度的发挥 CSS 的功能来帮助你建立神奇的网站。
阅读全文
posted @ 2020-10-14 17:43
浅笑·
摘要：公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果，感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。废话不多说，线上效果 jsrun-测试地址 、 lilnong.top-测试地址 实现方案都有什么 clearRect 这是我第一个找到的 API，作用是清除一个矩形区域内的内
阅读全文
posted @ 2020-10-14 17:41
浅笑·
摘要：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料 本篇文章主要是讲一些其他的或者优化手段。内容不多 1. 弹出数字键盘 <!-- 有"
阅读全文
posted @ 2020-10-14 17:40
浅笑·
摘要：Mixins 具有多个参数 * 参数可以使用逗号或分号分隔。 （建议使用分号，因为逗号具有双重含义：可以将其解释为mixin参数分隔符或者是css列表分隔符）；使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。 参数mixin使用一个或多个参数，通过参数和它的属性来扩展Less的功能，
阅读全文
posted @ 2020-10-14 17:39
浅笑·
浙公网安备 33010602011771号