02.使用styled-components完成Header布局（1）

最新推荐文章于 2024-03-27 09:58:00 发布

zhuhui2000

最新推荐文章于 2024-03-27 09:58:00 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

分类专栏：简书项目

本文链接：https://blog.youkuaiyun.com/zhuhui2000/article/details/90673220

简书项目专栏收录该内容

28 篇文章

订阅专栏

博客介绍了前端项目中头部代码的搭建与引入。在src目录下新建common文件夹，其下再建Header文件夹存放头部代码，新建index.js和style.js文件，还在src下新建statics文件夹存图片，最后在App.js中引入头部组件并编写头部代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.我们在src目录下新建一个文件夹common,并且在common下再新建一个文件夹Header用于存放整个项目的头部的代码。在header中新建两个文件index.js和style.js，另外需要在src目录下新建一个文件夹statics，用于存放图片
在这里插入图片描述
2.我们需要在App.js文件中引入头部的组件，如下：

3.我们现在就可以在Header文件夹下的文件中来编写头部的代码：
index.js文件：

import React, { Component } from 'react';
import { HeadrerWrapper,Logo ,Nav} from './style'
class Header extends Component{
    render() {
        return (
            <HeadrerWrapper>
                <Logo href='/' />
                <Nav>
                </Nav>
            </HeadrerWrapper>
        )
    }
}
export default Header;

style.js文件中：

import styled from 'styled-components'
import logoPic from '../../statics/logo.png'
export const HeadrerWrapper = styled.div`
    position:relative;
    height:56px;
    border-bottom:solid 1px #f0f0f0;
`;
export const Logo = styled.a`
    height:56px;
    width:100px;
    position:absolute;
    top:0;
    left:0;
    display:block;
    background:url(${logoPic});
    background-size:contain;
`;
export const Nav = styled.div`
    width:960px;
    height:100%;
    margin:0 auto;
    background:red;
    
`

效果：
在这里插入图片描述