2.使用style-components完成header组件布局

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史第四次提交

1.样式

屏幕快照 2019-06-04 11.06.35.png

1.首先到src目录下创建一个目录common，在common文件夹下再创建一个文件夹header，在header里创建一个index.js文件
2.在App.js中引入这个index.js文件。
App.js中添加

import React from 'react';
import Header from './common/header';
function App() {
  return (
    <Header/>
  );
}
export default App;

3.在header文件下创建style.js
style.js

import styled from 'styled-components';
//这实际就是创建一个带有样式的div标签
export const HeaderWrapper = styled.div`
    height: 58px;
    border-bottom: 1px solid #f0f0f0;
`;

4.到header下的index.js下引入这个标签

import React, { Component } from 'react';
import {HeaderWrapper} from "./style";

class Header extends Component {
  render(){
    return (
      <HeaderWrapper>header</HeaderWrapper>
    )
  }
}
export default Header;

5.在src目录下创建，statics文件夹，将下载下来要使用的图片放进去。在header目录下style文件中 添加

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

//简书的简书Logo实际上是一个返回首页的a标签
export const Logo = styled.a.attrs({
  href:'/'//返回根路径方法
})`
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width:100px;
    height: 56px;
    background: url(${logoPic});
    background-size: contain;
`

并在index中引入Logo组件。
6.可以看出中间部分是居中排列的

屏幕快照 2019-06-04 15.31.50.png

创建中间组件Nav、Addition、NavItem、NavSearch
index.js

import React, { Component } from 'react';
import {HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button} from "./style";

class Header extends Component {
  render(){
    return (
      <HeaderWrapper>
        <Logo />
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载App</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>Aa</NavItem>
          <NavSearch></NavSearch>
        </Nav>
        <Addition>
          <Button className='writting'>写文章</Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}
export default Header;

style.js

import styled from 'styled-components';
import logoPic from '../../statics/logo.png';
//这实际就是创建一个带有样式的div标签
export const HeaderWrapper = styled.div`
/**绝对定位*/
    position: relative;
     height: 58px;
     border-bottom: 1px solid #f0f0f0;
`;

//简书的简书Logo实际上是一个返回首页的a标签
export const Logo = styled.a.attrs({
  href:'/'//返回根路径
})`
    position: absolute;  /**相对定位*/
    top: 0;
    left: 0;
    display: block;
    width:100px;
    height: 56px;
    background: url(${logoPic}); 
    background-size: contain; 
`;

export const Nav = styled.div`
    width: 960px;
    height: 100%;
    padding-right: 70px;
    box-sizing: border-box;
    margin: 0 auto;
`
export const NavItem = styled.div`
    line-height: 56px;
    padding: 0 15px;
    font-size: 17px;
    color:#333;
    &.left {
      float: left;
    }
    &.right {
      float: right;
      color:#969696;
    }
    &.active {
      color: #ea6f5a;
    }
`;

export const NavSearch = styled.input.attrs(
  {
    placeholder: '搜索'
  })`
    width：160;
    height: 38px;
    padding: 0 20px;
    margin-top:9px;
    margin-left: 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    border-radius: 19px;
    background: #eee;
    font-size: 14px;
    &::placeholder {
       color: #999;
    }
  `;
export const Addition = styled.div`
  position: absolute;
  right: 0;
  top: 0;
  height: 56px;
`;

export const Button = styled.div`
  float: right;
  margin-top: 9px;
  margin-right: 20px;
  padding: 0 20px;
  
  line-height: 38px;
  border-radius: 19px;
  border: 1px solid #ec6149;
  fond-size: 14px;
  &.reg {
     color: #ec6149;
  }
  &.writting {
     color: #fff;
     background: #ec6149;
  }
`;