1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 </head>
8
9 <body>
10 <!--1.清除输入框内的空格-->
11 <!--<input type="text" onBlur="replaceSpace(this)" />
12 <script type="text/javascript">
13 function replaceSpace(obj) {
14 obj.value = obj.value.replace(/\s/gi, '')
15 }
16 </script>-->
17
18 <!--2.CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中-->
19 <!--①单个元素水平居中-->
20 <!--<style>
21 .box{
22 display: -webkit-flex;
23 display: -ms-flexbox;
24 display: flex;
25 justify-content: center;
26 background: #0099cc;
27 }
28 h1{
29 color: #FFF
30 }
31 </style>
32 <div class="box">
33 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
34 </div>-->
35
36 <!--②多个h1元素水平居中-->
37 <!--<style>
38 .box{
39 display: flex;
40 justify-content: center;
41 width: 100%;
42 background: #0099cc
43 }
44 h1{
45 font-size: 1rem;
46 padding: 1rem;
47 border: 1px dashed #FFF;
48 color: #FFF;
49 font-weight: normal;
50 }
51 </style>
52 <div class="box">
53 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
54 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
55 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
56 </div>-->
57
58 <!--③多个h1标签并排垂直居中-->
59 <!--<style>
60 .box{
61 display: flex;
62 width: 980px;
63 height: 30rem;
64 align-items:center;
65 background: #0099cc
66 }
67 h1{
68 font-size: 1rem;
69 padding: 1rem;
70 border: 1px dashed #FFF;
71 color: #FFF
72 }
73 </style>
74 <div class="box">
75 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
76 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
77 <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
78 </div>-->
79
80 <!--④同时包含水平,垂直居中-->
81 <!--<style>
82 body{display: flex;justify-content:center}
83 .box{
84 display: flex;
85 width: 980px;
86 height: 30rem;
87 justify-content:center;
88 background: #0099cc;
89 flex-direction:column;
90 align-items:center;
91 }
92 h1{
93 display: flex;
94 justify-content:center;
95 font-size: 1rem;
96 padding: 1rem;
97 border: 1px dashed #FFF;
98 color: #FFF;
99 width: 28rem
100 }
101 </style>
102 <div class="box">
103 <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
104 <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
105 <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
106 <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
107 </div>-->
108
109 <!--3.CSS3中的px,em,rem,vh,vw辨析-->
110 <!--1、px:像素,精确显示
111 2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端
112 em换算工具:http://www.runoob.com/tags/ref-pxtoemconversion.html
113 3、rem:与em类似,rem是继承根节点的属性(即<html>标签),其他的与em相同
114 4、vh:当前可见高度的1%=1vh
115 区别是:当div中没有内容时,height=100%,则高度不显示出来
116 当div中没有内容时,height=100vh,则高度依然能显示出来
117 5、vw:当前可见宽度的1%=1vw
118 区别是:当div中没有内容时,width=100%,则宽度不显示出来
119 当div中没有内容时,width=100vh,则宽度依然能显示出来-->
120
121 <!--4.CSS全局控制-->
122 <!--<style>
123 body {
124 margin: 0;
125 padding: 0;
126 font-size: 14px;
127 line-height: 22px;
128 height: auto;
129 font-family: "微软雅黑";
130 color: #3e3938;
131 -webkit-text-size-adjust: none;
132 }
133 body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form {
134 padding: 0px;
135 margin: 0px;
136 border: 0;
137 font-size: 14px;
138 }
139 .clear {
140 clear: both;
141 }
142 a:link,
143 a:visited {
144 text-decoration: none;
145 }
146 a:hover {
147 text-decoration: none;
148 }
149 a:focus {
150 outline: none;
151 }
152 a {
153 text-decoration: none;
154 blr: expression(this.onFocus=this.blur());
155 }
156 a {
157 outline: none;
158 }
159 ul,
160 ol li {
161 list-style: none;
162 }
163 </style>-->
164
165 <!--5.css水平垂直居中(绝对定位居中)-->
166 <!--<style>
167 #box {
168 position: relative;
169 height: 500px;
170 background: #ddd;
171 }
172 .child {
173 width: 100px;
174 height: 100px;
175 background: #269ABC;
176 margin: auto;
177 position: absolute;
178 top: 0;
179 right: 0;
180 bottom: 0;
181 left: 0;
182 }
183 </style>
184 <div >
185 <div class="child"></div>
186 </div>-->
187
188 <!--6.css水平垂直居中(绝对定位居中)-->
189 <!--<style type="text/css">
190 ul li
191 {
192 list-style-type:georgian;
193 text-align:left;
194 }
195 .mark
196 {
197 width:140px;
198 height:40px;
199 color:Olive;
200 text-align:center;
201 line-height:40px;
202 margin:5px;
203 float:left;
204 }
205 .redball
206 {
207 width:40px;
208 height:40px;
209 border-radius:20px;
210 background-color:Red;
211 text-align:center;
212 line-height:40px;
213 margin:5px;
214 float:left;
215 }
216 .ball
217 {
218 width:40px;
219 height:40px;
220 border-radius:20px;
221 background-color:Aqua;
222 text-align:center;
223 line-height:40px;
224 margin:5px;
225 float:left;
226 }
227 .line
228 {
229 clear:left;
230 }
231 header
232 {
233 height:80px;
234 border:1px solid gray;
235 }
236 .left
237 {
238 border:1px solid gray;
239 float:left;
240 width:30%;
241 height:480px;
242 margin-left:0px;
243 margin-right:0px;
244
245 }
246 aside
247 {
248 text-align:center;
249 }
250 section
251 {
252 width:69.5%;
253 float:left;
254 height:480px;
255 border:1px solid gray;
256 margin-left:0px;
257 margin-right:0px;
258 }
259 footer
260 {
261 clear:left;
262 height:60px;
263 border:1px solid gray;
264 }
265 input[type="button"]
266 {
267 width:80px;
268 text-align:center;
269 margin-top:10px;
270 }
271 </style>
272
273 <header>
274 <h1>直接插入排序(Straight Insertion Sort)Demo</h1>
275 </header>
276 <aside class="left">
277
278 <input type="button" />
279 <br />
280 <input type="button" />
281 <br />
282 <input type="button" />
283 <br />
284 <h3>直接插入排序(Straight Insertion Sort)</h3>
285 <ul>
286 <li>将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表。</li>
287 <li>即:先将序列的第1个记录看成是一个有序的子序列,然后从第2个记录逐个进行插入,直至整个序列有序为止。</li>
288 <li>如果碰见一个和插入元素相等的,那么插入元素把想插入的元素放在相等元素的后面。所以,相等元素的前后顺序没有改变。</li>
289 <li>从原无序序列出去的顺序就是排好序后的顺序,所以插入排序是稳定的。</li>
290 <li>时间复杂度O(n<sup>2</sup>)</li>
291 </ul>
292 </aside>
293 <section >
294
295 </section>
296 <footer>
297 这是底部信息
298 </footer>
299 <script type="text/javascript">
300 function initDiv() {
301 var mainArea = document.getElementById("mainArea");
302 for (var i = 0; i < 8; i++) {
303 var newDivLine = document.createElement("div");
304 newDivLine.setAttribute("class", "line");
305 mainArea.appendChild(newDivLine);
306 for (var j = 0; j < 9; j++) {
307 var newDiv = document.createElement("div");
308 var id = i.toString() + j.toString();
309 newDiv.setAttribute("id", id);
310 if (j < 8) {
311 newDiv.setAttribute("class", "ball");
312 } else {
313 newDiv.setAttribute("class", "mark");
314 }
315 newDivLine.appendChild(newDiv);
316 }
317 }
318 }
319
320 //初始元素赋值
321 var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
322 function setElementsValue() {
323 for (var i = 0; i < arrTmp.length; i++) {
324 document.getElementById("0" + i.toString()).innerText = arrTmp[i];
325 }
326 document.getElementById("08").innerText = "原始数据";
327 }
328
329 //排序
330 function setSISortValue() {
331 for (var i = 1; i < arrTmp.length; i++) {
332 var m = 0;//为了记录插入的位置,方便标记
333 //若第i个元素大于i-1元素,直接插入。小于的话,移动有序表后插入
334 if (arrTmp[i] < arrTmp[i - 1]) {
335 var x = arrTmp[i]; //复制为哨兵(临时变量),即存储待排序元素
336 var j = i - 1;
337 arrTmp[i] = arrTmp[i - 1]; //先后移一个元素
338 //循环查找在有序表的插入位置,如果要插入的值小于,则继续查找,并将元素后移。
339 while (x < arrTmp[j]) {
340 arrTmp[j + 1] = arrTmp[j];
341 j--;
342 }
343 //查找完毕后,插入到正确位置(即要插入的值大于前面的元素)
344 arrTmp[j + 1] = x;
345 m = j + 1;
346 } else {
347 m = i;
348 }
349 //显示出来
350 for (var k = 0; k < arrTmp.length; k++) {
351 document.getElementById((i).toString() + k.toString()).innerText = arrTmp[k];
352 if (m == k) {
353 document.getElementById((i).toString() + (k).toString()).setAttribute("class", "redball");
354 }
355 }
356 document.getElementById((i).toString() + "8").innerText = "第 " + (i).toString() + " 趟排序";
357 }
358 }
359 </script>-->
360
361 <!--7.css水平垂直居中(绝对定位居中)-->
362 <!--<style>
363 .container{
364 width: 500px;
365 height: 400px;
366 border: 2px solid #379;
367 position: relative;
368 }
369 .inner{
370 width: 480px;
371 height: 380px;
372 background-color: #746;
373 position: absolute;
374 top: 50%;
375 left: 50%;
376 margin-top: -190px;
377 margin-left: -240px;
378 }
379 </style>
380 <div class="container">
381 <div class="inner"></div>
382 </div>-->
383
384 <!--8.css水平垂直居中(绝对定位居中)-->
385 <!--<style>
386 div{
387 width: 300px;
388 height: 300px;
389 border: 3px solid #555;
390 display: table-cell;
391 vertical-align: middle;
392 text-align: center;
393 }
394 img{
395 vertical-align: middle;
396 }
397 </style>
398 <div>
399 <img src="img/HBuilder.png" />
400 </div>-->
401
402 <!--9.css水平垂直居中(绝对定位居中)-->
403 <!--<style>
404 .container{
405 width: 300px;
406 height: 200px;
407 border: 3px solid #546461;
408 display: -webkit-flex;
409 display: flex;
410 -webkit-align-items: center;
411 align-items: center;
412 -webkit-justify-content: center;
413 justify-content: center;
414 }
415 .inner{
416 border: 3px solid #458761;
417 padding: 20px;
418 }
419 </style>
420 <div class="container">
421 <div class="inner">
422 我在容器中水平垂直居中
423 </div>
424 </div>-->
425
426 </html>