HTML/CSS学习笔记：列表、表格与CSS3高级技巧

"HTML-列表和表格，2D3D动画" 在HTML中，列表和表格是两种非常重要的布局和展示数据的方式。列表分为无序列表（`<ul>`）和有序列表（`<ol>`），它们都由一系列的列表项（`<li>`）组成。在样式化列表时，我们可以使用CSS来改变列表的外观。以下是关于列表样式的几个关键属性： 1. `list-style-type`：这个属性允许我们改变列表项前面的符号，例如设置为`disc`（默认的实心圆点）、`circle`（空心圆圈）、`decimal`（数字）、`roman`（罗马数字）或`alpha`（字母）等。 2. `list-style-image`：如果我们想用自定义的图像替换默认的列表符号，可以通过这个属性设置图像URL。这样设置后，`list-style-type`的设置将失效。 3. `list-style-position`：此属性决定列表符号是在`li`元素内部（`inside`）还是外部（`outside`）显示。默认值是`outside`。 4. `list-style`：这是一个复合属性，可以一次性设置上述三个属性的值，简化代码。 表格样式主要关注整个表格的外观，而不是单个单元格。以下是一些关键的表格样式属性： 1. `border-collapse`：此属性决定表格单元格的边框是否合并。`separate`表示边框分开，而`collapse`表示边框合并，产生单一的边框。 2. `border-spacing`：当`border-collapse`设置为`separate`时，`border-spacing`用于定义单元格之间的间距。可以设置水平和垂直间距，单位通常是像素。 3. `caption-side`：这个属性控制表格标题（`<caption>`元素）的位置，可以设置为`top`（顶部）、`bottom`（底部），甚至`left`或`right`（尽管这些可能不常用）。 接下来，我们转向CSS3的高级特性，特别是关于盒子模型的新特性： 1. 盒子阴影（`box-shadow`）：这个属性添加阴影效果到元素的盒子。它接受多个值，如`box-shadow: h-offset v-offset blur spread color inset;`。其中，`h-offset`和`v-offset`指水平和垂直偏移，`blur`是模糊半径，`spread`是阴影的扩展距离，`color`是阴影颜色，`inset`则表示内阴影。 2. 圆角边框（`border-radius`）：这个属性允许我们将元素的边框设置为圆角。语法如`border-radius: horiz-radius[ / vert-radius]`，可以单独设置每个角的圆角半径，或者仅设置一个通用半径。如果不指定垂直半径，它将与水平半径相同。 这些CSS3特性极大地增强了网页的视觉效果和用户体验，使开发者能够创建更精致、更具吸引力的页面布局和交互设计。2D和3D动画也是CSS3的一大亮点，允许开发者通过`transform`和`animation`属性实现动态效果，如旋转、缩放、平移等，进一步提升网页的互动性和视觉吸引力。不过，这部分内容在提供的摘要信息中没有详细展开。