此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记
老规矩，效果图
这个布局也是从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可以生效，就是这样
然后就没有然后了，另外我感觉博客园的编辑器还可以
此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记