-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy path2018-06-07-A组-css9.html
206 lines (197 loc) · 9.55 KB
/
2018-06-07-A组-css9.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
<!doctype html>
<html>
<head>
<meta 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="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">
<!-- 打印和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>
<style>
.reveal pre code {
background-color: #120;
}
</style>
</head>
<body>
<img src="img/demo/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">
<div class="slides">
<section>
<h3>如何使用bootstrap栅格系统？</h3>
<h4>小课堂【北京-WEB-A组】</h4>
<h4>分享人：刘仁瑞</h4>
</section>
<section>
<p>目录</p>
<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>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</p>
<p> Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言less写成。而最新的Bootstrap4是采用sass来编写的 </p>
</section>
<section>
<p>position的属性值默认值：static（默认）</p>
<p>常用值relative（相对）、absolute（绝对）、fixed（固定）</p>
<p>不常用的：inherit（从父元素继承position的值）、sticky（粘性定位）、initial、unset、revert</p>
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<p>static</p>
<p>默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</p>
</section>
<section>
<p>relative相对定位</p>
<p>不脱离文档流。设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。</p>
<img src="img/2018-5-29-A组-css4/relative.png"/>
</section>
<section>
<p>absolute绝对定位</p>
<p>脱离文档流。然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于HTML元素定位。<br/>
<img src="img/2018-5-29-A组-css4/absolute.png"/>
</section>
<section>
<p>fixed固定定位</p>
<p>脱离文档流。与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。它不会随浏览器窗口的滚动条滚动而变化.</p>
<img src="img/2018-5-29-A组-css4/fixed1.png"/>
<img src="img/2018-5-29-A组-css4/fixed2.png"/>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
<p>格栅系统的15px有什么用？</p>
</section>
<section>
<p>如何设置5列占满跨度？</p>
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>relative：相对于初始位置<br /><br />
absolute:相对于具有“定位属性的祖先元素”<br /><br />
fixed：相对于浏览器视窗。
</p>
</section>
</section>
<section>
<section>
<h3>5.编码实战</h3>
</section>
<section>
<p>话不多说</p>
<p>我来演示一下</p>
</section>
</section>
<section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p>子绝父相布局为什么要“子绝父相”</p>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
参考一：<a href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">菜鸟教程</a><br>
参考二：<a href="http://www.bootcss.com/">bootstrap中文网</a><br>
参考三：<a href="https://www.cnblogs.com/chessYu/p/7337018.html">博客园</a><br>
参考四：<a href="https://www.cnblogs.com/harris-peng/p/5516947.html">博客园</a><br>
</section>
</section>
<section>
<section>
<h3>8.更多讨论</h3>
</section>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
By 刘仁瑞
</p>
</section>
</div>
</div>
<script src="lib/reveal/js/head.min.js"></script>
<script src="lib/reveal/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>
</body>
</html>