前端入门 | 易学教程

web前端入门到实战：纯css制作电闪雷鸣的天气图标

阅读更多关于 web前端入门到实战：纯css制作电闪雷鸣的天气图标

效果效果图如下实现思路使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了，这些都是在css中定义的。 <div class="container"> <div class="stormy"></div> </div> css样式 css按照步骤来实现 1、先写父容器样式，顺便给整个页面加个背景色，方便预览 body{ background: rgba(73,74,95,1); } .container{ width: 170px; height: 170px; position: relative; margin: 250px auto; } 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 2、写乌云的样式，别忘了乌云有一个上下移动的动画效果 .stormy{ width: 50px; height: 50px; position: absolute; left: 80px; top: 70px; margin

web前端入门到实战：css实现的骨架屏方案

阅读更多关于 web前端入门到实战：css实现的骨架屏方案

优点简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护定制程度高，想怎么搞就怎么搞不臃肿，只给你想要的缺点自动化程度低，需要在骨架dom上手动添加类协同要求高，不像工程化能通过工程去约束思路通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换实现 css部分(scss写法) 通过 after 伪元素生成骨架样式，并通过 absolute 覆盖到实际元素上专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） .skt-loading { pointer-events: none; /* 加载中阻止事件 */ .skeleton { position: relative; overflow: hidden; border: none !important; border-radius: 5px; background-color: transparent !important; background-image: none !important; &::after { content: ''; position: absolute; left: 0; top: 0; z-index: 9;

web前端入门到实战：css绝对定位和相对定位、固定定位

阅读更多关于 web前端入门到实战：css绝对定位和相对定位、固定定位

1、绝对定位 position：absolute；绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位和布局</title> </head> <style> .big { width: 900px; height: 600px; background-color: black; position: relative; } .box4 { width: 150px; height: 100px; background-color: blue; position: absolute; top: 150px; left: 200px; } </style> <body> <div class="big"> <div

前端模块化、工程化

阅读更多关于前端模块化、工程化

　　先谈谈前端工程化，web前端越来越像“应用程序”，处理的业务繁杂，需要用的html，css，js等文件越来越多；因此不得不用工程化的思想去组织管理这些文件；当然关于前端工程化在细节上见仁见智；以下是个人的理解：　　首先是业务需求文档的规范化；　　其次是开发过程中的管理：版本控制(git/svn)，js模块化(AMD,CMD,ES6)，MVVM框架(react,vue)等　　再其次是测试阶段：自动化测试js接口函数等(karma,mocha)，数据mooc 　　最后是打包部署：构建工具进行丑化、合并等构建工具grunt && gulp 　　Grunt 是最先流行起来的前端工程，其核心思想是基于配置的工作流模式，定义一个配置文件，声明工作流各个环节的相关配置，调用 grunt 就能完成打包编译；　　 Gulp 几乎取缔 Grunt ，成为前端的默认流程工具，其核心思想是基于内存的流的方式，提供高效的性能，极简的 API，定义不同的 task，然后将 task 串联起来；　　 Gulp入门教程开发效率　　通常的前端开发过程是，修改前端代码，调用命令编译代码，然后浏览器 F5 刷新。这个过程可以做到自动化，通过代码监控工具，指定要监控的目录和文件，如果对应文件有改变，调用编译工具编译源码，然后通过 livereload 自动刷新浏览器；数据mock 　

2017前端框架何去何从

阅读更多关于 2017前端框架何去何从

>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手，分析前端框架在这几年发展中的关键技术点，作为2015前端技术选型的参考。摘要: - 初体验 - 技术特点 - 组件化 - 应用架构 ### 总结 **1. 初体验** 拿TODO来作为引子好了. ![](//upload-images.jianshu.io/upload_images/8373224-4e10488b2196f18d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Angular 的实现 ![](//upload-images.jianshu.io/upload_images/8373224-5966342b1a65597b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) React的实现(非flux架构) ![](//upload-images.jianshu.io/upload_images/8373224-fdd1c5436dfee33e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Polymer的实现 ![](//upload-images.jianshu.io/upload

黑马程序员：从零基础到精通的前端学习路线

阅读更多关于黑马程序员：从零基础到精通的前端学习路线

黑马程序员：从零基础到精通的前端学习路线随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！那么前端开发到底需要学什么？应该怎么学？接下来黑马程序员前端学院教你如何从零基础学习前端。一、前端开发入门在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。在这个阶段你需要学习： 1、HTML+CSS基础掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 2、JavaScript基础掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。 3、常用的前端工具比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧，可快速提高开发调试效率。这个阶段的学习难度相对不高，学完这些之后，我们已经能完成静态页面的制作。当然，这只是入门，如果你想用这些技能找工作的话还是比较困难的。二、前端开发初级在接下来的这一个阶段

我的前端技术栈(2018版)

阅读更多关于我的前端技术栈(2018版)

为什么想写这篇文章工作这些年我所做的事情总是循环着，刚工作的时候html、js、jQuery用的也很溜，可是后面的七年都没写过前端代码。现在由于项目原因，时不时的需要去写点前端代码，可是前端的世界已经在nodejs的帮助下发生了翻天覆地的变化，一个又一个的框架层出不穷。这篇文章记录下我这一路披荆斩棘遇到的前端技术。一来帮助自己梳理知识体系，二来帮助前端新手明确学习路径和学习目标。 vue项目的技术栈我目前的项目用的是vue2，这里罗列的也都是基于vue或者vue整合的技术。基本上按照顺序把一个一个技术搞懂了，用vue做个前端项目是没什么问题了。 nodejs Node.js 就是运行在服务端的JavaScript。是一个基于Chrome V8 JavaScript引擎的JavaScript运行环境。在node.js出现之前，JavaScript是只能在浏览器中运行的，Node.js的出现可以让开发像写python一样在命令行写JavaScript。 nvm nvm 是一个node.js的版本管理工具。可以帮助开发管理本地使用的多个node.js版本。 npm、yarn npm 是一个js的包管理工具，它的出现真的是让前端技术飞速发展。它做的事情就想java中的maven。 yarn 和npm一样是个js的包管理工具，不过它在下载依赖时会做全局缓存，不会重复下包。 vue vue

Web前端知识技能大汇总

阅读更多关于 Web前端知识技能大汇总

项目起源　　还记得@jayli 的这幅前端知识结构图么。　　图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。　　可视化效果　前端开发知识结构前端工程师浏览器 IE6/ 7 / 8 / 9 / 10 / 11 (Trident) Firefox (Gecko) Chrome / Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript / Node.js CoffeeScript TypeScript 切页面 HTML / HTML5 CSS/CSS3 Sass / LESS / Stylus PhotoShop / Paint.net / Fireworks / GIMP / Sketch 开发工具编辑器和IDE VIM / Sublime Text2 Notepad++ / EditPlus WebStorm Emacs EmacsWiki Brackets Atom Lime Text Light Table Codebox TextMate Neovim Komodo IDE / Edit Eclipse Visual

前端技能汇总 Frontend Knowledge Structure

阅读更多关于前端技能汇总 Frontend Knowledge Structure

Frontend Knowledge Structure 项目起源还记得@jayli 的这幅前端知识结构图么。图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。尽管会变成文字的方式来维护这些内容，但是我承诺写一个小工具帮大家生成更好玩的图形（基于DataV项目）。前端开发知识结构前端工程师浏览器 IE6/ 7 / 8 / 9 / 10 / 11 (Trident) Firefox (Gecko) Chrome / Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript / Node.js CoffeeScript TypeScript 切页面 HTML / HTML5 CSS/CSS3 PhotoShop / Paint.net / Fireworks / GIMP 开发工具编辑器和IDE VIM / Sublime Text2 Notepad++ / EditPlus WebStorm Emacs EmacsWiki Brackets Komodo IDE / Edit Eclipse Visual Studio

HTML前端入门归纳——控件

阅读更多关于 HTML前端入门归纳——控件

　　本人一直在从事.net的开发，界面都是采用的WPF，近期花了一个多月进行HTML前端的学习，在这里呢进行学习总结和归纳。　　本系列将主要分为4个模块：　　　　控件　　　　样式　　　　布局　　　　JavaScript 　　根据多年WPF的开发经验，界面就是控件及样式与布局的组合，再加上代码来控制交互逻辑，本期先对HTML常用的控件进行归纳。　　div : 区块 1 <div class="***"> 2 </div> 　　div的概念与WPF中的Border类似，一般作为一个局部控件的容器，可通过css来设置它的各个属性，比如宽、高、背景色 1 div { 2 height: 160px; 3 width:200px; 4 background-color: #fff; 5 } 　　通过上面的css即可得到如下结果　　我们也可以将div的背景色改为图片，只需在css中加如下一句即可　　　　　　background-image:url(图片路径 ); 　　　　　　 background-repeat:no-repeat; 注：如果不加这句图片会通过重复来进行填充　　因为div经常被当作局部控件的容器，所以我们可以在它的内部添加其他控件， 1 <div> 2 <p>叫爸爸</p> 3 </div> 　　　　 input : 用户输入区　

订阅前端入门