紧接着上面的CSS样式，这里继续介绍CSS的列表和表格样式
1.列表list
列表包括有序列表和无序列表，以下是他们所共有的样式list，主要包括标志type，位置position，图片image，以及所有的声明
| 属性 | 描述 | 用法 |
|---|---|---|
| list-style | 将所有列表属性设置在一个声明中 | circle inside url("path"); |
| list-style-image | 为列表项标志设置图片 | url("图片路径");为列表的标志设置一个图片标志 |
| list-style-position | 标志的位置 | 可以取inside和outside，表示标志在列表区域之内和之外 |
| list-style-type | 标志的类型 | 见下表 |
对于无序列表的list-style-type值
| list-style-type的值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 默认的实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
对于有序列表的list-style-type值
| decimal | 标记是数字 |
| lower-roman | 小写罗马数字（i,ii,iii,iv,v......） |
| upper-roman | 大写罗马数字（I,II,III,IV,V......） |
| lower-alpha | 小写英文字母（a,b,c,c,d......） |
| upper-alpha | 大写英文字母 (A,B,C,D......) |
| lower-Greek | 小写希腊字母（α,β,γ......） |
| lower-latin | 小写拉丁字母（a,b,c,d.....） |
| upper-latin | 大写拉丁字母（A,B,C,D.......) |
inside和outside的区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式列表和表格</title>
<style type="text/css">
.inside{
list-style-position: inside;
color:blue;
}
.outside{
list-style-position: outside;
color:blue;
}
</style>
</head>
<body>
<ul class="inside">
<li>此处为无序列表1</li>
<li>此处为无序列表2</li>
<li>此处为无序列表3</li>
</ul>
<ul class="outside">
<li>此处为无序列表1</li>
<li>此处为无序列表2</li>
<li>此处为无序列表3</li>
</ul>
</body>
</html>
下面一段代码对无序列表做一个简单的样式设置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式列表和表格</title>
<style type="text/css">
ul{
list-style-position:inside;
/*list-style-type:square;*/
list-style-image:url("images/flag.png");
color:blue;
}
</style>
</head>
<body>
<ul>
<li>此处为无序列表1</li>
<li>此处为无序列表2</li>
<li>此处为无序列表3</li>
</ul>
</body>
</html>
2.表格
表格的属性主要是宽width高height，边框border的粗细，颜色，重叠等等，在以后的盒子模型中将会详细提到.
| 属性 | 描述 | 用法 |
|---|---|---|
| width | 表格的宽度 | with：500px; |
| height | 表格的高度 | height:200px; |
| border | 边框属性 | border：1px soild #eee表示三个分量分别是粗细，实线填充，灰色 |
| border-collapse | 表格边框的坍缩 | border-collapse:collapse;表示内部的单元格边框与表格边框重叠在一起 |
| :nth-child(odd|even) | 奇偶选择器，可以设置行或列 | tr:nth-child(odd); |
下面就以上的表格进行样式设置：百年矿粗细设置为1px，实线填充，绿色，重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式列表和表格</title>
<style type="text/css">
table,td,th{
border: 1px solid #7FFF00;
border-collapse: collapse;
}
tr:nth-child(odd){
background-color: #EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<th>属性</th>
<th>描述</th>
<th>用法</th>
</tr>
<tr>
<td>width</td>
<td>表格的宽度</td>
<td>with：500px;</td>
</tr>
<tr>
<td>height</td>
<td>表格的高度</td>
<td>height:200px;</td>
</tr>
<tr>
<td>border</td>
<td>边框属性</td>
<td>border：1px soild #eee表示三个分量分别是粗细，实线填充，灰色</td>
</tr>
<tr>
<td>border-collapse</td>
<td>表格边框的坍缩</td>
<td>border-collapse:collapse;表示内部的单元格边框与表格边框重叠在一起</td>
</tr>
<tr>
<td>:nth-child(odd|even)</td>
<td>奇偶选择器，可以设置行或列</td>
<td>tr:nth-child(odd);</td>
</tr>
</table>
</body>
</html>
