css样式模板

/* CSS 样式模板 */

/* 1. 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. 基本样式 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* 3. 容器样式 */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

/* 4. 标题样式 */
h1, h2, h3 {
    text-align: center;
    margin-bottom: 20px;
}

/* 5. 段落样式 */
p {
    margin: 10px 0;
}

/* 6. 按钮样式 */
button {
    display: inline-block;
    padding: 10px 20px;
    background: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
}

button:hover {
    background: #0056b3;
}

/* 7. 导航栏样式 */
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

nav ul li a:hover {
    color: #007BFF;
}

/* 8. 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

解释说明

1. 重置样式：通过 * 选择器将所有元素的 margin 和 padding 设置为 0，并设置 box-sizing 为 border-box，以确保一致的盒模型行为。
2. 基本样式：为 body 设置字体、行高、背景颜色和文本颜色，确保页面有一个统一的基础样式。
3. 容器样式：定义一个 .container 类，用于创建居中的内容区域，并防止内容溢出。
4. 标题样式：为 h1, h2, h3 设置居中对齐和底部间距，使标题更加美观。
5. 段落样式：为 p 设置上下间距，使段落之间的间距适中。
6. 按钮样式：定义按钮的基本样式，包括内边距、背景色、文字颜色等，并添加悬停效果。
7. 导航栏样式：为导航栏的无序列表 (ul) 和链接 (a) 设置样式，使其水平排列并添加悬停效果。
8. 表格样式：为表格及其单元格设置边框、内边距和背景颜色，确保表格结构清晰。

这个模板涵盖了常见的 CSS 样式，适用于大多数网页设计需求。