close
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%;
}
全站熱搜
留言列表