React+Ant.design 从零开始搭建个人博客实战教程02 —— 页面布局 公用头部尾部

版权声明:本文为博主原创文章,未经博主允许不得转载。联系webmxj@163.com https://blog.csdn.net/div_ma/article/details/80451131

简介: 刚入手一个服务器 打算搭个个站, 平时工作都是用vue ;为了扩展自己的实战能力 来从头开始实战用用react吧;结合ant-design一起开发,然后后台nodejs来写; 编写我的第一个教程文章,从头到尾记录整个过程 因为是实战项目;部分基础的创建react的和基本语法什么的话各位就自便了 如果有需要的话 我是可以开篇博客的;需要的留言— —
ღ( ´・ᴗ・` )比心

因为并不是很熟悉这两个框架 所以如果有做的不好的 请各位大神指导下小弟 谢谢了

作者:webmxj
csdn博客名:div_ma
联系方式:webmxj@163.com
微信:webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端

相关链接:
react+ant.design 从零开始搭建个人博客实战01 —— 起步
react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
react+ant.design 从零开始搭建个人博客实战03 —— 路由
react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用

上一篇我们搭好了基础的框框 然后现在我们开始对内容进行布局

1.我们先给框架搭建一个头部,先引入ant-design的组件

//通过import 引入从ant中想要的组件
import {Menu,Icon} from 'antd'
//然后修改样式

然后根据ant-design的api改造样式
最后的代码如下:
HeadNav.js

import React,{Component} from 'react';
import {Menu,Icon} from 'antd'
import './HeadNav.less'
export default class HeadNav extends Component {
    state = {
        current: 'home',
    }
    render(){
        return (
            <div id="HeadNav">
                <div className="nav-wrap">
                    <div className="nav-logo-wrap">
                        <Icon type="global" className="nav-logo" />
                    </div>
                    <div className="nav-list-wrap">
                        <Menu
                            selectedKeys={[this.state.current]}
                            mode="horizontal"
                        >
                            <Menu.Item key="home">
                                首页
                            </Menu.Item>
                            <Menu.Item key="aboutme">
                                关于我
                            </Menu.Item>
                            <Menu.Item key="article">
                                文章分享
                            </Menu.Item>
                            <Menu.Item key="resource">
                                资源共享
                            </Menu.Item>
                        </Menu>
                    </div>
                </div>
            </div>
        )
    }

}

HeadNav.less代码部分如下:

#HeadNav{
  height: 50px;
  background: #444;
  color: #fff;
  .nav-wrap{
    width:1200px;
    margin:0 auto;
    height:50px;
    box-sizing: border-box;
    .nav-logo-wrap{
      display: inline-block;
      font-size:26px;
      width: 26px;
      //height:50px;
      vertical-align: top;
      margin-left:12px;
      margin-top:4px;
    }
    .nav-list-wrap{
      width:1160px;
      display: inline-block;
      height:50px;
      text-align:right;
      .ant-menu{
        color: #fff;
        background: transparent;
        display: inline-block;
        height:50px;
      }
      .ant-menu-horizontal{
        border-color: transparent;
      }
      .ant-menu-horizontal .ant-menu-item, .ant-menu-horizontal .ant-menu-submenu{
        margin-top:0;
      }
      .ant-menu-horizontal{
        line-height:47px;
      }
    }
  }
}

然后在DefaultLayout.js中引入

/**
 * Created by webmxj on 2018/5/25.
 */
import React,{Component} from 'react';
import HeadNav from '../../common/HeadNav'
import './DefaultLayout.less'
export default class DefaultLayout extends Component{
    render(){
        return (
            <div id="DefaultLayout">
                <HeadNav/>
            </div>
        )
    }
}

最后打开localhost:3000我们就得到了一个想要的头部 效果如下
这里写图片描述

头部做好之后再来加一条底部 同样的方法新建一个组件
这里写图片描述

相关链接:
react+ant.design 从零开始搭建个人博客实战01 —— 起步
react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
react+ant.design 从零开始搭建个人博客实战03 —— 路由
react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用

展开阅读全文

没有更多推荐了,返回首页