HTML--CSS--边框、列表、表格样式
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置边框样式 */
.border-style {
border: 2px solid #000000; /* 2px宽的实线黑色边框 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
}
/* 设置列表样式 */
.list-style {
list-style-type: square; /* 列表项前的标记为方块 */
padding-left: 20px; /* 左内边距 */
}
/* 设置表格样式 */
.table-style {
width: 100%; /* 表格宽度 */
border-collapse: collapse; /* 边框合并 */
text-align: left; /* 文本对齐方式 */
}
.table-style th, .table-style td {
border: 1px solid #dddddd; /* 单元格边框 */
padding: 8px; /* 单元格内边距 */
}
.table-style tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景色 */
}
</style>
</head>
<body>
<div class="border-style">
这是带有边框的div元素。
</div>
<ul class="list-style">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<table class="table-style">
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>
</body>
</html>这段代码展示了如何使用CSS为HTML元素添加边框、列表和表格样式。.border-style类用于设置一个带有边框的div元素，.list-style类用于设置列表项前的标记以及左侧内边距，而.table-style和相关子选择器则用于创建一个具有合并边框和偶数行背景色的表格。
评论已关闭