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 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 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 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 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 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 id="box"> 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 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 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 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 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 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 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" id="btnInit" value="Init" onclick="initDiv();" /> 279 <br /> 280 <input type="button" id="btnSetValue" value="SetValue" onclick="setElementsValue();" /> 281 <br /> 282 <input type="button" id="btnSort" value="Sort" onclick="setSISortValue();" /> 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 id="mainArea"> 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 500px; 365 height: 400px; 366 border: 2px solid #379; 367 position: relative; 368 } 369 .inner{ 370 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 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 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>