Web Standards Solutions 網頁設計標準規格


再談清單


編號項目清單的標記法,哪種最好?
方法A:亂中有序
  <ul>
   <li>1.Chop the onions.</li>
   <li>2.Saute the oninos for 3 minutes.</li>
   <li>3.Add 3 cloves of garlic.</li>
   <li>4.Cook for another 3 minutes.</li>
   <li>5.Eat.</li>
  </ul>
  數字遊戲:修改數字會很冗長
  出現圓點符號:

方法B:有序清單
  <ol>
   <li>Chop the onions.</li>
   <li>Saute the oninos for 3 minutes.</li>
   <li>Add 3 cloves of garlic.</li>
   <li>Cook for another 3 minutes.</li>
   <li>Eat.</li>
  </ol>
  自動編號
  愉快的包裝者,第二部:清單項目很長在折行時,會內縮在編號後,而方法A會折到編號下
  清單種類:decimal,upper-alpha,lower-alpha,upper-roman,lower-roman,none

一群名詞與解釋的標記法,哪種最好?
方法A
  <ul>
   <li>CSS<br/>
   A simple mechanism for adding style(e.g. fonts, colors, spacing)to Web documents.</li>
   <li>XHTML<br />
   A family of current and future document types and modules that reproduec, subset and extend HTML, reformulated in XML.</li>
   <li>XML<br />
   A simple, very flexible text format derived from SGML.</li>
  </ul>

方法B
  <dl>
   <dt>CSS</dt>
   <dd>A simple mechanism for adding style(e.g. fonts, colors, spacing)to Web documents.</dd>
   <dt>XHTML<dt>
   <dd>A family of current and future document types and modules that reproduec, subset and extend HTML, reformulated in XML.</dd>
   <dt>XML<dt>
   <dd>A simple, very flexible text format derived from SGML.</dd>
  </dl>
  dt{
   font-weight: bold;
  }
  dd{
   margin-left: 15px;
   padding-left: 15px;
   color: #999;
   background: url(dd_arrow.gif) no-repeat 0 2px;
  }

更多技巧
識別每個項目
  <ol id="recipe">
   <li id="one">Chop the onions.</li>
   <li id="two">Saute the oninos for 3 minutes.</li>
   <li id="three">Add 3 cloves of garlic.</li>
   <li id="four">Cook for another 3 minutes.</li>
   <li id="five">Eat.</li>
  </ol>
自訂數字
  #recipe{
   list-style-type: none;
  }
把數字加到CSS裡
  #recipe li{
   padding: 10px 50px;
   margin-bottom: 6px;
   border-bottom: 1px solid #ccc;
  }
  #one{
   background: url(ol_1.gif) no-repeat 6px 50%;
  }
  #two{
   background: url(ol_2.gif) no-repeat 2px 50%;
  }
  #three{
   background: url(ol_3.gif) no-repeat 3px 50%;
  }
  #four{
   background: url(ol_4.gif) no-repeat 0px 50%;
  }
  #five{
   background: url(ol_5.gif) no-repeat 6px 50%;
  }

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()