html css制作静态网页
HTML 和 CSS 制作静态网页
创建基本 HTML 结构
使用 HTML 定义网页的结构和内容。以下是一个基本的 HTML 模板：
<!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>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>内容标题</h2>
<p>这里是网页的主要内容。</p>
</section>
</main>
<footer>
<p>版权信息 © 2023</p>
</footer>
</body>
</html>添加 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: #f4f4f4;
}
header {
background: #35424a;
color: #ffffff;
padding: 1rem 0;
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav a {
color: #ffffff;
text-decoration: none;
}
main {
padding: 2rem;
}
footer {
text-align: center;
padding: 1rem;
background: #35424a;
color: #ffffff;
}响应式设计
添加媒体查询使网页适应不同设备：
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
nav ul li {
margin: 0.5rem 0;
}
}添加交互效果
使用 CSS 伪类为链接添加悬停效果：
nav a:hover {
color: #ff9900;
text-decoration: underline;
}优化图片显示
为网页中的图片添加样式：
img {
max-width: 100%;
height: auto;
display: block;
margin: 1rem auto;
}文件组织
建议的文件结构：
project/
├── index.html
├── styles.css
└── images/
└── logo.png浏览器兼容性
确保在主流浏览器中测试网页，必要时添加浏览器前缀：
.example {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}部署静态网页
完成开发后，可以通过以下方式部署：
- 使用 GitHub Pages
- 上传到虚拟主机
- 使用 Netlify 或 Vercel 等静态网站托管服务
