CSS表格和列表（20160823-0023）

通过表格和列表的样式设置，让表格和列表显示更加多元化。

一、表格样式

/**************** border-collapse ****************/
table{
	/* 单元格边框独立，默认值 */
	/*border-collapse: separate;*/

	/* 单元格相邻边框被合并 */
	/*border-collapse: collapse;*/
}
/**************** border-spacing ****************/
table{
	/* border-collapse: separate;的状态下才有效，要设置间距，不能合并 */
	/*border-collapse: separate;
	border-spacing: 10px;*/
}

/**************** caption-side ****************/
table{
	/* 默认值，标题在上方 */
	/*caption-side: top;*/

	/* 设置标题在下方 */
	/*caption-side: bottom;*/

	/* 不能设置为左右 */
}
/**************** empty-cells ****************/
table{
	/* 设置 border-spacing 让显示比较明显 */
	/*border-spacing: 10px;*/
	/* 默认值，显示边框 */
	/*empty-cells: show;*/

	/* 不显示边框，单元格内容为空时隐藏边框 */
	/*empty-cells: hide;*/
}
/**************** table-layout ****************/
table{
	/* 给 table 设置宽度才能看到效果 */
	/*width: 300px;*/

	/* 默认值，内容过长时，拉伸整个单元格 */
	/*table-layout: auto;*/

	/* 内容过长时，不拉伸整个单元格，但高度有变化 */
	/*table-layout: fixed;*/
}

1、list-style-type

/**************** list-style-type ****************/
ul{
	/* none 没有标记，将默认的标记去掉 */
	/*list-style-type:none; */

	/* disc 实心圆，默认标记 */
	/*list-style-type:disc; */

	/* circle 空心圆 */
	/*list-style-type:circle; */

	/* square 实心方块 */
	/*list-style-type:square; */

	/* decimal 阿拉伯数字 */
	/*list-style-type:decimal; */

	/* lower-roman 小写罗马数字 */
	/*list-style-type:lower-roman; */

	/* upper-roman 大写罗马数字 */
	/*list-style-type:upper-roman; */

	/* lower-alpha 小写英文字母 */
	/*list-style-type:lower-alpha; */

	/* upper-alpha 大写英文字母 */
	/*list-style-type:upper-alpha; */

	/* 提示：上边的标记类型，是 CSS1 版本的。CSS2 版本还包含比如日文、希腊文等前缀 */
}

/**************** list-style-position ****************/
ul{
	/* 设置宽度，方便观察 */
	/*width: 100px;*/

	/* outside，默认值，标记位于内容框外部 */
	/*list-style-position:outside; */

	/* inside，标记位于内容框内部 */
	/*list-style-position:inside;*/
}

/**************** list-style-image ****************/
ul{
	/* 使用图片作为前缀的标记 */
	/*list-style-image: url(../img/point.png);*/
}
/**************** list-style ****************/
ul{
	/*list-style: upper-roman inside url(../img/point.png);*/
}

1、在

• 第一项
• 第二项，这一项变得好长啦，用于测试。
• 第三项
• 第四项
• 第五项

这是一个段落12有下标

这是一个段落12有上标

这个是个句子

示例代码地址

table{
	/* 设置宽高，用于观察垂直对齐方式 */
	width: 300px;
	height: 200px;
}

table tr th,table tr td{
	/* 将单元格的内容对象与基线对齐 */
	/*vertical-align: baseline;*/

	/* 将单元格的内容对象与顶部对齐 */
	/*vertical-align: top;*/

	/* 将单元格的内容对象与中部对齐 */
	/*vertical-align: middle;*/

	/* 将单元格的内容对象与底部对齐 */
	/*vertical-align: bottom;*/
}

/* 文本上下标设置 */
strong{
	vertical-align: sub;
}
b{
	vertical-align: super;
}

/* 对 vertical-align 设置值 */
#a{
	/*width: 100%;
	height: 300px;
	border:solid 1px black;
	text-align: center;*/
}
#a span{
	/* 直接设置属性值没用 */
	/*vertical-align: middle;*/

	/* 负值往下，正值往上。如果默认基线在上面，用负数，如果默认基线在下面，用正数 */
	/* 直接设置正数也没用，因为此时基线在上面 */
	/*vertical-align: 100px;*/
	
	/*vertical-align: -100px;*/
}
#b{
	/* 上移。基线在下面，用正数 */
	vertical-align: 50px;
}