基本範例2

CSS(範例二)

CSS(範例二)是接續CSS(範例一)，CSS(範例二)裡給五個區塊都加上寬度及高度，(圖三)為執行後之果，由(圖三)就可以看出HTML階層性，所以我們可 以說此HTML有五個區塊(sample、sub-sample、sub-sub-sample1、sub-sub-sample2、sub-sub- sample3)、三個階層(sample為最大的階層； sub-sample為第二階層；sub-sub-sample1、sub-sub-sample2、sub-sub-sample3為第三階層)。

HTML

<div id="sample">
<span> sample</span>
<div id="sub-sample">
     <span>sub-sample</span>
      <div id="sub-sub-sample1">
         <span>sub-sub-sample1</span>
      </div>
      <div id="sub-sub-sample2">
         <span>sub-sub-sample2</span>
      </div>
      <div id="sub-sub-sample3">
         <span>sub-sub-sample3</span>
      </div>
</div>
</div>

CSS

#sample{background:#000; color:#fff; width:482px;height:388px; }
#sub-sample{background:#aaa;width:386px;height:360px; }
#sub-sub-sample1{background:#b9c4f5;width:301px;height:81px; }
#sub-sub-sample2{background:#7487c2;width:301px;height:77px; }
#sub-sub-sample3{background:#4b5986;width:301px;height:91px; }