免费10篇/更新中
-
编辑 删除
常见的前端开发CSS 面试题及回答策略
不管你是面试官还是求职者，里面的思路都能让你获益匪浅。1 你用 CSS 多久了？解析：这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。面试官想知道些什么：求职者使用 CSS 的经验对创建网站的兴趣是否持续关注新技术参考答案：我在高中时就开始用 CSS 了。当时我和一些朋友为我们喜欢的电视节目搭了一个网站。不过这些页面很差劲
-
编辑 删除
只要记住这五点，学习任何新编程语言都不是问题
这篇文章适合…想学程序，却不知如何开始买了很多程序语言相关的书籍，却一直还没开始学了一阵子，却不知道怎么继续往下钻研熟悉这个语言，却不知道去哪找个地方大展身手只要记住这五点相信你在学习任何程序语言时会更有方向和方法1、设定一个具体目标最常听到的问题都是线上课程看完后，不知道要干啥。如果没有设定一个具体的目标而学习，就像是摸着石头过河，感受不到具体在进步的感觉，而学习中最重要的就是「挑战 →想出解法
-
编辑 删除
强大的CSS：placeholder-shown伪类实现Material Design占位符交互效果
一、Material Design规范中占位符交互效果Material Design风格占位符交互效果官方示意见此demo页面。效果可以参见下面的GIF录屏示意：现在这种设计在移动端很常见，因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。:p
-
编辑 删除
强大的CSS：3种姿势实现26个英文字母的案例
一、借助CSS border实现案例实现效果如下（为实时渲染效果）：如何使用？引用CSS文件，例如：<link rel="stylesheet" href="./css-letters1.css">或者直接CSS代码到你的项目中：/* 全局样式 */ .letter {  
-
编辑 删除
强大的CSS：图形绘制合集，方便你我！
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的，不少实现以前我介绍过，或者你也知道，但是有些相信你没见过。1. 正方形实时渲染效果如下：相关CSS代码：#square { width: 100px; height: 100px; background: red; }2. 长方形效果
-
编辑 删除
强大的CSS：var变量的局部作用域（继承）特性
一、CSS变量非全局最近做项目，发现CSS变量一个有意思的特性，那就是变量作用域非全局。举个例子，如下HTML和CSS：<div class="box"> <div class="a">测试a</div>  
-
编辑 删除
强大的CSS：focus-visible伪类真的太6了！
一、快速了解CSS :focus-visible伪类:focus-visible伪类是非常年轻的一个伪类，目前仅Chrome浏览器标准支持，但足够了。如果你是一个深入用户体验的开发者，这个伪类会非常有用。:focus-visible伪类应用的场景是：元素聚焦，同时聚焦轮廓浏览器认为应该显示。是不是很拗口？规范就是这么定义的。:focus-visible的规范并没有强行约束匹配逻辑，而是交给了UA（
-
编辑 删除
强大的CSS：scroll-snap滚动事件停止及元素位置检测
一、Scroll Snap是前端必备技能CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。二、源自实际项目的scroll-snap场景今天下午在实现一个功能需求的时候，正好遇到一个场景非常适
-
编辑 删除
强大的CSS：实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果？一、skewX的局限一提到平行四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果HTML如下：<div class="input-x"> <input&nbs
-
编辑 删除
强大的CSS：滤镜和混合模式处理的图片如何上传下载？
一、使用CSS滤镜和混合模式在线PS使用CSS滤镜和混合模式可以实现各种各样的图像处理效果，内置众多图像处理效果，部分效果示意如下缩略图：进入demo页面你也可以点击这里的按钮，更换你本地的素材，查看对应的图像效果：呈现的效果虽好，但是也带来另外一个问题，虽然视觉上是已经处理后的图片，但是如果我们右键-图片另存为，会发现还是原图。如果用户觉得某个图片处理后的效果很棒，想要保存到自己的本机，就会受阻
-
编辑 删除
强大的CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的，类似下图gif示意：这里就介绍下是如何实现的。有两种实现方法，各有优劣。一、使用径向渐变纯CSS实现就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位置，让其前后拼
-
编辑 删除
强大的CSS： 使用“变量种子计数器”扩展动画更多可能性
一、不是所有CSS属性都能动画经常和CSS打交道的人肯定都知道，不是所有的CSS属性都能使用animation属性实现动画效果，最典型的例子就是background-image渐变。一个典型的线性渐变是由角度，颜色和位置组成，例如：.gradient { background-image: linear-gradient(45d
-
编辑 删除
前端进阶（三）从0到1学AJAX，这篇就够了！
什么是ajax？AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程1、使用 AJAX 的过程可以类比平常我们访问网页过程// 1\. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器 var xhr =
-
编辑 删除
前端进阶（二）JS高级讲解面向对象，原型，继承，闭包，正则表达式，让你彻底爱上前端
JavaScript 高级学习目标:理解面向对象开发思想掌握 JavaScript 面向对象开发相关模式掌握在 JavaScript 中使用正则表达式自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一
-
编辑 删除
前端进阶（一）掌握Web API，开发常见的页面交互功能
目标掌握API和Web API的概念掌握常见的浏览器提供的API的调用方式能通过API开发常见的页面交互功能能够利用搜索引擎解决问题自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。20
-
编辑 删除
前端基础入门六(JQuery进阶)
jQuery特殊属性操作val方法val方法用于设置和获取表单元素的值，例如input、textarea的值//设置值 $("#name").val(“张三”); //获取值 $("#name").val();自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+
-
编辑 删除
前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javascript开发过程中，有许多的缺点：1\. 查找元素的方法太少，麻烦。 2\. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。 3\. 有兼容性问题。 4\.
-
编辑 删除
前端基础入门四（JavaScript基础）
目标:掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础，后续会讲解JavaScript高级。重点内容变量的声明及使用数据类型类型转换运算符JavaScript介绍JavaScript是什么JavaScript是一种运行在客户端 的脚本语言JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言
-
编辑 删除
前端基础入门三（CSS总结篇——思维导图）
总结CSS学习路线
-
编辑 删除
前端基础入门二（CSS）
学习。大纲学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSSCSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的
