html css制作静态网页
HTML与CSS制作静态网页的基本方法
构建HTML结构
HTML是网页的骨架，通过标签定义内容结构。基本框架如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>页眉内容</header>
<nav>导航栏</nav>
<main>主体内容</main>
<footer>页脚信息</footer>
</body>
</html>CSS样式设计
CSS控制网页的视觉表现，常用方法包括：
- 选择器：通过类（
.class）、ID（#id）或标签名（如h1）定位元素。 - 盒模型：设置
margin、padding、border调整元素间距和边框。 - 布局：使用
flexbox或grid实现响应式排版。
/* 示例：导航栏样式 */
nav {
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 15px;
}响应式设计
通过媒体查询适配不同设备屏幕：
@media (max-width: 600px) {
body {
font-size: 14px;
}
nav {
flex-direction: column;
}
}资源优化
- 压缩图片（如使用WebP格式）。
- 合并CSS文件减少HTTP请求。
- 使用CDN加载公共库（如Google Fonts）。
调试工具
浏览器开发者工具（F12）可实时检查元素、修改CSS并预览效果，辅助排查布局问题。
静态网页部署步骤
- 将HTML、CSS及资源文件上传至服务器或托管平台（如GitHub Pages、Netlify）。
- 确保文件路径正确，例如CSS文件链接需与实际路径匹配。
- 通过域名访问测试，检查跨设备兼容性。
通过以上方法，可高效创建结构清晰、样式美观的静态网页。
