列表
CSS 中 可以通过 list-style-type
list-style-image
list-style-position
等属性优化列表样式。
列表类型
定义列表的类型,包括无序列表、有序列表和定义列表。none
不显示、disc
圆点、circle
圆圈、square
正方形、decimal
数字、lower-alpha
小写字母、upper-alpha
大写字母、decimal-leading-zero
数字前加0、lower-roman
小写罗马数字、upper-roman
大写罗马数字等。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| .ul-none{ list-style-type: none; } .ul-disc{ list-style-type: disc; } .ul-circle{ list-style-type: circle; } .ul-square{ list-style-type: square; } .ul-decimal{ list-style-type: decimal; } .ul-lower-alpha{ list-style-type: lower-alpha; } .ul-upper-alpha{ list-style-type: upper-alpha; } .ul-decimal-leading-zero{ list-style-type: decimal-leading-zero; } .ul-lower-roman{ list-style-type: lower-roman; } .ul-upper-roman{ list-style-type: upper-roman; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <ul class="ul-none"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-disc"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-circle"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-square"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-decimal"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-lower-alpha"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-upper-roman"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-decimal-leading-zero"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-lower-roman"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul> <ul class="ul-upper-roman"> <li>列表类型演示</li> <li>列表类型演示</li> <li>列表类型演示</li> </ul>
|
效果:
列表标记
设置列表项的标记位置(内部或外部)。inside
内部、outside
外部
示例:
1 2 3 4 5 6 7 8 9
| .ul-inside{ list-style-position: inside; } .ul-outside{ list-style-position: outside; } li{ background-color: aquamarine; }
|
1 2 3 4 5 6 7 8 9 10
| <ul class="ul-inside"> <li>列表标记演示</li> <li>列表标记演示</li> <li>列表标记演示</li> </ul> <ul class="ul-outside"> <li>列表标记演示</li> <li>列表标记演示</li> <li>列表标记演示</li> </ul>
|
效果:
列表图像
设置列表标记的图像,可以设置为图像的 URL 地址。
示例:
1 2 3 4 5 6 7 8 9
| .ul-image1{ list-style-image: url("li1.png"); } .ul-image2{ list-style-image: url("li2.png"); } .ul-image3{ list-style-image: url("li3.png"); }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <ul class="ul-image1"> <li>列表标记演示</li> <li>列表标记演示</li> <li>列表标记演示</li> </ul> <ul class="ul-image2"> <li>列表标记演示</li> <li>列表标记演示</li> <li>列表标记演示</li> </ul> <ul class="ul-image3"> <li>列表标记演示</li> <li>列表标记演示</li> <li>列表标记演示</li> </ul>
|
效果:
通过ul设置的大小可能会导致图像拉伸或压缩,因此最好使用编辑工具设置好图像的原始大小。如需在不改变图像本身的前提下,调整图像在列表项中的显示大小,可以使用li
的 background-image
(背景图片)灵活控制列表图像。
示例:
1 2 3 4 5 6 7 8
| li{ list-style-type: none; background-image: url("li1.png"); background-size: 10px 10px; background-repeat: no-repeat; background-position: 2px center; padding-left: 20px; }
|
1 2 3 4 5
| <ul> <li>列表标记演示</li> <li>列表标记演示</li> <li>列表标记演示</li> </ul>
|
效果:
简写方式:list-style
属性用于同时设置列表项标记的三个样式属性:list-style-type
、list-style-position
和 list-style-image
。可以缺少值,但顺序不能变。
示例:
1 2 3
| ul{ list-style: square inside url('li1.png'); }
|
表格
CSS 中 可以通过 border
等多个属性来控制表格的外观和布局。
border
定义表格的边框,可以设置边框的宽度、颜色和样式。
示例:
1 2 3
| table { border: 1px solid red; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <table> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table>
|
效果:
th
td
在 CSS 中,th
、td
可以控制表格的表头、表格行和表格数据单元格的样式。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| table { border: 1px solid red; } th { background-color: #d6d7d8; color: #333; font-weight: bold; padding: 10px; text-align: center; } td { border: 1px solid green; padding: 8px; text-align: center; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <table> <tr> <th>表格演示1</th> <th>表格演示2</th> <th>表格演示3</th> <th>表格演示4</th> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table>
|
效果:
border-collapse
用于控制表格相邻边框合并方式的属性。
- separate:不合并边框,表格的边框会保持独立。
- collapse:合并边框,表格的边框会合并在一起。
示例:
1 2 3 4 5 6 7 8
| .table1 { border: 2px solid red; border-collapse: separate; } .table2 { border: 2px solid red; border-collapse: collapse; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <table class="table1"> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table> <table class="table2"> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table>
|
效果:
border-spacing
定义表格的边框间距,可以设置边框之间的间距。
示例:
1 2 3 4
| table { border: 1px solid red; border-spacing: 10px; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <table> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table>
|
效果:
table-layout
定义表格的布局方式。
- auto:自动布局,表格的宽度和高度由内容决定。
- fixed:固定布局,表格的宽度和高度由指定的值决定。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13
| .table1 { border: 1px solid red; table-layout: auto; width: 100%; } .table2 { border: 1px solid red; table-layout: fixed; width: 100%; } th, td { border: 1px solid red; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| <table class="table1"> <tr> <td>表格演示1表格演示1表格演示1表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table> <br> <table class="table2"> <tr> <td>表格演示1表格演示1表格演示1表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table>
|
效果:
caption-side
定义表头的位置,可以设置以下值
top
:表头在表格的顶部。
bottom
:表头在表格的底部。
示例:
1 2 3 4 5 6 7 8
| .table1 { border: 1px solid red; caption-side: top; } .table2 { border: 1px solid red; caption-side: bottom; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| <table class="table1"> <caption>表头演示ABC123</caption> <tr> <td>表格演示1表格演示1表格演示1表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table> <br> <table class="table2"> <caption>表头演示ABC123</caption> <tr> <td>表格演示1表格演示1表格演示1表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> <tr> <td>表格演示1</td> <td>表格演示2</td> <td>表格演示3</td> <td>表格演示4</td> </tr> </table>
|
效果: