天书笔记：如何创建一个现代的footer（页脚）

此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记

老规矩，效果图

这个布局也是从b站看到的，回来自己实现了一遍

HTML：

<div class="foot">
  <div class="footbody">
    <div class="itembox">
        <span class="box_itemtitle">链接块标题</span>
        <ul class="box_itemlist">
            <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>
    </div>

        <div class="itembox">
        <span class="box_itemtitle">链接块标题</span>
        <ul class="box_itemlist">
            <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>
    </div>

        <div class="itembox">
        <span class="box_itemtitle">链接块标题</span>
        <ul class="box_itemlist">
            <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>
    </div>

  </div>
</div>

CSS：

 .foot{
     width:100%;
     background-image: linear-gradient(-180deg,#E4AE8D,#E4B071);
     color:#fff;
     height: 173px;
 }
 .footbody{
     margin:0 auto;
     width:960px;
     padding:20px 0px 20px 0px;

 }
 .itembox{

     margin-left:60px;
     height: 100%;
     float:left;
     height:100%;
 }
 .box_itemtitle{
     font-size:16px;
     display:block;
     padding-bottom: 5px;
 }
 .box_itemlist{
     list-style: none;
     display:block;
     padding-left:5px;
     font-size: 14px;
     line-height: 22px;
 }
 .box_itemlist a{
     text-decoration: none;
     color:#FFF;
 }

具体思路：

首先需要创建一个footer层，宽度设为100%，然后和昨天创建topbar（顶部导航）一样如法炮制一个footbody，同样用margin居中法再设定一个宽度。

.foot{
    width:100%;
    background-image:背景;
    color:#fff;
    height: 173px;
}
.footbody{
    margin:0 auto;
    width:960px;
    padding:20px 0px 20px 0px;
}

然后就是itembox了。itembox的关键在于如何让这几个itembox在一排显示。我最开始用的是display:inline-block这条CSS，但是用完发现效果不好，加完每个块都跑下面去了。于是我又邪恶的F12了A站，发现其实让这几个DIV在一排显示直接用这两条CSS就好了

 float:left;
 height:100%;

第一行浮动，第二行高度100%（防止它向下跑）

上面一个span作为标题，下面ul做列表，ul做列表的css我在昨天的博文里讲过了，但再贴一遍又不会怀孕。。。

 .box_itemlist{
     list-style: none;
     display:block;
     padding-left:5px;
     font-size: 14px;
     line-height: 22px;
 }

关键在于第二行和第三行，第二行去掉ul前面那个点，第三行让ul整体变成一个块使下面的padding可以生效，就是这样

然后就没有然后了，另外我感觉博客园的编辑器还可以

此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记