1NetMedia_Blog

<< 《政治经济学》复习纲要  类别: Html JS对联广告又一例 >>
CSS 来改变列表前的标识
[ 日期: 2006-11-14 10:10:41 PM | 作者: admin | 来源: 本站整理 | 人气:62642 | 晴天 | 心情: +2 ] 字号: 【
急速栏目链接:
标签:
我们知道有两种列表:有序和无序。

有序列表用阿拉伯数字为标识, 无序列表用黑色小圆圈来做标识。

用 CSS 的 list-style-type 这两种列表的标识都可以有四种选择:
无序: disc, circle, square, decimal
有序: upper-roman, lower-roman, upper-alpha, lower-alpha.

假如你想叫有序列表的标识为大小罗马字母

LI.upperroman {list-style-type: upper-roman}


请看下面的比较 ---->>

排序列表示例


<html>
<body>

<h4>一个排序列表(Ordered List):</h4>
<ol>
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ol>

</body>
</html>
不排序列表示例


<html>
<body>

<h4>不排序列表(Unordered List):</h4>
<ul>
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ul>

</body>
</html>
定义列表示例


<html>
<body>

<h4>定义列表(Definition List):</h4>
<dl>
<dt>野生动物</dt>
<dd>所有非经人工饲养而生活于自然环境下的各种动物。</dd>
<dt>宠物</dt>
<dd>指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物,又称作同伴动物。</dd>
</dl>

</body>
</html>
不同类型(Type)的排序列表


<html>
<body>
<h4>排序列表,不设Type属性:</h4>
<ol>
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ol>

<h4>排序列表,Type属性设为A:</h4>
<ol type="A">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ol>

<h4>排序列表,Type属性设为a:</h4>
<ol type="a">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ol>

<h4>排序列表,Type属性设为I:</h4>
<ol type="I">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ol>

<h4>排序列表,Type属性设为i:</h4>
<ol type="i">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ol>

</body>
</html>
不同类型(Type)的不排序列表


<html>
<body>
<h4>Type设为disc的列表,列表项前面的符号是圆黑点:</h4>
<ul type="disc">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ul>

<h4>Type设为circle的列表,列表项前面的符号是空心圆:</h4>
<ul type="circle">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ul>

<h4>Type设为square的列表,列表项前面的符号是黑方块:</h4>
<ul type="square">
<li>布啦布啦之网页课程</li>
<li>布啦布啦之网页代码</li>
<li>布啦布啦之魔兽世界</li>
</ul>

</body>
</html>
嵌套的列表


<html>
<body>

<h4>嵌套一层的列表:</h4>
<ul>
<li>肉类</li>
<li>蔬菜
<ul>
<li>番茄</li>
<li>青菜</li>
</ul>
</li>
<li>酒类</li>
</ul>


<h4>嵌套2层的列表:</h4>
<ul>
<li>动物
<ul>
<li>两栖动物</li>
<li>哺乳动物
<ul>
<li>人</li>
<li>猩猩</li>
</ul>
</li>
<li>鱼类</li>
</ul>
</li>
<li>植物</li>
</ul>
</body>
</html>

   
Rss Comment  

没有相关评论

发表评论
请先注册,才能发表评论!
- 注册 -