静态css网页制作
静态CSS网页制作方法
准备工作 确保具备基础的HTML和CSS知识，文本编辑器（如VS Code、Sublime Text）以及浏览器（如Chrome、Firefox）。
创建HTML文件
新建一个index.html文件，编写基本HTML结构。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<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>
<header>
<h1>欢迎来到静态网页</h1>
</header>
<main>
<p>这是一个使用CSS美化的静态网页示例。</p>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>创建CSS文件
新建styles.css文件，编写样式规则。示例代码如下：
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
}
header {
background: #35424a;
color: white;
padding: 20px 0;
text-align: center;
}
main {
padding: 20px;
}
footer {
background: #35424a;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}响应式设计 添加媒体查询以适应不同设备屏幕尺寸。在CSS文件中补充：
@media (max-width: 768px) {
header h1 {
font-size: 24px;
}
main {
padding: 10px;
}
}优化与测试
- 使用CSS重置（如Normalize.css）确保跨浏览器一致性
- 验证HTML和CSS代码（通过W3C验证器）
- 在不同设备和浏览器上测试显示效果
部署静态网页 将HTML、CSS文件及资源（如图片）上传至静态网站托管服务（如GitHub Pages、Netlify或Vercel）。
