网页制作CSS模板

CSS模板的基本结构

CSS模板通常包含全局样式、布局、组件样式等模块。以下是一个基础模板框架：

/* 全局样式 */  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  font-family: 'Arial', sans-serif;  
}  

body {  
  line-height: 1.6;  
  color: #333;  
  background: #f4f4f4;  
}  

/* 布局容器 */  
.container {  
  width: 90%;  
  max-width: 1200px;  
  margin: 0 auto;  
}  

/* 按钮样式 */  
.btn {  
  display: inline-block;  
  padding: 10px 20px;  
  background: #007bff;  
  color: white;  
  border: none;  
  border-radius: 5px;  
  cursor: pointer;  
}  

/* 响应式设计 */  
@media (max-width: 768px) {  
  .container {  
    width: 95%;  
  }  
}  

常用CSS模板资源

1. Bootstrap
   提供预定义的响应式网格、按钮、表单等组件，可直接通过类名调用。

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

2. Tailwind CSS
   实用工具优先的框架，通过组合类名快速构建界面。

   

   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

3. Pure.css
   轻量级模块化框架，适合小型项目。

   <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">

自定义CSS模板技巧

• 变量定义
  使用CSS变量统一管理颜色、间距等属性：

  

  :root {  
    --primary-color: #3498db;  
    --spacing-unit: 16px;  
  }  
  .header {  
    background: var(--primary-color);  
    padding: var(--spacing-unit);  
  }  

• Flexbox布局
  快速实现水平或垂直居中：

  .flex-container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
  }  

• 动画效果
  添加过渡或关键帧动画：

  .fade-in {  
    animation: fadeIn 0.5s ease-in;  
  }  
  @keyframes fadeIn {  
    from { opacity: 0; }  
    to { opacity: 1; }  
  }  

注意事项

• 优先使用移动端优先的响应式设计（min-width媒体查询）。
• 避免过度嵌套选择器，保持代码可维护性。
• 使用预处理器（如Sass/Less）提升开发效率。