如果你真的想做一件事，你一定会找到方法；如果你不想做一件事，你一定会找到借口。

简单CSS布局留用

1、导航栏固定显示代码，文字居中，z-index

 1 header{
 2     position: fixed;
 3     top: 0px;
 4     left: 10%;
 5     width: 80%;
 6     height: 80px;
 7     border:1px solid blue;
 8     text-align: center;
 9     background-color: #ccc;
10     z-index: 2;
11 }

2、中间内容居中，上下左右留间距代码

1 .container{
2     position: relative;
3     top: 80px;
4     left: 10%;
5     width: 80%;
6     border:1px solid blue;
7     background-color: #fff;
8     margin-bottom: 50px;
9 }

3、display:inline-block控制的左右结构布局

 1 nav{  //左边侧导航
 2      width: 20%;
 3      border:1px solid red;
 4      display: inline-block;
 5 }
 6 .section_container{    //右边包含多个section的内容部分
 7     width: 75%;
 8     border:5px solid blue;    
 9     display: inline-block;
10     vertical-align: top;
11 }

 

4、与3相同效果的position：absolutely左右结构布局

 1 nav{
 2     position: absolute;
 3     width:20%;
 4     border:1px solid red;
 5 }
 6 section{   //同时控制多个section
 7     margin-left:20%;
 8     width: 80%;
 9     border:1px solid red;
10 }

5、flex的布局应用

 1 .flex{
 2     padding:10px;
 3     display: flex;
 4     flex-flow:row;
 5 }
 6 .left{
 7     padding:10px;
 8     flex:1;
 9     background-color: green;
10     border:1px solid green;
11 }
12 .right{
13     padding:10px;
14     flex:2;
15     background-color: yellow;
16     border:1px solid green;
17 }
18 .center{
19     padding:10px;
20     width: 70%;
21     margin:0 1em;
22     background-color: red;
23     border:1px solid green;
24 }

效果：

6、column分列布局

 1 .four_column{
 2     padding:1em;
 3     background-color: green;
 4     -webkit-column-count:4;
 5     -webkit-column-gap:1em;
 6     -moz-column-count:4;
 7     -moz-column-gap:1em;
 8     column-count:4;
 9     column-gap:1em;
10 }

效果：

 

posted @ 2015-05-27 16:53  wanglehui  阅读(222)  评论(0)    收藏  举报