iconfont.js
import { createGlobalStyle } from ‘styled-components’;
export const GlobalIconStyled = createGlobalStyle `
@font-face {
font-family: “iconfont”;
src: url(’./iconfont.eot?t=1588818431937’); /* IE9 /
src: url(’./iconfont.eot?t=1588818431937#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAAB9gAAAOHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDDIJzATYCJAMQCwoABCAFhG0HUBvtBsgOJcHwwADgUQBgPHyOZe8nWcoWWIFisGWHquMJdI1thapwFfqMv/EsLB3/22qATXSzuaqNbuSijAeCjVyFe1F/2aUX3f7PMdOlTSA/0Byr6/lob4CjaB1YdF3gAd8J4y3Da10KB72eQDWpK+yotLoZPBSkWyBeeE4JHhmp0pAY2kKzYmyBeAdX7TQJPw+8BX8fvyWGB0gaGUjfi7sSDeR/C3reQox2jtbbQwBtOjXkSWQsAYV4qNReISLvEkI1G7vYAdraElPVpD5vcTox/SjcNv2XR5YE0QQS3wO2sC/zLYhTE14qiCXgtQD9AeILaEPMK/AJBDfuLkmRhuUeHkEyn9BhCoddYbc3X79O37jB0DOmrLOJDgeTsOjCfZrtdh9SIW8mdbIePWdGk/NDuyv3yaYA1CAP18kXMRvD2II9s+ntq2H0GtmUYxjGMFwcY7ORipnToXlEQ89u633v8rPhwb3mRnAhzLx1u3a0o/fc6Jo0evjSpfnN8tMnlbVlZ7D6kppyv9O5dEHTydY901YuP9d6YuvMJqyOF+pcMyYImM8Rkh+H8zwcZsuudCy+grydqiK7kFtH44UqPtfh8ifXKp1Ij8NcC2JNnRS8Vx9ZVX7m076MdC4s6E94u0/touGf/MOMH5qS3BPDsYm14BvRewLCXjyYtK3izjzLzshhIaGy4G3hLyuSei75IQwIm1BTGlRbAmakYT7Gr4H/znw4Q+C35R7EiL/Xzp8bA2I/n+xvHt2rz/p6a6oTm//bCnTjwS+gdab9K1rHlGIxiKwUg8mptq5YS3WTUFX8oSBD7k+hHwWJOrQVGkDSMgFZ2xSyYJegoWsLmtp2oVpUNrlrmIgQxRNYMA5BGLAJkj5fIBtwAVmw96BhzDtoGggCqssImLNrJniySERKCWko1RCKV5uMLFNIZJjYiLgBeqWYZgR4BRKtvINKiI3PB8qQEYlTDLAO5BIliaVY0WSgStFmSK83UWbRJCC1FKuVJHNmXBxb9aJYtckApEMiREmCaFBUhqDw1EyMWC+zhCz8fiOEM4CektiQ1KRUQERWfP2UBLHiOyDLuMZOSbdyidVAnEQSCYvCEpkYUEqRGtFTrwnFXN1KgKhJYmkHuM0yxeF0bFdu7PJ8wxsugorMUwLHCMwFc4WhO6WR0ygF3mvaTztAqVIaE/ACpfwxmnRTa5FaxxsBAAA=’) format(‘woff2’),
url(’./iconfont.woff?t=1588818431937’) format(‘woff’),
url(’./iconfont.ttf?t=1588818431937’) format(‘truetype’), / chrome, firefox, opera, Safari, Android, iOS 4.2+ /
url(’./iconfont.svg?t=1588818431937#iconfont’) format(‘svg’); / iOS 4.1- */
}

.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
`;
App.js
import React,{ Component } from ‘react’;
import Header from ‘./common/header/index.js’;
import { ResetGlobalStyled } from ‘./style.js’;
import { GlobalIconStyled } from’./statics/iconfont/iconfont.js’;

class App extends Component{
render(){
return (

);
}
}
export default App;
common\header\index.js
import React,{ Component } from ‘react’;
import {
HeaderWrapper,
Logo,
Nav,
NavItem,
NavSearch,
Addition,
Button,
SearchWrapper
} from ‘./style’;
class Header extends Component {
render(){
return (



首页
下载App
登录






写文章
注册


)
}
}
export default Header;
common\header\style.js
import styled from ‘styled-components’;
import logoPic from ‘…/…/statics/logo.png’;
export const HeaderWrapper = styled.divposition: relative; height: 56px; border-bottom: 1px solid #f0f0f0;;
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.divwidth: 960px; height: 100%; padding-right: 70px; box-sizing: border-box; margin: 0 auto;;
export const NavItem = styled.divline-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: 160px; 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.divposition: absolute; right: 0; top: 0; height: 56px;;
export const Button = styled.divfloat: right; margin-top: 9px; margin-right: 20px; padding: 0 20px; line-height: 38px; border-radius: 19px; border: 1px solid #ec6149; font-size: 14px; &.reg { color: #ec6149; } &.writting { color: #fff; background: #ec6149; }