小滴课堂首页尾部

一.思路及布局

尾部：分为图标区、连接区、备案区

二.编写

1.html编写

<div class="_container">
    <div class="_social">
        <a href="javascript:void(0)"><img src="./img/weibo.png" title="官方微博"></a>
        <a href="javascript:void(0)"><img src="./img/weixin.png" title="官方公众号"></a>
        <a href="javascript:void(0)"><img src="./img/qq.png" title="客服QQ"></a>
    </div>
    <div class="_link">
        <li>关于我们</li>
        <li>联系我们</li>
        <li>帮助中心</li>
        <li>加入我们</li>
        <li>讲师合作</li>
        <li>友情链接</li>
    </div>
    <div class="_copyright">
        Copyright © 
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502035713">京ICP备18028493号</a>
    </div>
</div>

2.css编写

居中显示

._container {
    width: 432px;
    height: 144px;
    padding-top: 15px;
    margin: auto;
}

图标间隔太近

._social a img {
    padding: 10px 20px;
}

去掉圆点

._link li {
    list-style-type: none;
}

让li一行显示

._link li {
    list-style-type: none;
  	display: inline-block
}

让_link居中

._link {
    text-align: center;
}

把li上图标显示改一下

._link li {
    list-style-type: none;
  	display: inline-block;
  	cursor: pointer;
}

把li之间的间隔改一下，字体改一下

._link li {
    list-style-type: none;
  	display: inline-block;
  	cursor: pointer;
  	margin: 0 5px;
  	font-size: 12px;
}

备案区

._copyright {
    font-size: 10px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #000;
    text-align: center;
}