三、详细实现步骤
📁 步骤1：创建文件结构
lesson3/
├── index.html
├── css/
│ └── style.css
└── images/
├── logo.png
└── banner.jpg
📄 步骤2：编写HTML结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>企业官网布局实例</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 固定导航栏 -->
<nav class="fixed-nav">
<div class="logo">
<img src="https://via.placeholder.com/80x40" alt="企业LOGO">
</div>
<ul class="main-nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
<ul class="side-nav">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</nav>
<!-- 头部横幅 -->
<header class="banner">
<img src="https://via.placeholder.com/1200x400" alt="banner图">
<div class="banner-text">
<h1>欢迎访问我们的网站</h1>
<p>专业的前端开发解决方案</p>
</div>
</header>
<!-- 主要内容区 -->
<div class="container">
<!-- 侧边栏（竖向导航） -->
<aside class="sidebar">
<h3>产品分类</h3>
<ul class="vertical-nav">
<li><a href="#">网页设计</a></li>
<li><a href="#">移动端开发</a></li>
<li><a href="#">小程序开发</a></li>
<li><a href="#">UI设计</a></li>
</ul>
<!-- 定位广告 -->
<div class="ad-box">
<p>限时优惠</p>
<p>立减500元</p>
</div>
</aside>
<!-- 内容区域 -->
<main class="main-content">
<h2>公司简介</h2>
<p>我们是一家专业的前端开发公司，专注于网页设计、移动端开发、小程序开发等领域，拥有多年的行业经验和专业的技术团队。</p>
<div class="card-list clearfix">
<div class="card">
<h3>网页设计</h3>
<p>专业的网页设计服务，响应式布局，适配各种设备</p>
</div>
<div class="card">
<h3>移动端开发</h3>
<p>H5移动端开发，原生APP开发，小程序开发</p>
</div>
<div class="card">
<h3>UI设计</h3>
<p>专业的UI/UX设计，提升用户体验</p>
</div>
</div>
</main>
</div>
<!-- 页脚 -->
<footer class="footer">
<p>© 2026 企业官网 - 版权所有</p>
</footer>
</body>
</html>
🎨 步骤3：编写CSS样式（关键部分）
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "微软雅黑", sans-serif;
color: #333;
padding-top: 80px; /* 给固定导航留出空间 */
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
/* 清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 固定导航栏 (fixed定位示例) */
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 999;
display: flex;
align-items: center;
padding: 0 50px;
justify-content: space-between;
}
.logo img {
height: 40px;
}
/* 横向导航 (flex) */
.main-nav {
display: flex;
}
.main-nav li {
margin: 0 15px;
}
.main-nav a {
font-size: 16px;
font-weight: 500;
color: #333;
padding: 10px 0;
position: relative;
}
.main-nav a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3498db;
transition: width 0.3s ease;
}
.main-nav a:hover::after {
width: 100%;
}
/* 右侧导航 */
.side-nav {
display: flex;
}
.side-nav li {
margin-left: 20px;
}
.side-nav a {
font-size: 14px;
color: #666;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 20px;
transition: all 0.3s ease;
}
.side-nav a:hover {
background-color: #3498db;
color: white;
border-color: #3498db;
}
/* 横幅区域 (相对+绝对定位) */
.banner {
position: relative;
height: 400px;
overflow: hidden;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.banner-text h1 {
font-size: 48px;
margin-bottom: 20px;
}
.banner-text p {
font-size: 24px;
}
/* 主容器 (flex两列布局) */
.container {
width: 1200px;
margin: 50px auto;
display: flex;
gap: 30px;
}
/* 侧边栏 */
.sidebar {
width: 250px;
flex-shrink: 0;
}
/* 竖向导航 (block导航) */
.vertical-nav {
background-color: white;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
margin-bottom: 30px;
}
.vertical-nav li {
border-bottom: 1px solid #eee;
}
.vertical-nav li:last-child {
border-bottom: none;
}
.vertical-nav a {
display: block;
padding: 15px 20px;
color: #333;
transition: background-color 0.3s ease;
}
.vertical-nav a:hover {
background-color: #f5f5f5;
color: #3498db;
}
/* 粘性定位广告 (sticky) */
.ad-box {
position: sticky;
top: 100px;
background-color: #e74c3c;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.ad-box p:first-child {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
/* 主内容区 */
.main-content {
flex: 1;
}
.main-content h2 {
font-size: 28px;
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.main-content p {
line-height: 1.8;
margin-bottom: 30px;
color: #666;
}
/* 卡片列表 (浮动三列布局) */
.card-list {
margin-left: -15px;
margin-right: -15px;
}
.card {
width: 33.333%;
float: left;
padding: 0 15px;
margin-bottom: 30px;
}
.card > div {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
padding: 20px;
height: 100%;
}
.card h3 {
font-size: 18px;
color: #2c3e50;
margin-bottom: 15px;
}
.card p {
color: #666;
line-height: 1.6;
}
/* 页脚 */
.footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 30px 0;
margin-top: 50px;
}
▶️ 步骤4：运行与验证
- 打开
index.html 文件
- 验证核心效果：
- 导航栏固定在顶部，滚动页面不消失
- 横向导航hover时有下划线动画效果
- 侧边栏竖向导航点击区域占满整行
- 广告框随滚动条粘性定位（
sticky）
- 卡片列表使用浮动实现三列布局
- 横幅文字居中显示（绝对定位）