两行式网站头部（Two-row Header）开发指导：HTML/CSS规范实现及响应式菜单适配

Hey there! Let's break down how to refine your two-row header implementation to be more semantic, maintainable, and responsive. Your current code has some structure gaps and over-reliance on absolute positioning, which can cause layout issues across screen sizes. Let's fix that step by step.

1. Standardize the HTML Structure #

First, let's clean up your HTML to use proper semantic tags and Bootstrap's built-in classes for layout. This will make the code more readable and less prone to bugs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two-Row Header Demo</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- Custom CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <!-- Top Row: Logo + Right Icons -->
    <div class="top-bar container d-flex align-items-center py-3">
      <a href="#" class="navbar-brand mx-auto">
        <!-- Replace with your logo image/text -->
        <span class="h4">Logo</span>
      </a>
      <ul class="top-icons list-unstyled d-flex mb-0">
        <li class="mx-3">
          <a href="#" class="nav-link">search</a>
        </li>
        <li class="mx-3">
          <a href="#" class="nav-link">user</a>
        </li>
        <li class="position-relative mx-3">
          <a href="#" class="nav-link">cart</a>
          <span class="mini-cart-count">0</span>
        </li>
      </ul>
    </div>

    <!-- Bottom Row: Main Navigation -->
    <nav class="main-nav bg-light py-3">
      <div class="container">
        <!-- Desktop Navigation -->
        <ul class="main-menu list-unstyled d-flex justify-content-center mb-0">
          <li class="mx-3"><a href="#" class="nav-link">Home</a></li>
          <li class="mx-3"><a href="#" class="nav-link">Shop</a></li>
          <li class="mx-3"><a href="#" class="nav-link">Client Diaries</a></li>
          <li class="mx-3"><a href="#" class="nav-link">About us</a></li>
          <li class="mx-3"><a href="#" class="nav-link">Appointment</a></li>
          <li class="mx-3"><a href="#" class="nav-link">Sale</a></li>
        </ul>

        <!-- Mobile Hamburger Menu -->
        <button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#mobileMenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse d-md-none" id="mobileMenu">
          <ul class="mobile-menu list-unstyled">
            <li><a href="#" class="nav-link py-2">Home</a></li>
            <li><a href="#" class="nav-link py-2">Shop</a></li>
            <li><a href="#" class="nav-link py-2">Client Diaries</a></li>
            <li><a href="#" class="nav-link py-2">About us</a></li>
            <li><a href="#" class="nav-link py-2">Appointment</a></li>
            <li><a href="#" class="nav-link py-2">Sale</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <!-- Bootstrap JS (for mobile menu collapse) -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

2. Clean Up & Optimize CSS #

Your original CSS uses a lot of hard-coded absolute positioning and margins, which can break layouts on different screen sizes. Let's replace that with flexible, maintainable styles:

/* Custom Styles */
.site-header .nav-link {
  color: #151515;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header .nav-link:hover {
  color: #ED1C2A;
}

/* Cart Count Styling */
.mini-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #ED1C2A;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

/* Mobile Menu Adjustments */
.mobile-menu {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .top-icons {
    font-size: 1.2rem;
  }
  .top-bar .navbar-brand {
    font-size: 1.5rem;
  }
}

3. Key Responsive Adaptation Logic #

Here's how the responsive behavior works:

• Desktop Screens (≥768px): The top row shows a centered logo and right-aligned icons; the bottom row displays the full navigation menu horizontally.
• Mobile Screens (<768px):
  • The main navigation collapses into a hamburger button.
  • Tapping the button expands a vertical mobile menu for easy scrolling.
  • The top bar elements scale down slightly to fit smaller screens without crowding.

Why This Works Better #

• Semantic HTML: Uses <header>, <nav>, and <ul> correctly, making the code accessible and SEO-friendly.
• Bootstrap Utilization: Leverages Bootstrap's flex classes (d-flex, justify-content-center) instead of custom absolute positioning, which reduces layout bugs.
• Maintainable CSS: Avoids hard-coded margins/paddings, uses relative units, and keeps styles modular.
• Mobile-First: The hamburger menu ensures the header works seamlessly on small devices.

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