如图所示。想做一个这样的首页，HTML+CSS，怎么写呢？

首先 先实现，需要 两个文件。

第一个：html

第二个：div+CSS

HTML 代码如下：

<div class="divmain">

  <div class="left">

  <div class="lef_top mar10">

   

  </div>

       <div class="lef_mid mar10">

      <div class="lef_mid_main1">

       

  </div>

           <div class="lef_mid_main2">

         

  </div>

  </div>

     

       <div class="lef_btm ">

      <div class="lef_btm_main1">

       

  </div>

           <div class="lef_btm_main2">

         

  </div>

  </div>

   

  </div>

   <div class="right">

    <div class="rig_top mar10">

  </div>

      <div class="rig_btm">

  </div>

  </div>

</div>

CSS 文件如下：

.mar10{ margin-bottom:10px}

.divmain{margin-left:automargin-right:autowidth:950px}

.left{float:leftwidth:600pxmargin-right:10px}

.left .lef_top{height:200pxbackground:#9C3}

.left .lef_mid{height:50px}

.left .lef_mid .lef_mid_main1{float:leftwidth:300pxheight:50pxbackground:#06F}

.left .lef_mid .lef_mid_main2{float:leftwidth:300pxheight:50pxbackground:#63F}

.left .lef_btm{height:50px}

.left .lef_btm .lef_btm_main1{float:leftwidth:300pxheight:50pxbackground:#C03}

.left .lef_btm .lef_btm_main2{float:leftwidth:300pxheight:50pxbackground:#FC0}

.right{float:leftwidth:340px}

.right .rig_top{height:260pxbackground:#FC9}

.right .rig_btm{height:50pxbackground:#F9F}

下面是运行出来的效果

html全屏做图片。可以用一个div全屏，然后浮动到最上层。滚动条滚动显示主页，可以用scroll滚动条滚动事件。

$(body).scroll()//这个代码表示监听body的scroll事件。

---