無障礙網路空間服務網無障礙網路空間服務網

6.1:H106100 使用CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀

不良設計

下列例子只依靠CSS樣式表,所以當CSS樣式表無法正常顯示時,會造成文字排列錯誤,網頁將傳達不正確的資訊。

不良設計:

  <DIV class="box">
  <SPAN class="menu1">DVD出租排行榜</SPAN>
  <SPAN class="menu2">VCD出租排行榜</SPAN>
  <SPAN class="item1">綠巨人浩克</SPAN>
  <SPAN class="item2">魔鬼終結者3</SPAN>
  <SPAN class="item3">王牌天神</SPAN>
  <SPAN class="item4">海底總動員</SPAN>
  <SPAN class="item5">霹靂嬌娃2</SPAN>
  <SPAN class="item6">綠巨人浩克</SPAN>
  </DIV>
          

正確示範

配合使用DL、DT、DD標籤,可以避免CSS樣式表無法正常顯示時,內容依然可以依正確的排版方式顯示,如下:

正確範例:

  <DIV class="box">
  <DL>
  <DT class="menu1">DVD出租排行榜</DT>
  <DD class="item1">綠巨人浩克</DD>
  <DD class="item2">魔鬼終結者3</DD>
  <DD class="item3">王牌天神</DD>
  <DT class="menu2">VCD出租排行榜</DT>
  <DD class="item4">海底總動員</DD>
  <DD class="item5">霹靂嬌娃2</DD>
  <DD class="item6">綠巨人浩克</DD>
 </DL>
  </DIV>
          
網頁內容結束分隔線