<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.清除输入框内的空格-->
<!--<input type="text" onBlur="replaceSpace(this)" />
<script type="text/javascript">
function replaceSpace(obj) {
obj.value = obj.value.replace(/\s/gi, '')
}
</script>-->
<!--2.CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中-->
<!--①单个元素水平居中-->
<!--<style>
.box{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: center;
background: #0099cc;
}
h1{
color: #FFF
}
</style>
<div class="box">
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>-->
<!--②多个h1元素水平居中-->
<!--<style>
.box{
display: flex;
justify-content: center;
width: 100%;
background: #0099cc
}
h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
font-weight: normal;
}
</style>
<div class="box">
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>-->
<!--③多个h1标签并排垂直居中-->
<!--<style>
.box{
display: flex;
width: 980px;
height: 30rem;
align-items:center;
background: #0099cc
}
h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
</style>
<div class="box">
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>-->
<!--④同时包含水平，垂直居中-->
<!--<style>
body{display: flex;justify-content:center}
.box{
display: flex;
width: 980px;
height: 30rem;
justify-content:center;
background: #0099cc;
flex-direction:column;
align-items:center;
}
h1{
display: flex;
justify-content:center;
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
width: 28rem
}
</style>
<div class="box">
<h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
<h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
<h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
<h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
</div>-->
<!--3.CSS3中的px,em,rem,vh,vw辨析-->
<!--1、px：像素，精确显示
2、em：继承父类字体的大小，相当于“倍”，如：浏览器默认字体大小为16px=1em，始终按照div继承来的字体大小显示，进场用于移动端
em换算工具：http://www.runoob.com/tags/ref-pxtoemconversion.html
3、rem：与em类似，rem是继承根节点的属性（即<html>标签），其他的与em相同
4、vh：当前可见高度的1%=1vh
区别是：当div中没有内容时，height=100%，则高度不显示出来
当div中没有内容时，height=100vh，则高度依然能显示出来
5、vw：当前可见宽度的1%=1vw
区别是：当div中没有内容时，width=100%，则宽度不显示出来
当div中没有内容时，width=100vh，则宽度依然能显示出来-->
<!--4.CSS全局控制-->
<!--<style>
body {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 22px;
height: auto;
font-family: "微软雅黑";
color: #3e3938;
-webkit-text-size-adjust: none;
}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form {
padding: 0px;
margin: 0px;
border: 0;
font-size: 14px;
}
.clear {
clear: both;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:focus {
outline: none;
}
a {
text-decoration: none;
blr: expression(this.onFocus=this.blur());
}
a {
outline: none;
}
ul,
ol li {
list-style: none;
}
</style>-->
<!--5.css水平垂直居中（绝对定位居中）-->
<!--<style>
#box {
position: relative;
height: 500px;
background: #ddd;
}
.child {
width: 100px;
height: 100px;
background: #269ABC;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<div >
<div class="child"></div>
</div>-->
<!--6.css水平垂直居中（绝对定位居中）-->
<!--<style type="text/css">
ul li
{
list-style-type:georgian;
text-align:left;
}
.mark
{
width:140px;
height:40px;
color:Olive;
text-align:center;
line-height:40px;
margin:5px;
float:left;
}
.redball
{
width:40px;
height:40px;
border-radius:20px;
background-color:Red;
text-align:center;
line-height:40px;
margin:5px;
float:left;
}
.ball
{
width:40px;
height:40px;
border-radius:20px;
background-color:Aqua;
text-align:center;
line-height:40px;
margin:5px;
float:left;
}
.line
{
clear:left;
}
header
{
height:80px;
border:1px solid gray;
}
.left
{
border:1px solid gray;
float:left;
width:30%;
height:480px;
margin-left:0px;
margin-right:0px;
}
aside
{
text-align:center;
}
section
{
width:69.5%;
float:left;
height:480px;
border:1px solid gray;
margin-left:0px;
margin-right:0px;
}
footer
{
clear:left;
height:60px;
border:1px solid gray;
}
input[type="button"]
{
width:80px;
text-align:center;
margin-top:10px;
}
</style>
<header>
<h1>直接插入排序(Straight Insertion Sort)Demo</h1>
</header>
<aside class="left">
<input type="button" />
<br />
<input type="button" />
<br />
<input type="button" />
<br />
<h3>直接插入排序(Straight Insertion Sort)</h3>
<ul>
<li>将一个记录插入到已排序好的有序表中，从而得到一个新，记录数增1的有序表。</li>
<li>即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。</li>
<li>如果碰见一个和插入元素相等的，那么插入元素把想插入的元素放在相等元素的后面。所以，相等元素的前后顺序没有改变。</li>
<li>从原无序序列出去的顺序就是排好序后的顺序，所以插入排序是稳定的。</li>
<li>时间复杂度O(n<sup>2</sup>)</li>
</ul>
</aside>
<section >
</section>
<footer>
这是底部信息
</footer>
<script type="text/javascript">
function initDiv() {
var mainArea = document.getElementById("mainArea");
for (var i = 0; i < 8; i++) {
var newDivLine = document.createElement("div");
newDivLine.setAttribute("class", "line");
mainArea.appendChild(newDivLine);
for (var j = 0; j < 9; j++) {
var newDiv = document.createElement("div");
var id = i.toString() + j.toString();
newDiv.setAttribute("id", id);
if (j < 8) {
newDiv.setAttribute("class", "ball");
} else {
newDiv.setAttribute("class", "mark");
}
newDivLine.appendChild(newDiv);
}
}
}
//初始元素赋值
var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
function setElementsValue() {
for (var i = 0; i < arrTmp.length; i++) {
document.getElementById("0" + i.toString()).innerText = arrTmp[i];
}
document.getElementById("08").innerText = "原始数据";
}
//排序
function setSISortValue() {
for (var i = 1; i < arrTmp.length; i++) {
var m = 0;//为了记录插入的位置，方便标记
//若第i个元素大于i-1元素，直接插入。小于的话，移动有序表后插入
if (arrTmp[i] < arrTmp[i - 1]) {
var x = arrTmp[i]; //复制为哨兵(临时变量)，即存储待排序元素
var j = i - 1;
arrTmp[i] = arrTmp[i - 1]; //先后移一个元素
//循环查找在有序表的插入位置，如果要插入的值小于，则继续查找，并将元素后移。
while (x < arrTmp[j]) {
arrTmp[j + 1] = arrTmp[j];
j--;
}
//查找完毕后，插入到正确位置（即要插入的值大于前面的元素）
arrTmp[j + 1] = x;
m = j + 1;
} else {
m = i;
}
//显示出来
for (var k = 0; k < arrTmp.length; k++) {
document.getElementById((i).toString() + k.toString()).innerText = arrTmp[k];
if (m == k) {
document.getElementById((i).toString() + (k).toString()).setAttribute("class", "redball");
}
}
document.getElementById((i).toString() + "8").innerText = "第 " + (i).toString() + " 趟排序";
}
}
</script>-->
<!--7.css水平垂直居中（绝对定位居中）-->
<!--<style>
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px;
margin-left: -240px;
}
</style>
<div class="container">
<div class="inner"></div>
</div>-->
<!--8.css水平垂直居中（绝对定位居中）-->
<!--<style>
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
</style>
<div>
<img src="img/HBuilder.png" />
</div>-->
<!--9.css水平垂直居中（绝对定位居中）-->
<!--<style>
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
</style>
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>-->
</html>
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
