css基础教程之列表和表格
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>腾讯云开发者
