CSS技巧：将菜单项紧贴导航栏顶部

<h2>CSS技巧：将菜单项紧贴导航栏顶部</h2>
<p>想要将菜单项在导航栏中向上移动，使其紧贴顶部？其实只需简单调整 <code>.sidebar</code> 和 <code>.sidebar li</code> 的CSS样式即可实现。</p>
<p>以下是修改后的代码示例：html<template>  <view>    <!-- 顶部导航栏 -->    <view class='af-head'>      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>      <span class='af-head-msg af-head-fuc'>全部功能</span>    </view></p>
<pre><code>&lt;!-- 左侧导航栏 --&gt;    &lt;view class='sidebar'&gt;      &lt;ul&gt;        &lt;li @click='navigateToPage('Page1')'&gt;菜单项1&lt;/li&gt;        &lt;li @click='navigateToPage('Page2')'&gt;菜单项2&lt;/li&gt;        &lt;li @click='navigateToPage('Page3')'&gt;菜单项3&lt;/li&gt;      &lt;/ul&gt;    &lt;/view&gt;  &lt;/view&gt;&lt;/template&gt;
</code></pre>
<script>export default {  data() {    return {};  },  methods: {    navigateToPage(page) {      // 根据菜单项点击事件进行页面跳转或其他操作      console.log('点击了' + page);    }  }};</script>
<style>.af-head {  position: relative;  background-color: #629ffc;  height: 100rpx;  display: flex;  justify-content: center;  font-size: 44rpx;  font-weight: 500;  font-family: sans-serif;}

.af-head-msg {  position: absolute;  bottom: 16rpx;  color: white;  left: 38rpx;}

.af-head-fuc {  text-align: center;  left: 300rpx;}

.sidebar {  width: 100px;  background-color: white;  height: 100vh;  padding-top: 20rpx; /* 调整上边距 */}

.sidebar ul {  list-style: none;  padding: 0;  margin: 0;}

.sidebar li {  padding: 10rpx;  color: black;  /* 去掉点 */  list-style-type: none;  display: block; /* 设置为块级元素 */  margin-top: 10px; /* 调整菜单项上边距 */}</style>
<p><strong>代码解释:</strong></p>
<ol>
<li>
<p><strong><code>.sidebar</code> 样式调整:</strong>   - <code>padding-top: 20rpx;</code>:  调整侧边栏的上边距，控制菜单项与顶部的距离。</p>
</li>
<li>
<p><strong><code>.sidebar li</code> 样式调整:</strong>   - <code>display: block;</code>:  将菜单项设置为块级元素，使其独占一行。   - <code>margin-top: 10px;</code>:  调整每个菜单项之间的垂直间距。</p>
</li>
</ol>
<p>你可以根据实际需求和样式要求，灵活调整 <code>padding-top</code> 和 <code>margin-top</code> 的值，以达到理想的视觉效果。</p>