随笔分类 - html/css
摘要：css3的过渡属性，给web应用带来了简单优雅的动画，但是比起初次相见，他（transition）有许多细则。在这片文章中，我将会专研css3的过渡（transition）中更加复杂的部分，从链式和事件到硬件加速和动画函数。让浏览器控制动画序列，通过改变帧率，减少绘画和减少GPU的工作，能够优化性能
阅读全文
posted @ 2020-12-09 22:34
笑人
摘要：如果你在日常工作中使用css，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注css的实现原理。 你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结果。一些CSS属性（如 background-colo
阅读全文
posted @ 2020-12-09 22:32
笑人
摘要：1.前言 在上家公司开发后台管理系统的时候，频繁要处理各种数据显示的问题，一开始是实现就好。后来写多了，自己看得也难受了。就想着怎么优化代码和复用了。下面就通过一个简单的例子，怎么让 API 更加的实用，更好的复用。 1.代码的实用性，只能尽量，尽量再尽量。不会出现完美的API，或者是一次编写，永不
阅读全文
posted @ 2020-12-09 22:30
笑人
摘要：项目需求写完有一段时间了，但是还是想回过来总结一下，一是对项目的回顾优化等，二是对坑的地方做个记录，避免以后遇到类似的问题。 需求 利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。生成的海报如下 需求分析 1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序2、利用小程序生成
阅读全文
posted @ 2020-12-09 22:27
笑人
摘要：本文将会从一个大型的网站发展历程出发，一步一步的探索这个网站的架构是如何从单体架构，演化到分布式架构，然后演化到高并发架构的。 一、单块架构 一般一个网站刚开始建立的时候，用户量是很少的，大概可能就几万或者几十万的用户量，每天活跃的用户可能就几百或者几千个。 这个时候一般网站架构都是采用单体架构来设
阅读全文
posted @ 2020-12-09 22:25
笑人
摘要：需求 最近在做一个项目需求，分享领好书活动，获取用户的个人信息以及unionID，并诱导用户分享给好友或朋友圈，达到裂变拉新的目的。在做的过程中遇到了一些坑的地方，所以回过来总结一下 技术方案 使用微信js-SDK自定义分享到好友和分享到朋友圈 实现步骤 1、要实现微信H5网页自定义分享功能，必须先
阅读全文
posted @ 2020-12-09 22:18
笑人
摘要：编写css是前端工作中，一项普通而又频繁的劳动，由于css并不是一门语言，所以在程序设计上显得有些简陋。对于小型项目来说，css的量还不至于庞大，问题没有凸显，而如果要开发和持续维护一个较为大型的项目，那就需要对css进行管理和规范了，否则会发生不可挽回的后果（吓唬谁呢？？）。 背景 css谈模块化
阅读全文
posted @ 2020-12-09 22:17
笑人
摘要：命名禁止缩写 精简扼要地对class命名，请勿使用自定义缩写。 class name的命名必须是行为、有语意的。 禁止在非特殊情况下写！important css本身有权重设计，任意地使用!important会造成权重混乱而无法维护。 不可轻易限定宽高 用户可以自行设定自己的浏览器，例如Androi
阅读全文
posted @ 2020-12-09 22:16
笑人
摘要：属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。 通常将 html 属性放在方括号中，称为属性选择器，如下： [href
阅读全文
posted @ 2020-12-09 22:13
笑人
摘要：一. 跨站脚本攻击（XSS，Cross-site scripting） 是最常见和基本的攻击WEB网站的方法。攻击者在网页上发布包含攻击性代码的数据。当浏览者看到此网页时，特定的脚本就会以浏览者用 户的身份和权限来执行。通过XSS可以比较容易地修改用户数据、窃取用户信息，以及造成其它类型的攻击，例如
阅读全文
posted @ 2020-12-09 22:07
笑人
摘要：为什么说能使用html/css解决的问题就不要使用js呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点css技巧就
阅读全文
posted @ 2020-12-09 22:00
笑人
摘要：在手机上使用css动画时很多时候会感到卡顿，然后网上很多教程说开启GPU加速 transform: translate3d(0,0,0); 可解决，但是为什么开启GPU加速就能让动画顺滑呢? 我们从浏览器内部去理解下 js是单线程的，但是浏览器可以开启多个线程，渲染一个网页需要两个重要的线程来共同完
阅读全文
posted @ 2020-12-09 21:59
笑人
摘要：明白何谓Margin Collapse 不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习: .square { width: 80px; h
阅读全文
posted @ 2020-12-09 21:57
笑人
摘要：Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法，常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。 Base64 编码 Base64 本质是一种将二进制转为文本的方案。基本规则如下： 编码时候选用 64 (大小写英文字母，数字，+
阅读全文
posted @ 2020-11-26 12:42
笑人
摘要：前言 在传统的 Web 开发过程中，处理图形验证码很简单，只需要在后台用随机字符串生成一个图片，将验证码内容放进 Session 即可，用户提交表单时从 Session[1] 取出判断即可。 但是现如今，越来越推崇 API 交互，无状态，在 Session 这一块，虽然默认配置是不支持了，但是还是有
阅读全文
posted @ 2020-11-26 12:41
笑人
摘要：在前端开发中，我们经常需要对对象鼠标指针光标进行控制，比如鼠标经过超链接时变成手指形状。在这里整理一下cursor鼠标指针光标样式的知识，记录与方便以后查找。 常用cursor光标 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光
阅读全文
posted @ 2020-11-26 12:38
笑人
摘要：问题： cookie过长导致页面打开失败 背景： 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab（iframe），但是需要在刷新时只刷新当前页面仍然保留着多个iframe，现在刷新有两种方式，第一种是键盘中按F5或者ctrl+F5或者ctrl+R，第二种是点击浏览器的左上角进
阅读全文
posted @ 2020-11-26 12:37
笑人
摘要：前言 上一次，我写了一篇《Data URL的简介与使用》(http://verymuch.site/2017/12/14/Data URL简介与使用/)，该文章主要介绍了什么是Data URL，其优缺点以及如何使用。其中有一个隐含在文中的重要概念，那就是Data URL是Base64编码的，且Bas
阅读全文
posted @ 2020-11-26 12:35
笑人
摘要：Web前端应用十种常用技术，随着js与Xhtml的应用普及，越来越多的web界面应用技术出现在网站上，比如我们常见的日历控件，搜索下拉框等，这些web界面应用技术大大的丰富了网站的表现形式，本文将为您精心推荐十种最常见的web界面应用技术。 Web应用程序的界面设计，其核心就是网页设计 ，但它的重点
阅读全文
posted @ 2020-11-26 12:33
笑人
摘要：网页静态化解决方案在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。 网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力，但是具体的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合大规模且相对变化不太频繁 的数据。另外网页静态化还有利于seo。另外我
阅读全文
posted @ 2020-11-26 12:32
笑人
浙公网安备 33010602011771号