六、React开发—底部栏组件

六、React开发—底部栏组件

这次我们写一个简单的组件，网站的底部栏组件，我们写完这个组件之后，整个首页的静态界面就初步完成了。

底部栏组件

在 my-blog\src\components\footer\ 中新建 footer.jsx 文件，并写入代码：

import React, {Component} from "react";

import './footer.less'

export default class FooterMy extends Component{
    render() {
        return (
            <div className="container" style={{ 'textAlign':'center'}}>
                <div className="copyright silver-color">
                    <a target="_blank" href={"http://asa-zhang.top"}>版权所有 © 2020 Asa blog | Asa All Rights Reserved </a>
                </div>
                <div className="beian">
                    <a  href="http://www.beian.miit.gov.cn" target="_blank"><span>此处写备案号</span></a>
                </div>
            </div>
        )
    }
}

然后添加样式文件， 在 footer.jsx 的同级目录中新建 footer.less 文件，写入样式：

div.copyright.silver-color > a, div.beian > a {
  color: #738192;
}

将底部栏组件写入网站的架构中，修改 my-blog\src\main\main.jsx 文件：

...
import FooterMy from "../footer/footer";  \\ 导入底部栏组件
...
       <Footer>
                    <FooterMy />
                </Footer>
...

效果图

 

 

 

 

这个公众号分享一些

我平时的胡思乱想和其他东西

如果您稍微感兴趣

可以关注一下

坚持是一种信仰，点赞是一种态度！