摘要：
实现效果 X轴Y轴在一个矩形内移动 做斜线运动 .ball { position: absolute; animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate } @keyframes ani 阅读全文
摘要：
前端到底是个啥 前端其实是个很大的范畴。我这里只针对 web 开发的前端而言（下文统称前端）。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：html（超文本标记语言）、css（级联样式表）、JavaScript。 阅读全文
摘要：
玻璃窗 今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; bac 阅读全文
摘要：
本次分享大纲 电商案例的原因 电商网站需求 网站初级架构 系统容量估算 网站架构分析 网站架构优化 架构总结 电商网站案例，一共有三篇本篇主要说明网站的需求，网站初始架构，系统容量估算方法。 一、电商案例的原因 分布式大型网站，目前看主要有几类1.大型门户，比如网易，新浪等；2.SNS网站，比如校内 阅读全文
摘要：
垂直居中，在 css 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 css3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中 阅读全文
摘要：
一：鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开，鼠标类尺寸样式都是X,Y，浏览器及元素的各项尺寸时Height,Width 1：检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候，鼠标事件发 阅读全文
摘要：
web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了web能不能用，前端优化决定了其好不好用，也就是牵涉到前端用户体验和web易用性等情况，所以前端性能与用户体验是有着极大的关联的。 首先，前端优化之前，我们需要知道其整体性能情况，然后对整体情况进行细分与分析，了解其每一步所损耗的 阅读全文
摘要：
前端 css 库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。 为什么要使用 css 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的 阅读全文
摘要：
所周知，要保护一个页面，最基础的就是要屏蔽右键。而现在网页上用得最多的是function click()，即下面这段代码： 〈script〉 function click(){ if(event.button==2){ alert( ‘本网页欢迎您 !!‘); } } document.onmous 阅读全文
摘要：
一份来自 Akamai 的研究报告显示，在对 1048 名网购户进行采访后发现： 约 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。 一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用 阅读全文
摘要：
web前端开发技术人才越来越吃香，而且web前端领域划分越来越细，对技术的需求越来越高，想学习web前端的人也是越来越多。那么，如何学习web前端知识？从哪开始？转型成为web前端工程师需要学些什么？小白到高手需要多久？ 1、转型web前端需要学什么 第一阶段：你要从最基础的html/css开始，简 阅读全文
摘要：
SVG：可伸缩的矢量图形 SVG本身是基于 XML 的一种独立的数据格式，用于声明式的 2D 矢量图形。但是，它也可以嵌入到 html 文档中，这是所有主流浏览器都支持的。 让我们考虑一个例子，如何使用 SVG 绘制一个可调整大小的圆： <html style="height: 100%; widt 阅读全文
摘要：
前端需要性能优化么？ 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、 阅读全文
摘要：
一.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 阅读全文
摘要：
滚动穿透在移动端开发中是一个很常见的问题，产生诡异的交互行为，影响用户体验，同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为，但是作为追求极致的工程师，应该去了解为什么会产生以及如何去解决。 什么是滚动穿透 移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见 阅读全文
摘要：
表单简介 Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时间表单元素时 一般要配合label标签，用于描述其目的。 阅读全文
摘要：
什么是图形验证码 图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共 阅读全文
摘要：
约定 本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件，对于形状规则或者位置有规律的场景，肯定有更简便的实现，这里不做讨论。 像素法 像素检测法的思路是，将canvas中的多个图形（如果有多个的话）分别离屏绘制，并用getImageData()方法分别获取到像素数据保 阅读全文
摘要：
前言 页面为了适应各种设备（PC端、移动端的不同设备）的不同显示情况，增加了媒体查询的功能，通过特定的要求达到不同的样式显示。 媒体查询 @media 媒体类型 and|not|only (媒体特性)｛ /*css样式*/ ｝ 或者 <link rel="stylesheet" media="med 阅读全文
摘要：
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 Th 阅读全文