首页搭建
本文将演示使用 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;
: ;
: (, , );
: (, , , );
}



