纯H5页面，移动端访问，如何去掉顶部栏目和导航栏，让下方内容图片顶上去

Question

纯H5页面，移动端访问，如何去掉顶部栏目和导航栏，让下方内容图片顶上去

Answer 1

可以通过CSS来实现去掉顶部栏目和导航栏的效果，让下方内容图片顶上去。

假设你的顶部栏目和导航栏的HTML代码如下：

<div class="header">
  <!-- 顶部栏目 -->
</div>
<nav class="navbar">
  <!-- 导航栏 -->
</nav>
<div class="content">
  <!-- 内容图片 -->
</div>

则可以使用下面的CSS样式来实现效果：

.header, .navbar {
  display: none; /* 隐藏顶部栏目和导航栏 */
}

.content {
  margin-top: 0; /* 去掉默认的上边距 */
}

这样，就可以让内容图片顶上去了。如果你希望内容图片占据整个屏幕，可以使用如下的CSS样式：

.content {
  margin-top: 0; /* 去掉默认的上边距 */
  height: 100vh; /* 使内容图片占据整个屏幕 */
  background-size: cover; /* 背景图片充满整个内容区域 */
  background-position: center center; /* 将背景图片居中 */
}

以上代码中的background-size和background-position是针对使用背景图片的情况，如果你使用的是img标签来展示内容图片，可以忽略这两个属性。