实战经验（5）页面底部版权制作

几乎每个网页底部都会有一个版权板块，下面详细介绍版权板块制作方法。

一、底部版权（1）

• 做法
• 版权结构
  
  HTML

<div class="copyright">
      <div class="wrapper">
          <div class="copyright-left">
              <a href="#"><img src="/images/logo.png"></a>
              <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                  © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
              <button type="submit">下载APP</button>
          </div>
          <div class="copyright-right">
              <dl>
                  <dt>关于学成网</dt>
                  <dd><a href="#">关于</a></dd>
                  <dd><a href="#">管理团对</a></dd>
                  <dd><a href="#">工作机会</a></dd>
                  <dd><a href="#">客服服务</a></dd>
                  <dd><a href="#">帮助</a></dd>
              </dl>
              <dl>
                  <dt>新手指南</dt>
                  <dd><a href="#">如何注册</a></dd>
                  <dd><a href="#">如何选课</a></dd>
                  <dd><a href="#">工作机会</a></dd>
                  <dd><a href="#">客服服务</a></dd>
                  <dd><a href="#">帮助</a></dd>
              </dl>
              <dl>
                  <dt>合作伙伴</dt>
                  <dd><a href="#">合作机构</a></dd>
                  <dd><a href="#">合作导师</a></dd>
              </dl>
          </div>
      </div>
  </div>

CSS

.copyright{
    margin-top: 60px;
    padding-top: 60px;
    height: 273px;
    background-color: #fff;
}
.copyright .wrapper{
    display: flex;
    justify-content: space-between;
}
.copyright-left{
    width: 432px;
    /*background-color: #005576;*/
}
.copyright p{
    margin-top: 24px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #666666;
}
.copyright button{
    width: 120px;
    height: 36px;
    background-color: transparent;
    border: solid 1px #00a4ff;
     color:#00a4ff;
    font-size:16px;
}
.copyright .copyright-right{
    display: flex;
}
.copyright-right dl{
    margin-left: 130px;
}
.copyright dt{
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 23px;
}
.copyright dd{
    font-size: 14px;
    line-height: 24px;
    color: #666;
}

二、底部版权（2）

HTML

        <footer>
            <div class="wrapper">
<!--                服务-->
                <div class="service">
                    <ul>
<!--                        为什么用标题标签而不用span标签，
                            原因是因为h5标签是一个块级标签可以修改宽高，
                            而span不能故还要先转为block程序麻烦，所以使用h5。-->
                        <li><h5 class="pic1"></h5><p>价格亲民</p></li>
                        <li><h5 class="pic2"></h5><p>物流快捷</p></li>
                        <li><h5 class="pic3"></h5><p>品质新鲜</p></li>
                        <li><h5 class="pic4"></h5><p>售后无忧</p></li>
                    </ul>
                </div>
<!--                帮助中心-->
                <div class="help">
                    <div class="f_left">
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href="#">购物流程</a></dd>
                            <dd><a href="#">支付方式</a></dd>
                            <dd><a href="#">售后规则</a></dd>
                        </dl>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href="#">购物流程</a></dd>
                            <dd><a href="#">支付方式</a></dd>
                            <dd><a href="#">售后规则</a></dd>
                        </dl>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href="#">购物流程</a></dd>
                            <dd><a href="#">支付方式</a></dd>
                            <dd><a href="#">售后规则</a></dd>
                        </dl>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href="#">购物流程</a></dd>
                            <dd><a href="#">支付方式</a></dd>
                            <dd><a href="#">售后规则</a></dd>
                        </dl>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href="#">在线客服<span class="iconfont icon-Icon_customerservice"></span></a></dd>
                            <dd><a href="#">客服电话 400-0000-000</a></dd>
                            <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
                        </dl>
                    </div>
                    <div class="f_right">
                        <ul>
                            <li>
                                <img src="/images/wechat.png">
                                <p>微信公众号</p>
                            </li>
                            <li>
                                <img src="/images/app.png">
                                <p>APP下载二维码</p>
                            </li>
                        </ul>
                    </div>

                </div>
<!--                    版权-->
                <div class="copyright">
<!--                    <ul>-->
<!--                        <li><a href="#">关于我们</a></li>-->
<!--                        <li><a href="#">帮助中心</a></li>-->
<!--                        <li><a href="#">售后服务</a></li>-->
<!--                        <li><a href="#">配送与验收</a></li>-->
<!--                        <li><a href="#">商务合作</a></li>-->
<!--                        <li><a href="#">搜索推荐</a></li>-->
<!--                        <li><a href="#">友情链接</a></li>-->
<!--                    </ul>-->
                    
<!--                    因为最后版权模块不需要提升百度搜索排名，所以直接用p便签嵌套即可-->
                    <p>
                        <a href="#">关于我们</a>|
                        <a href="#">帮助中心</a>|
                        <a href="#">售后服务</a>|
                        <a href="#">配送与验收</a>|
                        <a href="#">商务合作</a>|
                        <a href="#">搜索推荐</a>|
                        <a href="#">友情链接</a>|
                    </p>
                    <p>CopyRight © 小兔鲜</p>
                </div>
            </div>
</footer>

CSS

/*底部*/
footer{
    height: 582px;
    background-color: #F5F5F5;
}
footer .wrapper{
    margin-top: 40px;
}
/*服务*/
.service{
    height: 178px;
    border-bottom: 1px solid #E8E8E8;
}
.service ul{
    display: flex;
    justify-content: space-evenly;
    padding: 60px 0;
    font-size: 28px;
}
.service li span{
    height: 58px;
    width: 58px;
    background-image: url("../images/sprite.png");
}
.service ul li{
    display: flex;
    /*让底部四个图片和四个大字都居中*/
    line-height: 58px;
}
footer .help {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    height: 303px;
    /*background-color: #5EB69C;*/
}
footer .help .f_left{
    display: flex;

}
footer .help .f_left dl{
    margin-right: 84px;
}
footer .help .f_left dt{
    margin-bottom: 30px;
    font-size: 18px;
}
footer .help .f_left a{
    font-size: 16px;
    color: #969696;
}
.help .f_left a span{
    margin-left: 5px;
    color: #00BE9A;
}
.help .f_right ul{
    display: flex;
    text-align: center;
}
.help .f_right li:first-child{
    margin-right: 55px;
}
.help .f_right ul img{
    margin-bottom: 10px;
    width: 120px;
    height: 120px;
}

/*版权*/
.copyright{
    text-align: center;
    font-size: 16px;
    color: #A1A1A1;
}
/*.copyright ul{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    margin-bottom: 10px;*/
/*}*/
/*.copyright ul li a{*/
/*    padding: 0 10px;*/
/*    border-right: 1px solid #A1A1A1;*/
/*    font-size: 16px;*/
/*    color: #A1A1A1;*/
/*}*/
.copyright p{
    margin-bottom: 10px;
}
.copyright p a{
    margin: 0 10px;
    font-size: 16px;
    color: #A1A1A1;
}