css框架

前端工程化

由 馋奶兔 提交于 2020-01-04 00:25:23
前端架构： 1.前端工程化 web应用复杂度的增加，特别是单页面应用的风靡。组件化，工程化，自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，在技术发展日新月异的今天，这样的过程真的是不可抽象和复制的么？本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。 前端工程的3个阶段 第一阶段： 库/框架选型 Animate.css jQuery vue.js underscore.js React.js Backbone.js Bootstarp zepto.js jade normalize.css compass Angular.js 解决开发效率 第二阶段： 简单构建优化 选择构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。 第三阶段： JS/CSS模块化开发 解决维护效率 js的模块化方案 ADM/CDM/UMD/ES6 Module css的模块化：less，sass。 第四阶段: 前端是一个技术问题较少，工程问题较多的开发领域 当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如： - 大体量：多功能、多页面、多状态、多系统； - 大规模：多人甚至多团队合作开发； - 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载

H5 缓存机制浅析 移动端 Web 加载性能优化

由 六月ゝ 毕业季﹏ 提交于 2020-01-04 00:17:24
Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

H5 缓存机制浅析 移动端 Web 加载性能优化

由 我怕爱的太早我们不能终老 提交于 2020-01-04 00:07:30
Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

.CSS定位详解

由 ≡放荡痞女 提交于 2020-01-03 18:58:22
CSS定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但是却能够形成丰富的表现。 一、相对定位：relative 相对定位是相对于自身定位的元素进行定位的，它的参照物就是本身。 还有一点，相对定位后的元素依然会占据原来的位置空间，我们可以通过代码来观察它。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位</title> <style> *{ margin: 0px; padding: 0px; } .model1{ position: relative; background-color: aqua; left:200px; } .model2{ position: relative; background-color: blue; } </style> </head> <body> <span class="model1"> Model1 </span> <span class="model2"> Model2 </span> </body> </html> 如图可以看到当前Model1存在的位置，通过代码段我们发现虽然Model1右移了200px

Bootstrap 学习（1）

由 最后都变了- 提交于 2020-01-01 00:12:00
http://www.cnblogs.com/0201zcr/p/4900062.html 简介 　　Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap 包的内容 基本结构 ：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSS ：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。 组件 ：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。 JavaScript 插件 ：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。 定制 ：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap

jQuery框架-1.jQuery基础知识

由 不问归期 提交于 2019-12-31 14:06:39
jQuery简介 jQuery，顾名思义是JavaScript和查询（Query），jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程且兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。 jQuery 优势 体积小，使用灵巧（只需引入一个js文件）。 方便的选择页面元素（模仿CSS选择器更精确、灵活）。 动态更改页面样式/页面内容（操作DOM，动态添加、移除样式）。 控制响应事件（动态添加响应事件）。 提供基本网页特效（提供已封装的网页特效方法）。 快速实现通信（ajax）。 易扩展、插件丰富。 支持链式写法。 引入jQuery 通过script引入本地jQuery文件。 通过引入CDN上面jQuery文件。 版本选择 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本

CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

由 别等时光非礼了梦想. 提交于 2019-12-31 12:39:35
CSS3基础——笔记 　　CSS是Cascading Style Sheet的缩写，翻译为"层叠样式表" 或 "级联样式表"。CSS定义如何显示HTML的标签央视，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。 一、CSS基础用法 　　CSS代码可以在任何文本编辑器中打开和编辑。因此，不管读者有没有变成基础，初次接触CSS时会感到很简单。 1.1 CSS样式 　　样式是CSS最小的语法单元，每个样式包含两部分内容:选择器和声明(规则)，如下所示： 选择器(Selector): 选择器告诉浏览器呢该样式将作用于页面中哪些对象，这些对象可以是某个标签、所有网页对象、指定Class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。 声明(Declaration): 声明可以增加一个或者无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两部分:属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后整体紧邻选择器的后面。 属性(Property): 属性是CSS提供的设置好的样式选项。属性名是一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够直观表示属性所要设置样式的效果。 属性值(Value): 属性值是用来显示属性效果的参数。它包括数值和单位

纯CSS滑动效果

由 放肆的年华 提交于 2019-12-31 02:31:02
原文地址： Pure CSS Slide Up and Slide Down 示例地址： Pure CSS Slide Demo 原文日期： 2013年08月26日 翻译日期： 2013年08月27日 如果能避免使用JavaScript就实现DOM元素动画效果,那我非常乐于不用JS去实现。 因为更高效，而且不需要JS框架来一步步处理，代码更美观优雅。 用纯CSS来实现很难确定的一个特效是 上下滑动——当向上滑的时候内容渐变隐藏，向下滑动内容渐变显示。 之所以难以实现的原因是你可能不能获得内容的高度。 在经历了多种多样的CSS属性之后，我发现了一种利用纯CSS来实现滑动特效的方法。 HTML部分 演示这个效果只需要一个元素，类似于下面这样的： <div class="slider">需要滑动(显示隐藏)的内容,内容长度随意,class当然也可以自定义名字啦!</div> CSS部分 在看到效果之前,让我们设置一些很简单的属性：overflow-y 以及 CSS animation 属性: .slider { overflow-y: hidden; max-height: 500px; /* 预估的最大高度 */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic

纯CSS滑动效果

由 血红的双手。 提交于 2019-12-31 02:30:44
原文地址： Pure CSS Slide Up and Slide Down 示例地址： Pure CSS Slide Demo 原文日期： 2013年08月26日 翻译日期： 2013年08月27日 如果能避免使用JavaScript就实现DOM元素动画效果,那我非常乐于不用JS去实现。 因为更高效，而且不需要JS框架来一步步处理，代码更美观优雅。 用纯CSS来实现很难确定的一个特效是 上下滑动——当向上滑的时候内容渐变隐藏，向下滑动内容渐变显示。 之所以难以实现的原因是你可能不能获得内容的高度。 在经历了多种多样的CSS属性之后，我发现了一种利用纯CSS来实现滑动特效的方法。 HTML部分 演示这个效果只需要一个元素，类似于下面这样的： <div class="slider">需要滑动(显示隐藏)的内容,内容长度随意,class当然也可以自定义名字啦!</div> CSS部分 在看到效果之前,让我们设置一些很简单的属性：overflow-y 以及 CSS animation 属性: .slider { overflow-y: hidden; max-height: 500px; /* 预估的最大高度 */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic

我写CSS的常用套路

由 安稳与你 提交于 2019-12-30 23:14:06
大きな星を摘んだなら、あなたは大きな富を手に入れる。 前言 本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 之前发的 CSS技巧 大部分都是依照本文的套路来写的 有人问我为什么我能想出这么多的动画？笔者阅番百部，对常用的动画技巧了如指掌，同样那些酷炫的网站只要细心观察，也会给笔者带来很多设计上的灵感。 一言以蔽之：只有多欣赏动画，才能写出好的动画。 “我自己是一名从事了6年web前端开发的老程序员（我的微信：momoxiaojiejie123），今年年初我花了一个月整理了一份最适合2019年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“2019”即可领取）。 常用套路 交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（ delay ）这一属性。举个栗子，比如有十个元素播放十个动画
订阅 css框架