摘要：
网页使用到的色彩标示方法中，从古早时期大家都在用的16进位码（#000000）、RGB色值标示、HSL色彩标示，其中网页设计师最常使用的16进位色码标示法，而16进位码又是如何计算色彩的呢？有没有办法直接脑袋就把色彩算出来？HSL色彩该如何运用与记忆？有没有什么秘诀或小技巧？一连串的问题就跟着继续看 阅读全文
摘要：
响应式布局的概念 响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。 阅读全文
摘要：
先看看Demo: CODEPEN 示例页面 讲到选项卡（Tabs）功能时，大多会想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery实现的（其实网络上有很多用jQuery开发的Tab）；但其实不用jQuery或JavaScript技术，就能实现高 阅读全文
摘要：
我在做面试官的时候，曾经问过很多朋友这个问题： Cookie 和 Session 有什么区别呢？大部分的面试者应该都可以说上一两句，比如：什么是 Cookie？什么是 Session？两者的区别等。 但如果再往深入探讨的话，就慢慢有一些朋友不太了解了，谈起原理时就很少有朋友全部回答准确。今天和大家一 阅读全文
摘要：
css3 中有很多表示元素序号的选择器，有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-las 阅读全文
摘要：
作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯 阅读全文
摘要：
我在工作中使用css Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在，我真的无法想象没有Grid的css！ 最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方 阅读全文
摘要：
一、css变量非全局 最近做项目，发现css变量一个有意思的特性，那就是变量作用域非全局。 举个例子，如下html和CSS： <div> <div>测试a</div> <div>测试b</div> <div>测试c</div> </div> .box { --color: red; color: v 阅读全文
摘要：
一、Scroll Snap是前端必备技能 css Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何js代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯css实现。 而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使 阅读全文
摘要：
ES2017+，你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具，可以脑海中永远划掉。100行代码，你将透视构建工具的本质。 100行代码，你将拥有一个现代化、规范、测试驱动、高延展性的前端构建工具。 在阅读前， 阅读全文
摘要：
1：基本概念 在一定时间内平滑的过渡，也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发；不能主动触发，只能被动触发。 常用的基本属性有：Transition-duration（过渡时间）、Transition-property （过渡 阅读全文
摘要：
前言 在多人协作项目中，如果代码风格统一、代码提交信息的说明准确，那么在后期协作以及Bug处理时会更加方便。Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。一般来说，commit message 应该清晰明了，说明本次提交的目的。 Commit messag 阅读全文
摘要：
一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。 浏览器支持：Caniuse 示例 若根元素 font-size 为 12px html { font-size: 12px; } h1 { font-size: 阅读全文
摘要：
很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况： 1.内容较少时，这个footer固定在在页面的底部。如下所示：2.内容较长时，footer跟在内容后面滑动，大 阅读全文
摘要：
产品希望看到投放出去的活动页，用户对其页面内的什么信息比较感兴趣，对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间 第一次听到这个需求，我的大脑开始疯狂运转，然后想到了plan 1, plan 2, plan3...中间还有很多失败想法我已经忘记了，这里方案三是我最终采用的方法。 方案一：根 阅读全文
摘要：
前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存，减少对服务器的请求。 1.cookie数据存放在本地硬盘中，只要在过期时间之前，都是有效的，即使重启浏览器。但是会在每次HTTP请求中添加到请求头中，如果数据过多，会造成性能问题。 2.s 阅读全文
摘要：
随着前端技术的急速发展，随着互联网行业的日益发展，html5作为一种比较新型的开发技术早已经被很多大的企业所应用，通过html5语言可以开发适用于任何设备上的酷炫网站页面，所以HTML5的发展趋势可想而知。话说HTML5退出了也好长一段时间了，现在还拿出来炒冷饭O(∩_∩)O哈哈~ HTML5与se 阅读全文
摘要：
起因 团队中如果不同的项目，不同的人员可能在接口设计上有许多不统一的地方。导致了开发效率低下的问题。由于我在工作中遇到了，所以整理下来，说一说自己的一些看法。 怎样进行接口规范化 因为每个人对自己使用语言有不同的理解、HTTP协议熟悉程度不同、思维逻辑、开发经验不一样。对接口规范有想法的人应该提出自 阅读全文
摘要：
css代码优化作用与意义 1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度2、便于维护。简化和标准化css代码让css代码减少，便于日后维护3、让自己写的css代码更加专业。 css优化方法 1、缩写css代码。2、排列css代码。3、同属性提取共用css选择器 阅读全文
摘要：
初识cookie http是无状态的请求响应。每次的请求响应之后，连接会立即断开或延时断开（保持一定的连接有效期）。断开后，下一次请求再重新建立。在http连接时，通过cookie进行会话跟踪，第一次响应时设置的Cookie在随后的每次请求中都会发送出去。 Cookie还可以包括登陆认证后的身份信息 阅读全文