css: update footer style

This commit is contained in:
Benjy Cui 2016-03-01 14:19:50 +08:00
parent c9aff0ac92
commit fa9ccf3551
4 changed files with 81 additions and 64 deletions

View File

@ -8,3 +8,4 @@ import './styles/resource.less';
import './styles/clearfix.less';
import './styles/demo.less';
import './styles/page-nav.less';
import './styles/footer.less';

View File

@ -0,0 +1,35 @@
footer {
clear: both;
border-top: 1px solid #eee;
font-size: 12px;
background: #fff;
position: relative;
z-index: 1;
color: #666;
}
footer ul {
overflow: hidden;
margin: 0 2%;
}
footer ul li {
float: left;
width: 25%;
padding: 5px 2% 15px;
}
footer ul li > h2 {
font-size: 16px;
margin: 10px auto 5px;
font-weight: normal;
}
footer ul li > div {
margin: auto;
margin: 10px 0;
}
footer ul li > a {
margin: 5px 2px 0 0;
}

View File

@ -1,50 +1,51 @@
import React from 'react';
import { Row, Col, Select } from '../../../';
import { Select } from '../../../';
import './index.less';
export default class Footer extends React.Component {
render() {
return (<footer id="footer">
<Row>
<Col span="6" className="footer-col">
<h2>GitHub</h2>
<a target="_blank " href="https://github.com/ant-design/ant-design">
仓库
</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">
样式
</a>
<a target="_blank" href="https://github.com/ant-design/antd-bin">
开发工具
</a>
</Col>
<Col span="6" className="footer-col">
<h2>关于我们</h2>
<a href="https://github.com/alipay/x/issues">博客 - Ant UED</a>
</Col>
<Col span="6" className="footer-col">
<h2>联系我们</h2>
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">
反馈和建议
</a>
<a target="_blank" href="https://gitter.im/ant-design/ant-design">
讨论
</a>
<a target="_blank" href="http://dwz.cn/2dJ2mg">
报告 Bug
</a>
</Col>
<Col span="6" className="footer-col">
<p>©2015 蚂蚁金服体验技术部出品</p>
<p>
文档版本
<Select defaultValue="0.10.4" size="small">
<Option value="0.10.4">0.10.4</Option>
<Option value="0.9.2">0.9.2</Option>
</Select>
</p>
</Col>
</Row>
</footer>);
return (
<footer id="footer">
<ul>
<li>
<h2>GitHub</h2>
<a target="_blank " href="https://github.com/ant-design/ant-design">
仓库
</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">
样式
</a>
<a target="_blank" href="https://github.com/ant-design/antd-bin">
开发工具
</a>
</li>
<li>
<h2>关于我们</h2>
<a href="https://github.com/alipay/x/issues">博客 - Ant UED</a>
</li>
<li>
<h2>联系我们</h2>
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">
反馈和建议
</a>
<a target="_blank" href="https://gitter.im/ant-design/ant-design">
讨论
</a>
<a target="_blank" href="http://dwz.cn/2dJ2mg">
报告 Bug
</a>
</li>
<li>
<div>©2015 蚂蚁金服体验技术部出品</div>
<div>
文档版本
<Select defaultValue="0.10.4" size="small">
<Option value="0.10.4">0.10.4</Option>
<Option value="0.9.2">0.9.2</Option>
</Select>
</div>
</li>
</ul>
</footer>
);
}
}

View File

@ -1,20 +0,0 @@
#footer {
animation: yBottomMatrix .5s ease-out .6s backwards;
border-top: 1px solid #eee;
background: #fff;
padding: 0 2%;
}
#footer .footer-col {
padding: 10px 2% 15px;
}
#footer h2 {
font-size: 16px;
font-weight: normal;
margin-top: 5px;
}
#footer a, #footer p {
font-size: 12px;
margin: 5px 2px 0 0;
}