main { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 14px; } main h2 { line-height: 3em; color: #eee; } main table { width: calc(100% - 20px); } main table th { background-color: hsl(224, 97%, 74%); } main table td { background-color: hsla(0, 0%, 100%, .8); } main table th, main table td { line-height: 3em; padding: 0 12px 0 12px; } main table th:nth-child(1), main table td:nth-child(1) { width: 80px; text-align: center; } main table td:nth-child(3), main table td:nth-child(4), main table td:nth-child(5), main table td:nth-child(6) { width: 180px; }
时间: 2024-04-04 19:32:44 浏览: 51
使用text-align:justify实现两端对齐一例
这是一个CSS样式代码块,用于设置一个网页中的 "main" 元素及其内部的子元素的样式。
具体来说,这个代码块包括以下内容:
1. `display: flex;` 将 "main" 元素设置为弹性布局容器。
2. `flex-direction: column;` 将弹性容器的主轴方向设置为垂直方向。
3. `align-items: center;` 将弹性容器的子元素在交叉轴上居中对齐。
4. `justify-content: flex-start;` 将弹性容器的子元素在主轴上顶部对齐。
5. `padding: 14px;` 设置 "main" 元素的内边距为14像素。
接下来,这个代码块针对 "main" 元素内部的不同子元素进行了不同的样式设置:
1. `main h2` 将所有 "main" 元素内的 h2 标签的行高设置为3em,并将文字颜色设置为 #eee。
2. `main table` 将所有的表格元素的宽度设置为 "100% - 20px",其中 "calc" 函数用于计算表格的实际宽度。
3. `main table th` 将表格的表头单元格的背景颜色设置为 "hsl(224, 97%, 74%)"。
4. `main table td` 将表格的数据单元格的背景颜色设置为 "hsla(0, 0%, 100%, .8)",即带有一定的透明度。
5. `main table th, main table td` 将表格的所有单元格的行高设置为3em,并设置单元格的内边距为12px。
6. `main table th:nth-child(1), main table td:nth-child(1)` 将表格的第一列单元格的宽度设置为80px,并将其内容居中对齐。
7. `main table td:nth-child(3), main table td:nth-child(4), main table td:nth-child(5), main table td:nth-child(6)` 将表格的第三列至第六列单元格的宽度设置为180px。
阅读全文