CSS的布局

来源:转载

说到布局,无论网站多么复杂,都是以两列布局为基础。

基本的两列布局,和三列布局。三列布局只是在其中一列又分出一个两列布局。

这是基本的HTML骨架。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="header">这里是头部</div> 9 <div class="container">10 <div class="mainBox">主要内容</div>11 <div class="sideBox">侧边栏</div>12 </div>13 <div class="footer">底边栏</div>14 </body>15 </html> 以下是CSS两列固定宽高布局

1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 width:960px; 9 height:30px;10 background-color:red;11 }12 .container13 {14 width:960px;15 height:250px;16 margin:10px 0;17 }18 .mainBox19 {20 float:left;21 width:680px;22 height:250px;23 background-color:#333;24 color:#ffffff;25 }26 .sideBox27 {28 float:right;29 width:270px;30 height:250px;31 color:#ffffff;32 background-color:#999999;33 }

--------------------------------------------------------------------------------------------------------------------------------------------------------

以下是自适应高度的css布局。只是把高度值给去掉。 对container进行一次清除浮动。如果不清除浮动,与footer之间设置的间距就会失效。

1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 width:960px; 9 height:30px;10 background-color:red;11 }12 .container13 {14 width:960px;15 margin:10px 0;16 }17 .mainBox18 {19 float:left;20 width:680px;21 background-color:#333;22 color:#ffffff;23 }24 .sideBox25 {26 float:right;27 width:270px;28 color:#ffffff;29 background-color:#999999;30 }31 .container:after32 {33 display:block;34 clear:both;35 content:"";36 }/*这是清除了内容的左右浮动*/

--------------------------------------------------------------------------------------------------------------------------------------------------------

宽度自适应,统一用百分比就ok。 1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 9 height:30px;10 background-color:red;11 }12 .container13 {14 margin:10px 0;15 }16 .mainBox17 {18 float:left;19 width:70%;20 background-color:#333;21 color:#ffffff;22 }23 .sideBox24 {25 float:right;26 width:30%;27 color:#ffffff;28 background-color:#999999;29 }30 .container:after31 {32 display:block;33 clear:both;34 content:"";35 }36 .footer37 {38 clear:both;39 }/*清除浮动是为了不让footer乱跑*/

--------------------------------------------------------------------------------------------------------------------------------------------------------

两列等高布局,主要原理是负边距的应用 1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 9 height:30px;10 background-color:red;11 }12 .container13 {14 margin:10px 0;15 overflow:hidden;16 }17 .mainBox18 {19 float:left;20 width:70%;21 background-color:#333;22 color:#ffffff;23 }24 .sideBox25 {26 float:right;27 width:30%;28 color:#ffffff;29 background-color:#999999;30 }31 .mainBox,.sideBox32 {33 margin-bottom:-9999px;34 padding-bottom:9999px;35 }/*这个部分是关键点*/36 .container:after37 {38 display:block;39 clear:both;40 content:"";41 }42 .footer43 {44 clear:both;45 }

--------------------------------------------------------------------------------------------------------------------------------------------------------

也可以用js来判断高度,以此来达到两列等高的效果。



分享给朋友:
您可能感兴趣的文章:
随机阅读: