完整项目源码解析
综合运用所有 HTML5+CSS3 知识，完整拆解一个企业官网。
项目结构
company-website/
├── index.html
├── css/
│ ├── reset.css # 重置样式
│ ├── layout.css # 布局样式
│ ├── components.css # 组件样式
│ └── responsive.css # 响应式
├── js/
│ └── main.js
└── images/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="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="企业 Logo">
</div>
<nav class="main-nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/products">产品中心</a></li>
<li><a href="/news">新闻动态</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1>欢迎来到我们的网站</h1>
<p>专业的服务，优质的品质</p>
<a href="/contact" class="btn">立即咨询</a>
</div>
</section>
<section class="features">
<div class="container">
<h2>我们的优势</h2>
<div class="feature-grid">
<div class="feature-item">
<h3>专业团队</h3>
<p>多年的行业经验</p>
</div>
<div class="feature-item">
<h3>优质服务</h3>
<p>24 小时客户支持</p>
</div>
<div class="feature-item">
<h3>合理价格</h3>
<p>高性价比的选择</p>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2026 企业名称 版权所有</p>
</div>
</footer>
</body>
</html>CSS 核心代码
/* 容器 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 导航栏 - Flexbox 布局 */
.main-nav ul {
display: flex;
list-style: none;
gap: 30px;
}
/* 特性网格 - Grid 布局 */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 12px 30px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s ease;
}
.btn:hover {
background: #0056b3;
}响应式设计
/* 手机端导航 */
@media (max-width: 768px) {
.main-nav ul {
flex-direction: column;
gap: 10px;
}
.feature-grid {
grid-template-columns: 1fr;
}
}