由CSS控制的自由布局

<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值