CSS布局

来源：互联网发布：分时九转指标公式源码编辑：程序博客网时间：2024/06/18 08:31

单列布局（1-1-1布局）

框架：

<div id="header"><div class="content"></div></div><div id="content"><div class="content"></div></div><div id="pagefooter"><div class="content"></div></div>

模型图：

1-2-1固定宽度布局

框架：

<div id="header"><div class="content"></div></div><div id="container"><div class="content"></div><div class="side"></div></div><div id="pagerfooter"><div class="content"></div></div>

模型：

例：绝对定位法：

#header,#pagefooter,#container{

margin:0 auto;

width:760px;

}

#container{/*包含content和side*/

position:relative;

}

#content{

position:absolute;

top:0;

left:0;

width:500px;

}

#side{

margin:0 0 0 500px;

}

浮动法：

#content{

float:left;

width:500px;

}

#side{

float:left;

width:260px;

}

1-3-1固定宽度布局

框架：

<div id="header"><div class="content"></div></div><div id="container"><div class="left"></div><div class="content"></div><div class="side"></div></div><div id="pagerfooter"><div class="content"></div></div>

模型：

魔术布局：

原理：利用id选择器和类选择器的优先级来动态布局

<!DOCTYPE HTML ><html> <head> <style>body{background:#FFF;font:14px 宋体;margin:0px;padding:0px;}.rounded{background:url(top-left.jpg) no-repeat top left;width:100%;}.rounded h2{background:url(top-right.jpg) no-repeat top right;padding:20px 20px 10px;margin:0;}.rounded .main{/*background:url(bottom-left.jpg) no-repeat top left;*/background:yellow;padding:10px 20px;margin:-20px 0 0 0;}.rounded .footer{background:url(bottom-left.jpg) bottom left no-repeat;}.rounded .footer p{color:red;text-align:right;background:url(bottom-right.jpg) bottom right no-repeat;display:block;padding:10px 20px 20px;margin:-20px 0 0 0;font:0/0;}#header,#pagefooter,#container{margin:0 auto;width:100%;min-width:600px;max-width:800px;background:pink;}#container #content{float:left;width:600px;}#container #content #colums #col-b,#container #content #colums #col-a{float:left;width:300px;}#container .side{float:left;width:200px;}#pagefooter{clear:both;}#container #content #banner{clear:both;height:300px;background:green;} </style>  <title> 魔术布局 </title> </head> <body><div id ="header"><div class ="rounded"><h2>页头</h2><div class ="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</P></div><div class="footer"><p></P></div></div></div><div id="container"><div id ="content"><div id="colums"><div id="col-a"><div class="rounded"><h2>Colum A</h2><div class="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</p></div><div class="footer"><p></P></div></div></div><!--end of col-a --><div id="col-b"><div class="rounded"><h2>Colum B</h2><div class="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</p></div><div class="footer"><p></P></div></div></div><!--end of col -b --></div><!--end of colums--><div id ="banner"><div class="rounded"><h2>Banner</h2><div class="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</p></div><div class="footer"><p></P></div></div></div><!--end of banner--></div><!--end of content--><div class="side"><div class="rounded"><h2>Sise Bar 1</h2><div class="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</p></div><div class="footer"><p>查看详细信息>></p></div></div></div><!--end of side--><div class="side"><div class="rounded"><h2>Sise Bar 1</h2><div class="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</p></div><div class="footer"><p>查看详细信息>></p></div></div></div><!--end of side--><div class="side"><div class="rounded"><h2>Sise Bar 1</h2><div class="main"><p>远看山有色，近听水无声。</br>远看山有色，近听水无声。</p></div><div class="footer"><p>查看详细信息>></p></div></div></div><!--end of side--></div><!-- end of container--><div id ="pagefooter"><div class="rounded"><h2>页脚</h2><div class="main"><p>远看山有色，近听水无声。</p></div><div class="footer"><p></P></div></div></div><!--end of pagefooter--> </body></html>

浏览器宽度为大于800的效果；

浏览器宽度为小于800的效果；

变宽布局

1-2-1等比例变宽布局：

即设置成网页内容占浏览器宽度的85%，左边占内容的66%，右边占33%

#header,#container,#pagefooter{margin: 0 auto;width:85%;background-color: green;}#content{background: red;float: left;width:66%;}#side{background:blue;float: left;width: 33%;margin-left: 1%;}#pagefooter{clear: both;}

1-2-1单列变宽布局

将可以变宽的内容部分嵌套在一个设置其宽度为100%的div中，将右边内容设置为固定宽度，然后给左边内容设置右边边距为右边内容的宽度

#header,#container,#pagefooter{margin: 0 auto;width:85%;background-color: green;min-width: 500px;max-width: 800px;}#contentwrap{margin-left: -260px;float: left;width:100%;}#content{background: red;margin-left:260px;}#side{background:blue;float: right;width: 260px;}#pagefooter{clear: both;}

1-3-1单侧列宽度固定

将活动的两列嵌套在一个div 中，原来的wrap变成了两层，即outerwrap和innerwrap就相当于一个1-2-1的布局了

例：

布局：

<div id="container"><div id="outerwrap"><div id="innerwrap"><div id="content"><p>内容1</p></div><div id="center"><p>内容2</p></div></div></div><div id="side"><p>内容3</p></div></div>

样式：

#outerwrap{margin-left: -200px;float: left;width:100%;}#innerwrap{float:left;margin-left:200px;width:100%;}#content{float:left;background: red;width:50%;}#center{float:left;background:pink;width:49.9%;}#side{float:left;width:200px;background:blue;}

效果：

1-3-1中间列宽度固定：

左边右边分别嵌套在一个div中，左边内容设置右边界，右边内容设置左边界，两边分别设置为50%

利用margin负值实现

布局：

<div id="container"><div id="contentwrap"><div id="content"><p>内容1</p></div></div><div id="center"><p>内容2</p></div><div id="container1"><div id="side"><p>内容3</p></div></div></div>

样式：

#contentwrap{margin-right: -150px;float: left;width:50%;}#content{margin-right:150px;background: red;}#center{float:left;width:300px;background:pink;}#contentwrap1{margin-left: -150px;float: right;width:49.9%;}#side{margin-left:150px;background:blue;}

效果：

1-3-1两侧宽度固定

先将左边和中间两列看作一组活动列，而右边的一列为固定列，使用改进浮动，然后将左边和中间两列各自当成独立列，左侧作为固定列，再次使用改进浮动

利用margin负值实现

例：

布局：

<div id="container"><div id="content"><p>内容1</p></div><div id="contentwrap"><div id="center"><p>内容2</p></div></div><div id="side"><p>内容3</p></div></div>

样式：

#content{float:left;background: red;width:200px;}#contentwrap{margin-left: -260px;margin-right: -200px;float: left;width:100%;}#center{margin-left:260px;margin-right:200px;background:pink;}#side{background:blue;float: right;width: 260px;}

效果：

1-3-1中间和侧列固定

可变化宽度的侧列嵌套在一个div中，然后通过改进浮动将另外一个侧列和中间列的宽度作为嵌套div的负外边距和侧列的外边距即可

例：

布局：

<div id="container"><div id="contentwrap"><div id="content"><p>内容1</p></div></div><div id="center"><p>内容2</p></div><div id="side"><p>内容3</p></div></div>

样式：

#contentwrap{margin-left: -460px;float: left;width:100%;}#content{background: red;margin-left:460px;}#center{float:left;background:pink;width:200px;}#side{background:blue;float: right;width: 260px;}

效果：

一侧可变长

0 0