| <body> I like apples and oranges. I also like: <ol> <li>bananas</li> <li value="4">mangoes</li> <li>cherries</li> <li value="7">plums</li> <li>peaches</li> <li>grapes</li> </ol> You can see other fruits I like <a href="fruitlisthtml">here</a> </body> |
描述列表
定义说明列表需要用到三个元素：dl、dt和dd元素，这些元素没有局部属性：
1）dl：表示说明列表；
2）dt：表示说明列表中的术语；
3）dd：表示说明列表中的定义。
| <body> I like apples and oranges. I also like: <dl> <dt>Apple</dt> <dd>The apple is the pomaceous fruit of the apple tree</dd> <dd><i>Malus domestica</i></dd> <dt>Banana</dt> <dd>The banana is the parthenocarpic fruit of the banana tree</dd> <dd><i>Musa acuminata</i></dd> <dt>Cherry</dt> <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd> </dl> You can see other fruits I like <a href="fruitlist.html">here</a>. </body> |
自定义列表
HTML中的ul元素结合CSS中的counter特性和:before选择器，可以生成复杂的列表。下面是一个例子：
| <head> ...... <style> body{ counter-reset: OuterItemCount 5 InnerItemCount; } #outerlist > li:before { content: counter(OuterItemCount)". "; counter-increment: OuterItemCount 2; } ulinnerlist > li:before { content: counter(InnerItemCount, lower-alpha) ". "; counter-increment: InnerItemCount; } </style> </head> <body> I like apples and oranges. I also like: <ul id="outerlist" style="list-style-type: none"> <li>bananas</li> <li>mangoes, including:</li> <ul class="innerlist"> <li>Haden mangoes</li> <li>Keitt mangoes</li> <li>Kent mangoes</li> </ul> <li>cherries</li> <li>plums, including: <ul class="innerlist"> <li>Elephant Heart plums</li> <li>Stanley plums</li> <li>Seneca plums</li> </ul> </li> <li>peaches</li> <li>grapes</li> </ul> You can see other fruits I like <a href="fruitlist.html">here</a>. </body> |
