将页眉添加到视口组件

import React from 'react';
import './App.css';

function Header() {
  return (
    <header className="app-header">
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  );
}

function App() {
  return (
    <div className="app">
      <Header />
      <main>
        {/* 应用的主要内容 */}
      </main>
    </div>
  );
}

export default App;

.app-header {
  background-color: #333;
  color: white;
  padding: 1rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.app-header h1 {
  margin: 0;
}

.app-header nav ul {
  list-style: none;
  padding: 0;
}

.app-header nav ul li {
  display: inline;
  margin-right: 1rem;
}

.app-header nav ul li a {
  color: white;
  text-decoration: none;
}

main {
  margin-top: 60px; /* 根据页眉高度调整 */
}

@media (max-width: 600px) {
  .app-header nav ul {
    display: flex;
    flex-direction: column;
  }
}