回到顶部实现
<div id="topAnchor"></div>
<a href="#topAnchor">锚点回到顶部</a>
var test = document.getElementById('test');
test.onclick = function(){
target.scrollIntoView();
scrollTo(0,0);
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top);
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
垂直和居中
boxCenter3{
width: 200px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}
.boxCenter2{
width: 200px;
height: 100px;
border: 1px solid red;
float: left;
margin: -50px 0 0 -100px;
position: absolute;
left: 50%;
top: 50%;
}
.boxCenter1{
border: 1px solid red;
height: 50px;
width: 80px;
margin: 0 auto;
}
.sjx{
width:0;
height:0;
border-top: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #ff0000;
}
浮动布局
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.header{
height:50%;
width: 50%;
background: #ccc;
margin:0 auto;
}
.main{
width: 100%;
height: 50%;
background: #ddd;
}
.main .left,.main .right{
float: left;
width:50%;
height:100%;
background: yellow;
}
.main .right{
background: green;
}