-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
297 lines (257 loc) · 21.2 KB
/
index.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>牛牧原的安全教育小常识</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="http://fonts.useso.com/icon?family=Material+Icons">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-warning navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">牛牧原的安全教育小常识</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-warning-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a data-toggle="modal" data-target="#aboutme">自我介绍</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel
================================================== -->
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-md-5">
<h3>中学生安全教育<small><a class="btn btn-danger" href="#anquanjianyu">更多...</a></small></h3>
<p>全国因安全事故数以万计天真无邪的生命死于非命。 </p>
<p>中央领导对中学生安全的指示：“人民生命高于天，人民利益重如山”。素质教育的重要内容之一“安全教育”。</p>
</div>
<div class="col-md-7 right">
<img class="first-slide img-responsive" src="img/aqjy.jpg" alt="First slide">
</div>
</div>
<!-- <div class="item active">
<img class="first-slide" src="img/aqjy.jpg" alt="First slide">
<div class="carousel-caption">
<h1>中学生安全教育</h1>
<p>全国因安全事故数以万计天真无邪的生命死于非命。 </p>
<p>中央领导对中学生安全的指示：“人民生命高于天，人民利益重如山”。素质教育的重要内容之一“安全教育”。</p>
</div>
</div> -->
<div class="item">
<div class="col-md-7">
<h3>从“见义勇为”到“见义智为”是社会的进步<small><a class="btn btn-link" href="#jianyizhiwei">更多...</a></small></h3>
<p>随着社会的变革和人们认识的发展，社会越来越多元化，在过去提倡“见义勇为”或许是适当的；而在当下，人们的价值观比较多元，偶发事件也很多，在这种情况下，一味提倡中小学生见义勇为，对保护儿童、少年自身安全其实是不利的。</p>
<p>
</p>
</div>
<div class="col-md-5 right">
<img class="second-slide img-responsive" src="img/jianyizhiwei.jpg" alt="Second slide">
</div>
</div>
<div class="item">
<div class="col-md-5">
<h3>交友需谨慎<small><a class="btn btn-link" href="#zeyouzhidao">更多...</a></small></h3>
<p>古人说“近朱者赤，近墨者黑”。这就告诉我们要交志同道合、真诚、正直、有理想、有抱负的朋友，交这样的朋友往往相处非常融洽，才能在学习和做人之上彼此促进相得益彰。</p>
</div>
<div class="col-md-7">
<img class="third-slide img-responsive" src="img/jiaoyouanquan.jpg" alt="Third slide">
</div>
</div>
<div class="item">
<div class="col-md-8">
<h3>从容应对自然灾害<small><a class="btn btn-link" href="#yingduiziranzaihai">更多...</a></small></h3>
<p>我国是个自然灾害发生频繁的国家，由于防灾教育缺乏、民众的防灾意识淡薄，灾害后果严重。中小学生是祖国的未来，民族的希望，在自然灾害发生时，如何提升他们的自我保护能力是非常重要的。</p>
</div>
<div class="col-md-4">
<img class="fourth-slide img-responsive" src="img/nishiliu.jpg" alt="Fourth slide">
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette anquanjiaoyu">
<div class="col-md-12" id="anquanjianyu">
<h5 class="lead">生命诚可贵，安全价更高。<h5>
<p>人的生命是至高无上的，然而，安全是幸福生活的保障，是生命的基石，也是欢乐的阶梯，所以我们要时刻敲醒安全的警钟，多一份安全思想，少一份事故危机。</p>
<p>看了安全教育中的事例，那一幕幕触目惊心的场面，那一个个血淋淋的数字，使我更加感受到了生命的可贵，安全的重要。有时，烟头虽小，祸患无穷，一个小小的烟头，往往是一场大火的前奏，一个意外往往是一场灾难的发生。</p>
<p>生命安全，是一个不可忽视的话题，也是一个至关重大的话题，无论是谁，都要珍爱生命，不可掉以轻心。在我们的生活中存在了许多的安全隐患，而大多数的人都是杞人忧天，其实，正是因为这些小问题，才一步一步构成了对我们人身安全的威胁，正所谓，小心驶得万年船，如果不去关注这些小问题，又怎能让自己的安全得到更大的保障呢？所以，我们要多注意发现并解决身边的隐患。</p>
<p>我们身边也有许多不幸的事情发生，有时，一些小事因为处理不当，缺乏安全意识，就造成了不可收拾的后果，酿成大错。所以，不想噩梦成真，就要重视安全，了解更多的安全意识，学会自我保护，为安全编织幸福的花环。遇到灾难时不能惊慌失措，一定要保持冷静，用适当的方法自救或向他人求救化险为夷。</p>
<p>同学们，在我们生活的每一角落里，都潜伏着许多不安全的因素，生命是宝贵的，同时也是脆弱的。有时，只要你稍不留意，它就会遇到危险，受到威胁。要知道，每天因事故身亡的小学生就有上百个了，这沾满血腥的数字不只是数字那么简单，那是一条条有血有肉的生命啊！一棵刚发芽的种子却瞬间被毁灭了，所有希望都破碎了，所有一切都消失了，这宝贵的生命之火才燃起了多久啊！这生命的花季才持续多久啊！这血的教训时刻警惕着我们：安全是生命的前题，要珍爱自己的生命。</p>
<p>生命如同鲜花一样娇艳，绽放着生命的美丽。生命只有一次，对于谁都是宝贵的，而人生的花季只有一次，青春的火焰也只绽放一次，我们怎能不珍惜这段美好的时光呢？所以，我们要以安全为首，敲响安全的警钟，热爱生命，奏响生命的乐章，让生命之花更加绚丽！</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-10 col-md-push-2" id="jianyizhiwei">
<h5 class="lead">“见义智为”更值得提倡</h5>
<p>“见义勇为”这个成语每一个中国人都不陌生，甚至这个成语出现的频率可能是大多数在从小学到走上社会之后在无数场合都会碰到的一个“高频词”，如今，这个词适用的环境和范围可能要发生一点改变，“见义勇为”或许仅仅是在满足一定条件下的英勇行为，而“见义智为”则会成为一种常态。</p>
<p>每一个接受正规义务教育的国人都不会陌生小学课本乃至初中课本里那一个个鲜活的见义勇为的英雄人物，他们当中有为了中朝两国友谊而勇救落水儿童牺牲的罗盛教，也有为了扑灭森林大火保护国家财产而献身的赖宁，这些英雄人物在当时的时代背景和价值观念下，奋不顾身的救人、保护国家财产是可以得到合理的社会认同和价值解读的，但是在新的历史背景下，人们的价值观念以及对于见义勇为的理解发生了一些基于时代认知特点的变化，见义勇为有了“升级版”，“见义智为”才是这个时代最符合人们价值观念的行为选择模式。</p>
<p>见义勇为，表面上看这个词语的意思就是鼓励人们在面对危难和危险时能够贡献自己的一己之力帮助别人，但是这里的这个“为”必须是在确保自己安全的前提下实施的行为，所以“勇”字虽然是英勇之义，但并不是鼓励个体“英勇就义”……为了展现大义而不顾自己的生命安危，这种见义勇为其实并不值得鼓励和提倡。</p>
<p>不得不提起一条旧闻：2013年5月11号，惠州市博罗县罗阳镇罗阳一中的8名学生在东江边烧烤时，其中一位男生滑入水中，其他4位同学手牵手施救，不幸一起落入江中被水冲走死亡。</p>
<p>四位同学牵手施救，人没救成，四个人全部被水冲走，年轻生命的逝去带给家人无限悲痛，我们不能否认这几个年轻人见义勇为的精神，但是在不能了解江水深度以及个人水性的情况下，这样手牵手下水施救，其实是非常冒险的，也就是说，在一些危机情况下，见义勇为是需要专业“资格”的，拿这个案例来说，敢于下水施救的人，一定是对这片水域非常了解且水性很好的人，而且最好还有一些简单的工具在身边，比如绳索或者木棒，防止落水者抱住施救者不撒手，将施救人员也陷入危险境地。</p>
<p>见义勇为是高度的道德自觉范畴的行为，它可以被鼓励和提倡，但我们更希望这个“勇”是建立在“智”之上。从这个角度来说，“见义智为”是见义勇为的升级版，更值得提倡。
</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-10" id="zeyouzhidao">
<h5 class="lead">择友之道</h5>
<p>自古以来，友谊就被视为世间最珍贵的东西。友谊的可贵之处在于志同道合，言而有信。“烈火识真金，危难见真情”人处患难是友谊的最好见证。从古到今，有多少仁人志士为了友谊而留下了灿烂的一页。</p>
<p>“人之相识，贵在相知；人之相知，贵在知心”朋友只有知心，才能舒心；朋友只有知心，才能同心。心志相通，情投意合，会使我们的生活充满阳光，舒畅欢欣，会使我们同心同德，为了共同的人生目标去奋斗。</p>
<p>友谊是心灵的沟通，情感的交流，是无私的关怀，宝贵的信任，是真挚的忠告，热情的鼓励。拥有友谊，我们的人生就会多一双手，多一份阳光。</p>
<p>真正的友谊是建立在志同道合的基础上的，只有志同道合的人才能建立真正的友谊，理想不同，志向不同的人，友谊是不可能长久的。鲁迅与翟秋白相识于1932年夏秋之间，彼此一见如古，十分默契。从此他们为推动革命文化运动而并肩战斗，结下了深厚的友谊。在他们相互交往的期间，鲁迅曾多次帮助翟秋白，翟秋白我为感谢鲁迅写下了《鲁迅杂感选集》，对鲁迅的杂文给予了很高的评价，鲁迅也为翟秋白自拟了一幅对联“人生得一知己足矣，斯世当以同怀视之”。鲁迅与翟秋白之所以建立如此深厚的友谊，无异于他们有共同的理想。故曰：“道不同，不相为谋”。</p>
<p>明代苏浚说：“甘言如饴，游戏征遂，呢友也；利则相接，意则相促，贼友也”。不错的，“呢友”或“贼友”称不上真正的朋友。交友不能急于求成，不是每个人都能成为你的朋友。交友时要谨慎选择，这是交友的一大难处。随着社会的进步，人们的思想也在不断进步，择友是易被一些阴险狡诈的人所蒙骗，这样的人外表看似诚实可信，其实不然。那些见利忘义的人也是不值得交的。隋朝王通这样说：“以势交者，势穷则绝；以利交者，利穷则散”。故曰：“始交不慎，后必成仇”。</p>
<p>茫茫人海，环目四望，何人可引为知己？何人堪称知音？这需要我们掌握择友之道，谨慎选择，从而使自己拥有一份纯洁的友谊。</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-10 col-md-push-2" id="yingduiziranzaihai">
<h5 class="lead">泥石流发生时如何应对</h5>
<p>当你不幸遭遇泥石流或山体滑坡时，首先要沉着冷静，然后采取必要措施迅速撤离到安全地点。</p>
<p><strong>1. 朝与泥石流垂直方向跑</strong><br/>遇到山体崩滑时要朝垂直于滚石前进的方向跑。切记不要在逃离时朝着滑坡方向跑。避难场地应选择在易滑坡两侧边界外围，千万不要将避灾场地选择在滑坡的上坡或下坡。</p>
<p><strong>2. 躲在结实的障碍物下</strong><br/>遇到山体崩滑无法及时逃离时，应迅速抱住身边的树木等固定物体。可躲避在结实的障碍物下，或蹲在地坎、地沟里。应注意保护好头部，可利用身边的衣物裹住头部。</p>
<p><strong>3. 滑坡停止后不可立即返回</strong><br/>因为滑坡会连续发生，存在部分市民急切救人或找回钱财的情况，切记贸然返回可能遭到第二次滑坡的侵害。只有当滑坡已经过去，并确认好安全后，方可进入。</p>
<p><strong>4. 牢记三点救人要领</strong><br/>救助被滑坡淹埋的人和物的方法要领有三点：①将滑坡体后缘的水排开；②从滑坡体的侧面开始挖掘；③先救人，后救物。</p>
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<a href="javascript:scroll(0,0)" class="backToTop"><span class="glyphicon glyphicon-chevron-up"></span></a>
<footer>
<p>© 作者: <a data-toggle="modal" data-target="#aboutme">牛牧原</a> ·</p>
</footer>
</div><!-- /.container -->
<!-- <div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">牛牧原</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
-->
<!-- Modal -->
<div class="modal fade" id="aboutme" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content modal-md">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">牛牧原</h4>
</div>
<div class="modal-body">
<div >
<p class="text-center">
<img src="img/niumuyuan.png" class="img-circle"/>
</p>
<p>我叫<strong>牛牧原</strong>，今年15岁了，现就读于新泰市汶城中学九年级六班，是多门学科课代表。我在班上学习虽然谈不上数一数二，但我人缘特好，班上大部分同学都是我的好朋友。我不仅朋友多，而且兴趣爱好也多的不得了，有：绘画、电脑制作、游泳、弹琴、舞蹈、读书……多次获得“综合素质标兵”，在课堂上开创了“科教频道”，通过我制作的PPT，给大家分享科普小知识。我多次参加全国性舞蹈比赛，并获得一等奖第一名。我最爱笑，因为我觉得笑是最好的表达方式。我经常说；“把微笑带给生活，用微笑点缀生命”。</p>
<p>我是一个性情多元化的女生，既有戏文需要的沉稳，也有导演需要的活泼。生活中我踏实上进，学习中积极进取。小小的我是一粒沙，不甘于落后、碌碌无为。“路漫漫其修远兮，吾将上下而求索”是我的座右铭，我渴望在前行的路上，留一行扎实稳健的足迹，攀登文化之巅峰。</p>
<p>这就是我，风华正茂的我，意气风发的我。</p>
<p>这就是我，挥洒青春的我，永不落后的我。</p>
</div>
<div id="aboutMeCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#aboutMeCarousel" data-slide-to="0" class=""></li>
<li data-target="#aboutMeCarousel" data-slide-to="1" class=""></li>
<li data-target="#aboutMeCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/first.png" alt="">
</div>
<div class="item">
<img src="img/second.png" alt="">
</div>
<div class="item active">
<img src="img/third.png" alt="">
</div>
</div>
<a class="left carousel-control" href="#aboutMeCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#aboutMeCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- // <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/ripples.min.js"></script>
<script>
$.material.init();
</script>
</body>
</html>