//header index.js

import React, {Component,Fragment} from 'react';

import { Menu, Icon } from 'antd';

import logo from './logo.png';

import './style.css';

class AppHeader extends Component{

    render(){

    return(

    <Fragment>

               <img src={logo} className="app-header-logo"/>

               <Menu mode="horizontal">

                   <Menu.Item key="mail1">

                       <Icon type="mail"/>VOA慢速英语

                    </Menu.Item>

               </Menu>

            </Fragment>

    )

    }

}

export default AppHeader;

//header style.css

.header{

background:#fff;

border-bottom:1px solid #999;

}

.content{

min-height:600px;

}

.footer{

text-align: center;

border-top:1px solid #999;

}

//index.js

import React, {Component} from 'react';

import ReactDom from 'react-dom';

import 'antd/dist/antd.css';

import { Layout } from 'antd';

import './style.css';

import AppHeader from './components/Header/'

const { Header, Footer, Content } = Layout;

class App extends Component{

      render() {

      return (

      <Layout style={{minWidth:1300}}>

               <Header className="header">

                  <AppHeader />

               </Header>

               <Content className="content">Content</Content>

               <Footer className="footer">Footer</Footer>

            </Layout>

      )

      }

}

ReactDom.render(<App />,document.getElementById('root'));