小白学前端--第九天（2026/2/20）header设计

首页搭建

上回我们将整个项目拆分成三个主体区域，并且决定用Layout来进行设计布局。那让我们一个一个来吧。

先设置一下整体的home-page样式

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

min-height:100vh+flex-direction:column可以保证首页至少撑满整个页面，如果商品过多则往下自动撑开，不会被截断

一、header部分

import "./index.scss"; import { Layout,Input } from "antd"; const { Header} = Layout; const {Search} =Input const Home = () => { return ( <div className="home-page"> {/* 顶部：logo + 搜索 + 购物车&用户 */} <Layout> <Header className="header"> {/* <div className="logo"></div> */} {/* <Search placeholder="input search text" allowClear enterButton="Search" size="large" ></Search> */} </Header> </Layout> </div> ); }; export default Home; 

只加上背景色可以发现，header本身是有宽高的，要想控制样式，只需加上类名即可。

调完之后代码这样子：

import "./index.scss"; import { Layout } from "antd"; const { Header } = Layout; const Home = () => { return ( <div className="home-page"> {/* 顶部：logo + 搜索 + 购物车&用户 */} <Layout> <Header className="home-header"> </Header> </Layout> </div> ); }; export default Home; 

.home-page { min-height: 100vh; background: #f6f7f9; display: flex; flex-direction: column; } /* 顶部 */ .home-header { height: 72px; padding: 0 18px; display: flex; align-items: center; gap: 16px; background: linear-gradient(90deg, #ff2d2d, #ff6a00); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); }

background: linear-gradient(90deg, #ff2d2d, #ff6a00);为水平方向加一个渐变

box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);为添加阴影，参数分别为水平位移，垂直位移，模糊半径以及阴影颜色，rgb(0,0,0)，不透明度0.12。

效果如下：

1.header-left

左边我打算放置logo，在header-left里面进行设计成这种样式

<div className="header-left" > <div className="logo-badge"> <span className="logo-text">智慧商城</span> </div> </div>

这边样式的话大家可以自己设计，我在最后统一给scss样式代码供大家参考

2.header-mid

中间的位置放置搜索框，ant design里面search在input类里面

通过样例可知，search在input子类中，要先解构再使用。

在api文档中可知，enterButton为确认按钮属性，通过上面的例子可以得知enterButton既可以直接输入文字，也可以传过去一个Button,这里我们选择第二种。

<div className="header-mid"> <Search allowClear placeholder={`搜一搜`} enterButton={ <Button className="search-button" color="danger" variant="solid"icon={<SearchOutlined />}> 搜索 </Button> } onSearch={onSearch} size="large" /> </div>

注意传过去的时候修改样式的时候不可直接传类名，用search里面自带的.ant-input-search-btn类名进行修饰，详情请见react开发：ant design中ant design组件内套用ant design组件的样式问题（2026/2/18）-ZEEKLOG博客

最终效果如下：

3.header-right

右侧主要放置一个购物车按钮和个人中心按钮

用户头像方面我们采用Avatar来实现，它支持三种类型的头像：文字、图片、图标。这里我们先用Icon。

购物车的原理比较简单，外边是一个提示徽标，里面是一个Button即可。

最后总体写完的index.js代码如下：

import "./index.scss"; import { Layout, Input } from "antd"; import { SearchOutlined } from "@ant-design/icons"; import { Button } from "antd"; import { Space, Badge, Avatar } from "antd"; import { ShoppingCartOutlined, UserOutlined } from "@ant-design/icons"; import classNames from "classnames"; const { Header } = Layout; const { Search } = Input; const onSearch = (value) => { console.log("搜索内容:", value); }; const Home = () => { return ( <div className="home-page"> {/* 顶部：logo + 搜索 + 购物车&用户 */} <Layout> <Header className="home-header"> <div className="header-left" > <div className="logo-badge"> <span className="logo-text">智慧商城</span> </div> </div> <div className="header-mid"> <Search allowClear placeholder={`搜一搜`} onSearch={onSearch} size="large" className="search-input" enterButton={ <Button color="danger" variant="solid" icon={<SearchOutlined />}>搜索</Button> } /> </div> <div className="header-right"> <Space size={14}> <Badge count={3} size="small"> <Button className="icon-btn" icon={<ShoppingCartOutlined />} /> </Badge> <div className="user-mini"> <Avatar size={34} icon={<UserOutlined />} /> <div className="user-mini-text"> <div className="user-name">刘同学</div> <div className="user-sub">欢迎回来</div> </div> </div> </Space> </div> </Header> </Layout> </div> ); }; export default Home; 

css样式为：

.home-page { min-height: 100vh; background: #f6f7f9; display: flex; flex-direction: column; } /* 顶部 */ .home-header { height: 72px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #ff2d2d, #ff6a00); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); .header-left { width: 180px; cursor: pointer; display: flex; align-items: center; justify-content: center; // 内部元素水平居中 .logo-badge { height: 44px; padding: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); display: flex; align-items: center; .logo-text { color: #fff; font-weight: 800; letter-spacing: 2px; } } } .header-mid { flex: 1; width: 100%; justify-content: flex-end; align-items: center; display: flex; .search-input{ width: 700px; } .ant-input-search-btn { border: 1px solid #fff !important; } } .header-right { width: 260px; display: flex; justify-content: flex-end; .icon-btn { border-radius: 12px; } .user-mini { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); .user-mini-text { line-height: 1.1; .user-name { color: #fff; font-weight: 700; font-size: 13px; } .user-sub { color: rgba(255, 255, 255, 0.85); font-size: 12px; } } } } } 

效果如下：