React 免费教程（七）JSPang博客第一节源码。

最新推荐文章于 2023-04-25 14:34:41 发布

东宇科技

最新推荐文章于 2023-04-25 14:34:41 发布

阅读量410

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/ldy889/article/details/107706969

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

import React, { Component } from 'react'
import '../public/style/components/header.css'
import {Row,Col,Menu } from 'antd'
import { HomeOutlined,YoutubeOutlined,SmileOutlined } from '@ant-design/icons' 

const Header=()=>{
   return( 
            <div className="header">
            <Row type="flex" justify="center">
                <Col  xs={24} sm={24} md={10} lg={10} xl={10}>
                    <span className="header-logo">技术胖</span>
                    <span className="header-txt">专注前端开发,每年100集免费视频。</span>
                </Col>

                <Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
                    <Menu  mode="horizontal">
                        <Menu.Item key="home">
                        <HomeOutlined />
                            首页
                        </Menu.Item>
                        <Menu.Item key="video">
                        <YoutubeOutlined />
                            视频
                        </Menu.Item>
                        <Menu.Item key="life">
                        <SmileOutlined />
                            生活
                        </Menu.Item>
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}

export default Header

//_app.js
import App from 'next/app'

import 'antd/dist/antd.css'
import '../public/style/pages/comm.css'

export default App

//index.js
import Head from 'next/head'
import {Button} from 'antd'
import Header from '../components/Header'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
 
      <Header></Header>
    </div>
  )
}


//head.css
.header{
    background-color: #fff;

    padding: .4rem;
    overflow: hidden;
    height: 2.8rem;
    border-bottom:1px solid #ccc;
}
.header-logo{
    color:#1e90ff;
    font-size: 1.4rem;
    text-align: left;

}
.header-txt{
    font-size: 0.6rem;
    color: #999;
    display: inline-block;
    padding-left: 0.3rem;
}
.ant-meu{
    line-height: 2.6rem;

}
.ant-menu-item{
    font-size:.7rem !important;
    padding-left:1rem;
    padding-right:1rem;

}

//comm.css
body{
    background-color: #f6f6f6;
}

{
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

const withCss = require('@zeit/next-css')

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCss({})

ico从4.0开始独立出来了。可以看官方文档。https://ant.design/components/icon-cn/

东宇科技

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 免费教程（七）JSPang博客第一节源码。

import React, { Component } from 'react'import '../public/style/components/header.css'import {Row,Col,Menu } from 'antd'import { HomeOutlined,YoutubeOutlined,SmileOutlined } from '@ant-design/icons' const Header=()=>{ return( <d.
复制链接

扫一扫