网页制作通用css
网页制作中，通用的CSS样式可以帮助快速构建一致且响应式的布局。以下是一些常用的CSS代码片段和最佳实践：
基础重置与标准化
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}这段代码重置了默认的边距和内边距，并确保所有元素的盒模型为border-box，便于尺寸计算。
响应式布局
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
@media (max-width: 768px) {
.container {
padding: 0 10px;
}
}使用max-width限制容器宽度，并通过媒体查询调整小屏幕下的内边距。
字体与排版
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
font-weight: 700;
line-height: 1.2;
}
p {
margin-bottom: 1rem;
}
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}设置标题和段落的间距、字体粗细，并定义链接的悬停效果。
按钮样式
.btn {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #0066cc;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0052a3;
}创建可重用的按钮样式，包含悬停动画效果。
Flexbox布局
.flex {
display: flex;
}
.flex-center {
justify-content: center;
align-items: center;
}
.flex-between {
justify-content: space-between;
}提供常用的Flexbox工具类，便于快速实现水平居中或等间距布局。
网格布局
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}创建响应式网格布局，自动调整列数并保持均匀间距。
表单元素
input, textarea, select {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 1rem;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #0066cc;
}统一表单元素的样式，并添加聚焦状态的高亮效果。
辅助类
.text-center {
text-align: center;
}
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.p-1 { padding: 1rem; }提供常用的间距和文本对齐工具类，便于快速调整布局。
这些通用CSS样式可以显著提高开发效率，同时保持网站的一致性和响应性。根据项目需求，可以进一步扩展或修改这些样式。
