悠悠楠杉
网站页面
css列表标签list与表格标签table详解，列表标签html
06/19
列表标签的CSS应用
- 自定义标记类型：利用CSS的
:before伪元素和content属性，可以改变列表的标记类型，比如使用图标或自定义符号。
css .custom-list { list-style-type: none; /* 移除默认标记 */ padding-left: 20px; } .custom-list li:before { content: "•"; margin-right: 10px; } /* 自定义为圆点 */ - 改变颜色和间距：通过
color和margin、padding属性调整列表的颜色和内部间距。
css .red-list { color: red; } /* 改变文字颜色 */ .spaced-list { padding: 5px 0; } /* 增加列表项之间的垂直间距 */
表格标签的CSS应用
- 边框和背景：使用
border属性为表格添加边框，并利用border-collapse属性控制边框的合并与否，以实现更紧密的视觉效果。同时，可以通过背景色（background-color）为表格或单元格设置背景色以增强可读性。
css table { border-collapse: collapse; width: 100%; } /* 合并边框并设置表格宽度 */ th, td { padding: 10px; border: 1px solid #ddd; } /* 设置单元格内边距和边框 */ - 布局调整：通过设置宽度（
width）、对齐（text-align）、垂直对齐（vertical-align）等属性，可以精细调整表格的布局。例如，为了使内容垂直居中显示，可以设置vertical-align: middle;。
css th, td { vertical-align: middle; text-align: left; } /* 垂直居中且文本左对齐 */ - 响应式设计：利用媒体查询（Media Queries）等技术可以使表格在不同设备上呈现不同的样式，增强用户体验。例如，在小屏幕设备上隐藏某些列或调整表格布局。
```css
@media (max-width: 600px) {
table { width: auto; } /* 在小屏幕上自动调整表格宽度 / td:nth-child(n) { display: none; } / 隐藏特定列 */
}
