1、导航栏固定显示代码，文字居中，z-index
header{
position: fixed;
top: 0px;
left: 10%;
width: 80%;
height: 80px;
border:1px solid blue;
text-align: center;
background-color: #ccc;
z-index: 2;
}
2、中间内容居中，上下左右留间距代码
.container{
position: relative;
top: 80px;
left: 10%;
width: 80%;
border:1px solid blue;
background-color: #fff;
margin-bottom: 50px;
}
3、display:inline-block控制的左右结构布局
nav{ //左边侧导航
width: 20%;
border:1px solid red;
display: inline-block;
}
.section_container{ //右边包含多个section的内容部分
width: 75%;
border:5px solid blue;
display: inline-block;
vertical-align: top;
}
4、与3相同效果的position：absolutely左右结构布局
nav{
position: absolute;
width:20%;
border:1px solid red;
}
section{ //同时控制多个section
margin-left:20%;
width: 80%;
border:1px solid red;
}
5、flex的布局应用
.flex{
padding:10px;
display: flex;
flex-flow:row;
}
.left{
padding:10px;
flex:1;
background-color: green;
border:1px solid green;
}
.right{
padding:10px;
flex:2;
background-color: yellow;
border:1px solid green;
}
.center{
padding:10px;
width: 70%;
margin:0 1em;
background-color: red;
border:1px solid green;
}
效果：
6、column分列布局
.four_column{
padding:1em;
background-color: green;
-webkit-column-count:4;
-webkit-column-gap:1em;
-moz-column-count:4;
-moz-column-gap:1em;
column-count:4;
column-gap:1em;
}
效果：