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

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;
    
`

效果：