老雷html/css开发视频教程之列表和表格
一、列表 ul ol
list-style
list-style:<' list-style-type '> || <' list-style-position '> || <' list-style-image '>
1.list-style-type 设置或检索对象的列表项所使用的预设标记
disc: 实心圆(CSS1)
circle: 空心圆(CSS1)
square: 实心方块(CSS1)
decimal: 阿拉伯数字(CSS1)
lower-latin 小写拉丁字母(CSS2)
upper-latin 大写拉丁字母(CSS2)
.circle{list-style-type:circle;}
.square{list-style-type:square;}
2.list-style-position 设置或检索作为对象的列表项标记如何根据文本排列
list-style-position:outside | inside
outside: 列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐
3.list-style-image 设置或检索作为对象的列表项标记的图像
none 不指定图像
url 使用绝对或相对地址指定列表项标记图像
.list{list-style-image:url(skin/ico.png);}
二、表格 Table
1.table-layout 设置或检索表格的布局算法。
table-layout:auto | fixed
auto: 默认的自动算法。
fixed: 固定布局的算法。
2.border-collapse 设置或检索表格的行和单元格的边是合并还是独立
border-collapse:separate | collapse
separate: 边框独立
collapse: 相邻边被合并
3.border-spacing 设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距
table{border-spacing:10px 20px;}
4.caption-side 设置或检索表格的caption对象是在表格的那一边。
caption-side:top | bottom
top: 指定caption在表格上边
bottom: 指定caption在表格下边
5.empty-cells 设置或检索当表格的单元格无内容时,是否显示该单元格的边框。
empty-cells:hide | show
hide: 指定当表格的单元格无内容时,隐藏该单元格的边框。
show: 指定当表格的单元格无内容时,显示该单元格的边框。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表和表格</title> <style> .test{list-style:upper-alpha outside none;} .ul{ list-style-type: decimal; list-style-position: inside; alist-style-image: url(../img/ico.png); } .table{ width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:10px 10px; caption-side:top; empty-cells:show; } .table caption{ margin-bottom: 5px; } .table td{ border: 1px solid #eee; padding: 5px; } </style> </head> <body> <ul class="test"> <li class="colorname">列表项一</li> <li class="colorname">列表项一</li> <li class="colorname">列表项一</li> <li class="colorname">列表项一</li> </ul> <ul class="ul"> <li class="colorname">列表项一</li> <li class="colorname">列表项一</li> <li class="colorname">列表项一</li> <li class="colorname">列表项一</li> </ul> <table class="table"> <caption>caption在顶部</caption> <tbody> <tr> <td width="200">这是某一单元格</td> <td>这是某一单元格这是某一单元格这是某一单元格这是某一单元格</td> <td>这是某一单元格</td> </tr> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> </tbody> </table> </body> </html>