本文介绍如何通过调整 html 元素顺序和优化 css 结构，将原本位于页面底部的导航栏（navbar）正确放置在页面顶部，并保持响应式与可维护性。
要让导航栏显示在页面最上方，核心原则是：HTML 文档流中，先出现的元素默认渲染在更靠上的位置。你当前的 index.html 中，<img> 标签写在 <ul> 导航列表之前，导致图片先被渲染，导航栏自然“沉”到了图片下方——即使视觉上看似“在底部”，本质上是文档流顺序导致的布局错位。
✅ 正确做法：调整 DOM 顺序
只需将 <ul> 导航结构移至 <body> 内最前端（紧随 <body> 开始标签之后），并确保其父容器无干扰样式（如 margin-top、position: absolute 等），即可实现顶部固定定位：
<body>
<!-- ✅ 导航栏置于最顶部 -->
<nav class="navbar">
<ul id="horizontal-style">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li style="float:right"><a href="#">Login</a></li>
<li style="float:right"><a class="active" href="#about">Sign up</a></li>
</ul>
</nav>
<!-- ✅ 图片及主内容随后排列 -->
<img class="contact_book" src="{% static 'img/contact_book.jpg' %}" alt="Contact Book" />
<div id="booking" class="section">
<!-- 页面主体内容 -->
</div>
</body>? 同时建议优化的 CSS（增强健壮性）
原 CSS 中使用 float: right 实现右对齐虽可行，但存在清除浮动风险，且不利于现代响应式开发。推荐改用 Flexbox 布局提升可维护性：
.navbar {
margin: 0;
}
#horizontal-style {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #dddddd;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
#horizontal-style li {
margin: 0;
}
#horizontal-style a {
display: block;
color: #000;
text-align: center;
padding: 20px 16px;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
#horizontal-style a:hover {
background-color: #555;
color: white;
}
#horizontal-style .active {
background-color: #337ab7;
color: white;
}? 提示：.navbar 包裹层不仅语义清晰（符合 HTML5 规范），还便于后续添加 position: sticky 实现滚动时固定在顶部（如需）：.navbar { position: sticky; top: 0; z-index: 1000; }
⚠️ 注意事项
- 避免在导航外层 div 或 ul 上设置 margin-top、margin-bottom 等可能破坏垂直定位的属性；
- Django 模板中确保 {% static %} 路径正确，CSS 文件已成功加载（可通过浏览器开发者工具 → Network 标签验证）；
- 若使用 Bootstrap 或其他 UI 框架，请优先采用其内置 navbar 组件，避免手动覆盖样式冲突；
- 移动端适配：当前 Flexbox 方案天然支持换行，如需小屏堆叠，可添加媒体查询：
@media (max-width: 768px) { #horizontal-style { flex-direction: column; align-items: flex-start; } #horizontal-style li { width: 100%; } }
通过以上调整，你的导航栏将稳定、语义化、可扩展地呈现于页面顶部，为后续功能（如登录状态动态渲染、Django URL 反向解析等）打下良好基础。
立即学习“前端免费学习笔记（深入）”；
