css制作静态网页
创建HTML基础结构
使用HTML5标准文档类型声明，构建基本骨架。包含<!DOCTYPE html>、<html>、<head>和<body>标签。在<head>中需设置<meta charset="UTF-8">和<title>。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态网页标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>编写CSS样式文件
新建styles.css文件，使用选择器控制元素样式。常用选择器包括元素选择器（如body）、类选择器（如.header）和ID选择器（如#navbar）。
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
}
.header {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
#navbar {
background-color: #333;
overflow: hidden;
}布局技术选择
根据需求选择布局方案：
- Flexbox：适合一维布局，通过
display: flex实现弹性容器 - Grid：适合二维布局，通过
display: grid定义网格 - 传统布局：使用
float或position属性
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 4px;
}响应式设计实现
使用媒体查询适配不同设备尺寸，通常以移动优先原则编写CSS。
/* 移动端基础样式 */
.main-content {
padding: 15px;
}
@media (min-width: 768px) {
.main-content {
padding: 30px;
}
}视觉增强技巧
通过CSS3特性提升视觉效果：
- 过渡效果：
transition: all 0.3s ease - 动画：
@keyframes配合animation属性 - 阴影：
box-shadow: 0 2px 5px rgba(0,0,0,0.1) - 渐变背景：
background: linear-gradient(to right, #ff9966, #ff5e62)
.button {
background-color: #4CAF50;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}性能优化注意事项
- 避免过度使用通配符选择器
* - 减少CSS文件体积，删除未使用的样式
- 使用CSS压缩工具如CleanCSS
- 考虑关键CSS内联，异步加载其余样式
浏览器兼容性处理
- 使用autoprefixer添加厂商前缀
- 针对旧浏览器提供降级方案
- 测试主要浏览器包括Chrome、Firefox、Safari和Edge
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
