项目清单-30天学会HTML＋CSS，制作精美网站

项目清单分为条列式清(ol)单及编号清单(ul)，两者的差别在於是否有自动排序项目的功能，<ul>是黑点符号「●」，在不同的浏览器下可能呈现不同的效果，而 <ol> 标签则具有数字排序的功能，也就是预设在每个项目前会有数字显示，从 1 开始依序排列。

通常会用在需要将条列式的内容列出来，能提高文章的易读性。

ul条列式清单

ul是「Unordered List」的缩写，意思是「没有指定顺序的清单」。li是「List Item」的缩写，意思是条列式项目。出现在网页时，出现黑点。

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

ol编号清单

ol是「Ordered List」的缩写，意思是「有确定顺序的清单」。显示在网页时，会有数字编号。

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>

type属性

• 1：默认(1, 2, 3, 4, 5)
• a：小写字母 (a, b, c, d, e)
• A：大写字母(A, B, C, D, E)
• i：小写罗马字母(i, ii, iii, iv)
• I：大写罗马字母(I, II, III, IV)

<ol type="I">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ol>
<ol type="i">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ol>
<ol type="a">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ol>
<ol type="A">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ol>
<ol type="1">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ol>

指定排序

start 指定数字排序，以下范例是以10为开始点， type不同也会有不一样符号的显示

<ol start = 10>
   <li>第一个列表项
   <li>第二个列表项
   <li>第三个列表项
</ol>

指定顺序与type一起使用，范例：

<ol type="I" start="5">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

dl dt dd自定义列表

<dl>里面包含<dt><dd>
<dt>是一个名词用语，像是标题
<dd>用来说明名词用语，可以是图片、连结、内容

<dl>
　<dt>item1</dt>
　<dd>depiction1 ...</dd>
	<dd>depiction1-1 ...</dd>
　<dt>item2</dt>
　<dd>depiction2 ...</dd>
	<dd>depiction2-1 ...</dd>
</dl>

项目列表样式

list-style-type

设定 ul li 或 ol li 的项目符号，像是无标示、空心圆圈、实心圆圈、大写英文字母、小写英文字母等，分为项目符号及编号符号

项目符号

• none：不显示
• disc：预设值，实心圆形
• circle：空心圆点
• square：实心方块

编号符号

• decimal：阿拉伯数字(1、2...)
• decimal-leading-zero：阿拉伯数字(01、02..)
• lower-alpha / upper-alpha：小写/大写英文字母(a / A)
• lower-roman / upper-roman：小写/大写罗马数字(i / I)
• lower-greek：小写希腊字母

<p>条列式:</p>
<ul class="circle">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<ul class="square">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<p>编号:</p>
<ol class="upper-roman">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>
<!-- 也能使用html指定排序start -->
<ol class="lower-alpha" start="5">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>

.circle {list-style-type:circle;}
.square {list-style-type:square;}
.upper-roman {list-style-type:upper-roman;}
.lower-alpha {list-style-type:lower-alpha;}

list-style-position

• inside:项目符号在 <li></li> 标签范围之内
• outside:项目符号在 <li></li> 标签范围之外，预设值。
  范例：circle是在项目符号内，outside是在项目符号外

<ul class="circle">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<ul class="square">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

ul{
	background-color:#efefef;
}
li{
	border:1px solid #ccc;
}
.circle {
	list-style-type:circle;
	list-style-position:inside;
}
.square {
	list-style-type:square;
	list-style-position:outside;
}

list-style-image

用图片取代list-style-type原本的项目符号

list-style-image:url(' 要显示的图片档案位置 ');

<ul class="circle">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

ul li {
    list-style-image:url('img/img.png');
}

除了使用list-style-image图片取代项目符号之外，还有以下两种方法也可以做到相同的效果，让我们来看看

方法一：使用图片<img>

先将图片插入到里面

<ul class="square">
	<li>
		<img src="img/img.png" />
		<span>item1</span>
	</li>
	<li>
		<img src="img/img.png" />
	</li>
	<li>
		<img src="img/img.png" />
		<span>item3</span>
	</li>
</ul>

之後再将项目符号点点隐藏

ul{
	list-style-type: none;
}

方法二：使用背景图

<ul class="square">
  	<li>
		<span>item1</span>
	</li>
	<li>
		<span>item2</span>
	</li>
	<li>
		<span>item3</span>
	</li>
</ul>

将项目符号隐藏，在将图片设为背景图、图片不重复、图片位置及内距padding-left，避免图片及文字重叠

li{
	list-style-type: none;
	margin:0;
	padding:0 0 0 20px;
	background-position: left center;
	background-repeat:no-repeat;
	background-image:url('img/img.png')
}

以上两种方法，呈现结果与使用list-style-image是一样的

list-style

综合所有项目清单样式，该属性值的顺序是：

list-style: list-style-type  list-style-position list-style-image

ul
{
    list-style:square url('img/img.png');
}

要制作一个画面有很多种方法，有时候可以省去写很多的code，依照自己的习惯选一种方式制作，可以提高工作效率，也可减少不必要的失误。