1. 列表
无序列表
ul.disc {list-style-type: disc} #实心圆
ul.circle {list-style-type: circle} #空心圆
ul.square {list-style-type: square} #方框
ul.none {list-style-type: none} #无标识
有序列表
ol.decimal {list-style-type: decimal} #数字
ul.decimal-leading-zero {list-style-type: decimal-leading-zero} #带零的数字
ol.lroman {list-style-type: lower-roman} #小写罗马数字
ol.uroman {list-style-type: upper-roman} #大写罗马数字
ol.lalpha {list-style-type: lower-alpha} #小写英语字母
ol.ualpha {list-style-type: upper-alpha} #大写英语字母
ul.lower-greek {list-style-type: lower-greek} #希腊字母
ul.cjk-ideographic {list-style-type: cjk-ideographic} #中文数字
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
2. 表格
表格边框 border
table, th, td { border: 1px solid blue; }
折叠边框 border-collapse
是否将表格边框折叠为单一边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度:width 和 height
table
{
width:100%;
}
th
{
height:50px;
}
表格文本对齐:text-align 和 vertical-align
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
td{ text-align:right; }
td { height:50px; vertical-align:bottom; }
表格内边距:padding 表格中内容与边框的距离
td { padding:15px; }
padding:3px 7px 2px 147px; #分别是距离上、右、下、左边距
表格颜色:
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
是否显示表格中中空单元
empty-cells: hide;
边框之间的距离
border-spacing: 10px 50px #一个是上下，另一个是左右
表格标题
caption{caption-side:bottom} #位于表格下方
