基于 Ant Design 的前端首页 Header 组件设计

首页搭建

本文将演示使用 React 和 Ant Design 构建首页 Header 区域的流程。

首先设置整体页面样式，确保首页至少撑满整个视口，内容过多时自动撑开：

.home-page {
  min-height: 100vh;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
}

一、Header 部分

引入 Ant Design 的 Layout 组件并配置基础结构：

import "./index.scss";
import { Layout } from "antd";
const { Header } = Layout;

const Home = () => {
  return (
    <div className="home-page">
      <Layout>
        <Header className="home-header"></Header>
      </Layout>
    </div>
  );
};
export default Home;

为 Header 添加样式，设置高度、内边距、渐变背景及阴影效果：

.home-header {
  height: 72px;
  padding: 0 18px;
  display: flex;
  : center;
  : ;
  : (, , );
  :    (, , , );
}