着陆页布局求助：全屏带边框图片中嵌入导航栏与竖排文本

嘿，我来帮你搞定这个布局！你现在用border来实现“边框”区域的思路有点小问题——默认盒模型下border会额外占用空间，导致你的全屏图片超出视口，而且导航和竖排文本很难塞进这个边框区域。咱们换个更靠谱的方案：用内边距+绝对定位来实现，既能保留你要的“边框”留白，又能轻松把导航和文本嵌入进去。

核心思路 #

用一个外层容器模拟“边框”：给容器设置白色背景+60px内边距，然后把全屏图片放在容器内部；再用绝对定位把导航、左右竖排文本固定在容器的内边距区域里。

完整实现代码 #

HTML 结构

<div class="hero-container">
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
  </nav>

  <!-- 左侧竖排文本 -->
  <div class="vertical-text left-text">左侧竖排文字</div>

  <!-- 右侧竖排文本 -->
  <div class="vertical-text right-text">右侧竖排文字</div>

  <!-- 全屏图片容器 -->
  <div class="fullscreen-img"></div>
</div>

CSS 样式

/* 全局重置，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器：模拟白色边框+承载所有元素 */
.hero-container {
  width: 100vw;
  height: 100vh;
  padding: 60px; /* 这就是你要的60px"边框"留白 */
  background-color: #fff; /* 边框颜色 */
  position: relative; /* 为内部绝对定位元素提供参考 */
  overflow: hidden; /* 防止内容溢出视口 */
}

/* 全屏图片 */
.fullscreen-img {
  width: 100%;
  height: 100%;
  background-image: url('../img1'); /* 你的图片路径 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* 确保图片铺满容器 */
}

/* 顶部导航 */
.top-nav {
  position: absolute;
  top: 0;
  left: 60px;
  right: 60px;
  height: 60px; /* 和padding高度一致，刚好填满顶部留白 */
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(255,255,255,0.8); /* 可选：加个半透明背景增强可读性 */
}

.top-nav a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

/* 竖排文本通用样式 */
.vertical-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  writing-mode: vertical-rl; /* 竖排显示 */
  text-orientation: upright; /* 文字直立（可选，根据需求调整） */
  color: #333;
  font-size: 14px;
  padding: 10px;
}

/* 左侧竖排文本 */
.left-text {
  left: 0;
}

/* 右侧竖排文本 */
.right-text {
  right: 0;
}

关键细节解释 #

1. box-sizing: border-box：让所有元素的内边距和边框都算在自身尺寸内，避免布局混乱。
2. 外层容器的position: relative：是为了让内部的导航、文本能基于它做绝对定位。
3. 导航的top:0; left:60px; right:60px：刚好卡在顶部的留白区域，宽度自动填满左右边框之间的空间。
4. 竖排文本用writing-mode: vertical-rl实现竖排，配合transform: translateY(-50%)实现垂直居中。
5. background-size: cover：确保图片铺满容器，不会出现拉伸或留白。

这样调整后，你要的布局就完美实现了——全屏图片被60px白色边框包裹，导航嵌在顶部边框里，左右竖排文本也刚好卡在两侧的边框区域内。

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