HTML/CSS文本格式化与导航栏置顶问题技术求助

一、优化文本外观 + 实现HTML代码正常显示 #

1. 文本外观优化 #

通过CSS统一设置文本的字体、字号、行高和颜色，让整体排版更规整：

/* 全局文本样式 */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* 内容容器样式 */
.content-wrapper {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

2. HTML代码正常显示 #

要让<div></div>这类代码在页面正常展示，需将代码中的<>转义为<和>，或用<pre><code>标签包裹代码块，配合CSS美化：

<div class="content-wrapper">
  <p>优化后的正文内容，排版清晰易读。</p>
  <!-- 展示HTML代码 -->
  <pre><code>&lt;div&gt;&lt;/div&gt;</code></pre>
</div>

pre code {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  display: block;
  overflow-x: auto;
  font-family: monospace;
}

二、实现导航栏功能 #

用<nav>标签配合列表实现基础导航栏，通过CSS设置横向排列：

<nav class="navbar">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

.navbar {
  background-color: #2c3e50;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0 20px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  padding: 16px 0;
  display: block;
}

.navbar a:hover {
  color: #3498db;
}

三、修复导航栏无法置顶的问题 #

你提到的padding:0; margin:0; }应该是全局重置代码的一部分，问题出在没有给导航栏设置固定定位，同时全局重置需补充box-sizing避免布局偏移：

1. 修正全局重置代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 确保padding不改变元素总宽度 */
}

2. 设置导航栏置顶样式 #

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999; /* 保证导航栏在所有内容上层 */
}

/* 给body添加上内边距，避免内容被导航栏遮挡 */
body {
  padding-top: 52px; /* 数值等于导航栏的高度 */
}

这样既保留了全局重置的效果，又能让导航栏稳定置顶，不会破坏整体布局。

内容的提问来源于stack exchange，提问作者user22522859