HTML+CSS浮动两栏或三栏布局

作者: admin

时间: 2012-04-23

主要是利用CSS里的“float”浮动样式，属性“left”向左浮动，“right”向右浮动。挺简单的，用这个样式还得学会清除浮动，网上搜搜吧。HTML+CSS两栏或三栏布局代码如下：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML+CSS两栏布局</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<div id="header">
    <h1>头部信息</h1>
</div>

<div id="container">

     <div class="mainBox">内容区域</div>   

     <div class="sideBox">边栏区域</div>
</div>

<div id="footer">底部信息</div>

</body>
</html>

CSS代码：

/*全局*/
body{width:870px; 
    margin:0 auto;
    padding:0; 
    font:80%/1.7em "Trebuchet Ms",HElvetica ,Verdana,sans-serif; 
    color:#555;}
*{
    margin:0;
    padding:0;}
    
/*头部*/
#header{
    width:870px;
    height:90px;
    background-color: #777;} 
    
/*中部区域*/
#container {
    width:870px;
    height:250px;
    margin:10px 0;}

/*内容区域*/
.mainBox {
    float:left;
    width:610px;
    height:250px;
    background-color:#666;}

/*侧边栏*/
.sideBox {
    float:right;
    width:250px;
    height:250px;
    background-color:#888;}
/*底部*/
#footer {
    width:870px;
    height:30px;
    background-color:#777 }