2. react 简书 头部 (header) 样式编写

1. 在 src 下 创建 common 文件下 创建 header 文件夹下 创建 index.js

　　#src/common/header/index.js

　　　　import React, {Component} from 'react';

　　　　import {

　　　　    HeaderWrapper,

　　　　    Logo,

　　　　    Nav,

　　　　    NavItem,

　　　　    NavSearch,

　　　　    Addtion,

　　　　    Button

　　　　} from './style';

　　　　class Header extends Component{

　　　　    render(){

　　　　        return (

 　　　　           <HeaderWrapper>

　　　　                <Logo />

　　　　                <Nav>

　　　　                    <NavItem className="left active">首页</NavItem>

　　　　                    <NavItem className="left">下载</NavItem>

　　　　                    <NavItem className="right">登陆</NavItem>

　　　　                    <NavItem className="right">注册</NavItem>

　　　　                    <NavSearch ></NavSearch>

　　　　                </Nav>

　　　　                <Addtion>

　　　　                    <Button className='writting'>写文章</Button>

　　　　                    <Button className='reg'>注册</Button>

　　　　                </Addtion>

　　　　            </HeaderWrapper>

　　　　        );

　　　　    }

　　　　}

export default Header;

  

2. app.js 引入 header 组件并显示

　　# app.js

　　　　import React from 'react';

　　　　import Header from './common/header'

　　　　function App() {

　　　　  return (

　　　　    <div>

　　　　      <Header />

　　　　    </div>

　　　　  );

　　　　}

　　　　export default App;

3. 在 src 下 创建 common 文件下 创建 header 文件夹下 创建 style.js 编写头部样式

　　# src/header/style.js 

import styled from 'styled-components';

// 引入 logo 图片

import LogoPic from '../../statics/logo.png';

 

export const HeaderWrapper = styled.div`

    postition: relate;

    height:56px;

    border-bottom:1px solid #f0f0f0;

`;

 

export const Logo = styled.a.attrs({

    href : '/'

})`

    position: absolute;

    left : 0;

    top : 0;

    display: block;

    height:56px;

    width:100px;

    background: url(${LogoPic}) no-repeat;

    background-size: contain;

`;

 

export const Nav = styled.div`

    width:960px;

    box-size: box-size;

    padding-right: 70px;

    height: 56px;

    margin-left: 100px;

`

 

export const NavItem = styled.div`

    &.left {

        float: left;

    }

    &.right {

        float: right;

        color: #969696;

    }

    &.active {

        color: #ea6f5a;

    }

    line-height: 56px;

    front-size: 15px;

    padding-left: 6px;

    padding-right: 12px;

    color: #333;

`;

 

export const NavSearch = styled.input.attrs({

    placeholder : '搜索'

})`

    width : 160px;

    height : 38px;

    border: none;

    outline : none;

    padding : 0 20px;

    box-size: box-size;

    margin-top: 9px;

    margin-left: 20px;

    border-radius : 19px;

    background: #eee;

    font-size: 14px;

    &::placeholder:

`;

 

export const Addtion = styled.div`

    position:absolute;

    right: 0;

    top: 0;

    height: 65px;

`;

 

export const Button = styled.div`

    float:right;

    line-height:38px;

    margin-top:9px;

    margin-right: 20px;

    border-radius: 19px;

    border : 1px solid rgba(236,97,73,.7);

    color : #fff;

    padding : 0 20px;

    &.reg{

        color:#ea6f5a;

    }

    &.writting{

        background:#ea6f5a;

    }

`;