首页 » CSS » css常用布局

css常用布局

原文 http://blog.csdn.net/lululul123/article/details/76168607

2017-07-27 10:20:02阅读(592)

Css布局

你了解哪些布局,你平时都使用什么布局方式:

1)两行布局(头部高度固定,尾部高度为剩余高度)

html,body{

      width:100%;

      height:100%;

      margin:0;

      padding:0;

}

#top{

      width:100%;

      height:100px;

      background:red;

}

#content{

      width:100%;

      position:absolute;

      top:100px;

      bottom:0;

}

2)双飞翼布局(左右宽度固定,中间自适应)

方法一:

html,body{

      width:100%;

      height:100%;

      margin:0;

      padding:0;

}

#left{

      width:300px;

      height:100%;

      background:red;

      position:absolute;

      left:0;

      right:0;

}

#right{

      width:100px;

      height:100%;

      background:black;

      position:absolute;

      right:0;

      top:0;

}

#content{

      height:100%;

      margin:0100px 0 300px;

      background:#fff;

}

 

方法二:

html,body{

      width:100%;

      height:100%;

      margin:0;

      padding:0;

}

#left{

      width:300px;

      height:100%;

      background:red;

      float:left;

}

#right{

      width:100px;

      height:100%;

      background:red;

      float:right;

}

#content{

      height:100%;

      margin:0100px 0 300px;

      background:pink;

}

 

3)左边固定宽度,右边自适应

方法一:

html,body{

      width:100%;

      height:100%;

      margin:0;

      padding:0;

}

#left{

      width:300px;

      height:100%;

      background:red;

      float:left;

}

#right{

      margin-left:300px;

      height:100%;

      background:red;

}

 

 

 

4)头部,尾部高度固定,中间自适应布局

方法一:

html,body{

      width:100%;

      height:100%;

      margin:0;

      padding:0;

}

#top{

      width:100%;

      height:100px;

      background:red;

}

#footer{

      width:100%;

      height:100px;

      positon:absolute;

      bottom:0;

      background:red;

}

#center{

      width:100%;

      positon:absolute;

      top:100px;

      bottom:100px;

      background:pink;

}

 

5)圣杯布局

header {

   height: 100px;

   background-color: red;

}

 

article {

   height: 400px;

   background-color: yellow;

   /*把左边和右边的位置空出来*/

   padding-left: 150px;

   padding-right: 100px;

}

 

footer {

   height: 100px;

   background-color: green;

}

 

.left {

   width: 150px;

   height: 100px;

   background-color: blue;

   float: left;

   margin-left: -100%;

   position: relative;

   left: -150px;

}

 

.right {

   width: 100px;

   height: 100px;

   background-color: #FF9800;

   float: left;

   margin-left: -100px;

   position: relative;

   right: -100px;

}

/*重要内容放置处*/

.middle {

   height: 100px;

   background-color: brown;

   float: left;

   width: 100%;

}

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹