标签：
此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记
老规矩，效果图
这个布局也是从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：
1 .foot{ 2 width:100%; 3 background-image: linear-gradient(-180deg,#E4AE8D,#E4B071); 4 color:#fff; 5 height: 173px; 6 } 7 .footbody{ 8 margin:0 auto; 9 width:960px; 10 padding:20px 0px 20px 0px; 11 12 } 13 .itembox{ 14 15 margin-left:60px; 16 height: 100%; 17 float:left; 18 height:100%; 19 } 20 .box_itemtitle{ 21 font-size:16px; 22 display:block; 23 padding-bottom: 5px; 24 } 25 .box_itemlist{ 26 list-style: none; 27 display:block; 28 padding-left:5px; 29 font-size: 14px; 30 line-height: 22px; 31 } 32 .box_itemlist a{ 33 text-decoration: none; 34 color:#FFF; 35 }
具体思路：
首先需要创建一个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就好了
1 float:left; 2 height:100%;
第一行浮动，第二行高度100%（防止它向下跑）
上面一个span作为标题，下面ul做列表，ul做列表的css我在昨天的博文里讲过了，但再贴一遍又不会怀孕。。。
1 .box_itemlist{ 2 list-style: none; 3 display:block; 4 padding-left:5px; 5 font-size: 14px; 6 line-height: 22px; 7 }
关键在于第二行和第三行，第二行去掉ul前面那个点，第三行让ul整体变成一个块使下面的padding可以生效，就是这样
然后就没有然后了，另外我感觉博客园的编辑器还可以
此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记
标签：
原文地址：http://www.cnblogs.com/techmoe/p/4278031.html
