随笔分类 - html/css
摘要：css3 animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezi
阅读全文
posted @ 2020-10-13 17:20
酷儿q
摘要：前端部署其实也算前端工程化的一部分，这篇博客是我结合实际工作经验和业余探索，总结出的前端部署的一些尝试。一方面自己有所记录，另一方面也能给大家带来些启示。 部署到七牛云 部署到阿里云OSS，部署到腾讯云OSS 部署到腾讯云服务器并使用nginx做反向代理 总结与反思 前提条件： 通过npm run
阅读全文
posted @ 2020-10-13 17:18
酷儿q
摘要：我们将使用纯css打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知
阅读全文
posted @ 2020-10-13 17:17
酷儿q
摘要：这是一个纯粹利用css所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photoshop里头的几乎一模一样，只是一个用图层和色版来制作，一个则是用css（把div当成图层思考就好了）。 从PhotoShop开始 一开始我们来玩Photoshop，会比直接写CSS来得容易理解（没有Phot
阅读全文
posted @ 2020-10-13 17:16
酷儿q
摘要：转换任意颜色为RGBA格式 前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案： 此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下： 首先创建一个尺寸为1
阅读全文
posted @ 2020-10-13 17:15
酷儿q
摘要：嵌套规则 Sass 允许我们将以与html相同的方式嵌套css选择器，将一套 css 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，比如： // .scss语法 #main { width: 97%; p, div { font-size: 2em; a { font-weight
阅读全文
posted @ 2020-10-13 17:14
酷儿q
摘要：背景 相信大家在平时的需求当中，都会遇到一些动画需求，那么大家又是如何抉择实现方式呢？这里我大概分为4种情况，gif图/animation/ae导出骨骼动画/ae导出canvas 1. gif图硬核解决 没错！最简单的就是让我们的设计师直接给我们gif图，那么在我们前端看来就是一张图片的问题，只需控
阅读全文
posted @ 2020-10-13 17:12
酷儿q
摘要：<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 JavaScript 的 File API 对文件进行操作 . 常用input属性： accept：指示file类型，没有时表示不限制类型，填入格式后选择文件时只能看见被允许的文件
阅读全文
posted @ 2020-10-13 17:11
酷儿q
摘要：Node 项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息，以及运行、开发以及有选择地将项目发布到 npm 所需的信息。 在本教程中，我们将： 了解 package.json 与项目之间的关系 确定重要字段和元数据 了
阅读全文
posted @ 2020-10-13 17:09
酷儿q
摘要：浏览器的世界里本没有粘性定位事件。 然而，网页开发中，元素若使用了粘性定位 position:sticky ，常常还需要一个粘性定位事件，比如，外卖菜单。 粘性定位 元素的位置属性（position）设置为 sticky 时，即称为粘性定位。一个元素 <div> 应用了如下 css 声明，那么该元素
阅读全文
posted @ 2020-10-13 17:08
酷儿q
摘要：什么是html语义化 说html语义化就要先说说HTML到底负责的什么？下面摘自维基百科： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单
阅读全文
posted @ 2020-10-13 17:06
酷儿q
摘要：box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候
阅读全文
posted @ 2020-10-13 17:05
酷儿q
摘要：Web前端就业前景怎么样？整体薪资待遇好不好？近几年IT业可谓是发展火热，而且新出了很多职业。在这众多的新生职业中，备受瞩目的当属Web前端工程师，Web前端在IT行业真正受到重视的时间不超五年，因此众人越来越关心Web前端的发展前景。毕竟学习的目的主要就是为了就业，前端开发工程师的薪资待遇是大家比
阅读全文
posted @ 2020-10-13 17:04
酷儿q
摘要：混合指令（Mixin）用于定义可以重复使用的样式，避免了使用无语意的 class。它可以包含所有的 css 规则，绝大部分 Sass 规则，甚至通过功能引入变量，输出多样化的样式。 混合指令的用法是在 @mixin 后添加名称与样式 。 混合也需要包含选择器和属性，甚至可以用 & 引用父选择器。 /
阅读全文
posted @ 2020-10-13 17:02
酷儿q
摘要：为了消除各浏览器对css默认的设置，保持网页在各浏览器中的外观保持一致，初始化css就显得非常必要了！很多时候出现的样式不兼容问题，都可以通过css初始化代码来解决。 1.最耗资源的，最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例（综合
阅读全文
posted @ 2020-10-13 16:53
酷儿q
摘要：css 句法( css Syntax ) 语法是语言表达的规则。各种语言都有不同的语法，包括人类语言和计算机语言等。 语法有时候也指句法( syntax )，指的是句子由词汇构成的规律。也可以将它看作组成句子的规则。它包含两个方面的涵义： 词汇：即，可以构成句子的有效用词。例如，英语中的单词，Jav
阅读全文
posted @ 2020-10-02 14:57
酷儿q
摘要：前端安全的范围 将Web安全问题按照发生的区域来分类，发生在浏览器、Web页面中的安全问题就是前端安全问题。 同源策略 同源：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。 URL是否同源原因 http://test.test.com/dir2/other
阅读全文
posted @ 2020-10-02 14:56
酷儿q
摘要：之前做web项目，基本上只使用get和post的请求方式，但是现在新项目额外增加了put，delete，查了点资料，做个简单的总结。 1、GET get请求是用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作。 在这里我们认为get请求是安全的，以及幂等的。安全就是指不
阅读全文
posted @ 2020-10-02 14:55
酷儿q
摘要：本来早就想写这篇文章的，由于有其他事情耽搁了（可能还是因为太懒），就拖到了现在，如果再不记下来，估计会抛到九霄云外了。 Nodejs的出现，让前端工程化的理念不断深入，正在向正规军靠近。先是带来了Gulp、webpack等强大的构建工具，随后又出现了vue-cli和create-react-app等
阅读全文
posted @ 2020-10-02 14:54
酷儿q
摘要：最近在山寨一款网页微信的产品，对于div用contenteditable属性做的编辑框有不少心得，希望可以帮到入坑的同学。 废话不多说了，我们先来理解一下html的光标对象是如何工作的，后面我会贴完整的DEMO代码，不用急，先去理解，才能做出更加好的输入体验。 在html里面，光标是一个对象，光标对
阅读全文
posted @ 2020-10-02 14:51
酷儿q
浙公网安备 33010602011771号