网站头部多行品牌标识（Logo、名称、标语）实现及对齐问题

以下是实现你需求的完整代码示例，对应三个需求逐一处理：

HTML 结构 #

<header class="site-header">
  <div class="logo-container">
    <div class="ec-text">अEC</div>
    <div class="brand-name">अभिलाषा EDU Center</div>
    <div class="brand-slogan">Find Your Right Abhilasha</div>
  </div>
  <nav class="nav-menu">
    <a href="#">首页</a>
    <a href="#">课程</a>
    <a href="#">关于我们</a>
    <a href="#">联系</a>
  </nav>
</header>

CSS 样式 #

/* 头部容器，实现logo与导航对齐 */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: #fff;
}

/* Logo区域，垂直排列三行内容 */
.logo-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem; /* 控制行间距，实现无缝贴合 */
}

/* 三层错位的अEC效果 */
.ec-text {
  font-size: 2.5rem;
  font-weight: bold;
  position: relative;
  color: #2c3e50; /* 最上层主颜色 */
}

.ec-text::before,
.ec-text::after {
  content: "अEC";
  position: absolute;
  font-weight: bold;
  font-size: inherit;
}

.ec-text::before {
  color: #3498db; /* 中间层颜色 */
  top: 2px;
  left: 2px;
  z-index: -1;
}

.ec-text::after {
  color: #e74c3c; /* 最底层颜色 */
  top: 4px;
  left: 4px;
  z-index: -2;
}

/* 品牌名称和标语样式 */
.brand-name {
  font-size: 1rem;
  color: #333;
}

.brand-slogan {
  font-size: 0.8rem;
  color: #666;
}

/* 导航菜单样式 */
.nav-menu {
  display: flex;
  gap: 1.5rem;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
}

关键实现说明 #

• 三层错位文字：通过position:relative给主文本定位基准，利用伪元素::before和::after生成相同文本，设置不同颜色、偏移量（top/left）和层级（z-index），实现叠加错位效果。你可以调整偏移量和颜色来匹配目标效果图。
• 无缝垂直排列：logo-container使用flex-direction:column让三行内容垂直排列，通过gap控制行间距，按需调整数值可实现无缝贴合。
• 与导航对齐：site-header用flex布局，align-items:center确保logo区域和导航在垂直方向居中对齐，justify-content:space-between让两者分别靠左右分布，可根据你的布局需求换成justify-content:center或其他值。

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