主要是利用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 }

标签: HTML, CSS

已有 6 条评论

  1. Prism Prism

    还是喜欢用绝对定位...

    回复
    1. 野草 野草

      都有优缺吧

      回复
  2. 刘印博客 刘印博客

    打算写主题啊。

    回复
    1. 野草 野草

      想过，不过不是现在，基础差呀，再学一段时间吧

      回复
  3. 莆田SEO 莆田SEO

    过来学习...

    回复
    1. 野草 野草

      客气了~

      回复

添加新评论