由CSS控制的自由布局

来源：互联网发布：卧虎藏龙罗小虎知乎编辑：程序博客网时间：2024/06/06 07:05

<html>
<head>
    <title>freelayout.html</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  text-align:center;
  padding:10px;
}
#wrapper{
  width:100%;
  margin:0 auto;
  text-align:left;
  background:#efefef url(image/fside.jpg) repeat-y 70% 0;
}
#header{
  height:120px;
  background-color:#26efef;
}
#main{/*注意这里，因为使用多加一层窗口的方式，这个元素暂时已经没有作用了*/}
#content{
  float:left;
  width:70%;
  background-color:#efef9a;/*为了更容易看出问题，我给添加了背景*/
}
#sidebar{
  float:right;
  width:30%;
  background-color:#8faebe;
}
#footer{
  clear:left;
  height:80px;
  background-color:#688b9a;
}
#innerHeader,#innerContent,#innerSidebar,#innerFooter{
  padding:10px;
}

</style>
</head>

<body>

    <div id="wrapper">
    <div id="header">
      <div id="innerHeader">页头部分</div>
    </div>
    <div id="main">
      <div id="content">
       <div id="innerContent">主体的内容部分</div>
      </div>
      <div id="sidebar">
       <div id="innerSidebar">主体的侧栏部分</div>
      </div>
    </div>
    <div id="footer">
      <div id="innerFooter">页底部分 </div>
    </div>
    </div>
</body>
</html>