forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2018-07-05-WEB-A组-CSS15.html
251 lines (233 loc) · 18.6 KB
/
2018-07-05-WEB-A组-CSS15.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<!-- saved from url=(0091)file:///C:/Users/LALH/Desktop/PPT%20-%20%E5%89%AF%E6%9C%AC/PPT/console%20and%20debug.html#/ -->
<html class=" js no-mobile desktop no-ie chrome chrome62 c:-section users-section lalh-section desktop-section ppt%20-%20%e5%89%af%e6%9c%ac-section ppt-section w-1366 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded" id="console%20and%20debug-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<!--<link rel="stylesheet" href="./葡萄藤PPT_files/reveal.css">-->
<link rel="stylesheet" href="css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="lib/reveal/css/zenburn.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<!--<link rel="stylesheet" href="./葡萄藤PPT_files/ptt.css">-->
<!-- syntax highlighting 代码高亮主题 -->
<!--<link rel="stylesheet" href="./葡萄藤PPT_files/zenburn.css">-->
<style>
p{
text-align: left;
/*font-size: 25px;*/
}
.smallp p{
font-size: 25px;
/*line-height: 30px;*/
}
.moresmallp p{
font-size: 18px;
}
</style>
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script><link rel="stylesheet" type="text/css" href="./葡萄藤PPT_files/paper.css"><script type="text/javascript" src="./葡萄藤PPT_files/marked.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/markdown.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/notes.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/highlight.js.下载"></script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.768857);">
<section class="present" style="top: 133px; display: block;">
<h3>【css-15】<span>常见的CSS和JS框架</span></h3>
<h3>小课堂</h3>
<h4>分享人:姜学倩</h4>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 3px; display: block;">
<h4>目录</h4>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h3>1.背景介绍</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h4>1.什么是库?什么是框架？</h4>
<p>库：库是有用功能的有组织的集合。库的典型功能包括处理字符串、日期、HTML DOM元素、
事件、Cookie、动画、网络请求等。每个函数将值返回给调用应用程序，但是你可以从中选择
参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方
面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在
自己的应用中使用，我们可以从封装的角度理解库.</p>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h4>1.什么是库?什么是框架？</h4>
<p>框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，
而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。框架是一个应用程序的骨架，
它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。 通常框架提供事件、
存储和数据绑定等功能。</p>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h3>2.知识剖析</h3>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>CSS常用的框架和库</h4>
</p>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>Foundation</h4>
<p>Foundation框架总体来看要比Bootstrap略显高大上一点，但他们俩的设计理念都是非常清楚的，
Bootstrap有引导的意思，它尝试处理你项目中的一切所需。Foundation有基础、地基及支柱的意思，
给你项目中强有力的创造与支持。相对于Bootstrap丰富的组件及插件，Foundation仅提供了
有限的几种元素，其目标是，即使你使用预定义的UI元素，也不应该与大家的网站长得太像。
而Bootstrap则致力于提供所有定义好的元素，这样使得看起来许多网站都差不多。
Foundation默认不带图标集，它推荐使用开源字体图标。与Bootstrap一样，
Foundation使用网格流式布局将网页划分为12列，针对不同的设备显示不同的列数，实现响应式布局。</p>
<a href="https://foundation.zurb.com/sites.html">https://foundation.zurb.com/sites.html</a>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>JS流行库和框架</h4>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>Jq</h4>
<p>jQuery是最常用的JavaScript库，它革命性的在客户端开发，将CSS选择器引入到DOM节点检索
加链接来应用事件处理程序、动画和Ajax调用。jQuery近年来备受青睐，对于一个很需要
JavaScript功能的项目来说，jQuery绝对是一个可行的选择。</p>
<a href="https://jquery.com/">https://jquery.com/</a>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>React</h4>
<p>React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，
用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React声称是一个用于构建用户界面的JavaScript库，它专注于MVC开发的“View”部分，
并且可以轻松创建保留状态的UI组件。 它是实现虚拟DOM的第一个库， 内存结构计算差异，
有效地更新页面。</p>
<a href="https://reactjs.org/">https://reactjs.org/</a>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>Angular</h4>
<p>AngularJS [1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
</p>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>Vue</h4>
<p>Vue.js是一个构建数据驱动的 web 界面的渐进式框架。由在美的谷歌工程师尤雨溪开发。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.
它不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 自身不是一个全能框架——它只聚焦于视图层。
因此它非常容易学习，非常容易与其它库或已有项目整合。
另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。</p>
<a href="https://cn.vuejs.org/">https://cn.vuejs.org/</a>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>Backbone</h4>
<p>支持jquery，自带路由，对象化视图，强大的sync机制减少页面大小从而加快页面显示。</p>
<a href="http://backbonejs.org/">http://backbonejs.org/</a>
</section>
<section hidden="" aria-hidden="true" class="future smallp" style="top: 330px; display: none;">
<h4>Ember</h4>
<p>一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、
计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。
Ember使用自身扩展的类来创建Ember对象、数组、字符串、函数，提供大量方法与属性用于操作。</p>
<a href="https://www.emberjs.com/">https://www.emberjs.com/</a>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h3>3.常见问题</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h3>库和框架区别？</h3>
<!--<p>从Web开发人员的角度：-->
<!--库可以很容易地被另一个库替换。但框架不能。-->
<!--如果您不喜欢jquery日期选择器库，则可以使用其他日期选择器替换，例如bootstrap日期选择器或pickadate。-->
<!--如果您不喜欢构建产品的AngularJS，则不能只替换任何其他框架。您必须重写整个代码库。-->
<!--与Frameworks相比，大多数库的学习曲线要少得多。例如：underscore.js是一个库，Ember.js是一个框架。</p>-->
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<h3>4.解决方案</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
<!--<h3>库和框架区别？</h3>-->
<p>库是您从代码中调用的模块，框架是调用代码的模块。</p>
<p>这仅仅是一个集合的例程（函数式编程）或类定义（面向对象编程）。背后的原因只是代码重用，即获取已由其他开发人员编写的代码。
类或例程通常在特定于域的区域中定义特定操作。例如，有一些数学库可以让开发人员只需调用函数而无需重做算法如何工作的实现。
在框架中，所有的控制流都已存在，并且我们应该用我们的代码填写一堆预定义的白点。框架通常更复杂。它定义了一个框架，
应用程序定义了自己的特征以填充框架。通过这种方式，适当时框架将调用您的代码。好处是开发人员不需要担心设计是否良好，
而只需要实现特定于域的功能。</p>
<!--<a href="https://www.jianshu.com/p/29d7311161ba">React和react-router, react-redux结合起来才叫框架，本身只是充当一个前端渲染的库而已</a>-->
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>5.编码实战</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>6.拓展思考</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>1.js框架之间学起来有关联吗？</h3>
<h3>2.哪个框架比较受欢迎？</h3>
<h3>3.哪个框架对新手比较友好？</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>7.参考文献</h3>
<p>参考资料:https://blog.csdn.net/bluesky1215/article/details/68922920</p>
<p>参考资料：https://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library?noredirect=1&lq=1</p>
<!--<p>参考资料：https://www.jianshu.com/p/e75f351e11f8 <b>css3中的BFC,IFC,GFC和FFC</b></p>-->
<!--<p>参考资料：https://zhuanlan.zhihu.com/p/25321647 <b>10 分钟理解 BFC 原理</b></p>-->
<!-- <p><small>BY : 沁修 | 王义山</small></p> -->
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>8.更多讨论</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>1.我们该学哪些框架？</h3>
<h3>1.框架的学习有推荐顺序吗？</h3>
<h3>1.Angular框架该学习哪个？</h3>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h4>鸣谢</h4>
<h4>感谢大家观看</h4>
</section>
</div>
<div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 0px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px);">
分享人：姜学倩
</div></div>
<script src="./葡萄藤PPT_files/head.min.js.下载"></script>
<script src="./葡萄藤PPT_files/reveal.js.下载"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
{ src: '../plugin/notes/notes.js', async: true },
{ src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
Contact GitHub API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Status He</body></html>