7.5 页脚

页脚非常适合放一些声明之类的信息，比如是谁创建了这个网站，以及一些业务相关的链接，比如免责声明、服务条款、联系信息、隐私政策和版权声明等。下面是页脚的HTML标记。

  1. <footer>
  2.   <p>A CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin'
  3.         with CSS, Third Edition</em></a> by Charles Wyke-Smith</p>
  4.         <nav>
  5.             <ul>
  6.                 <li><a href="#">Privacy Policy</a></li>
  7.                 <li><a href="#">Contact Charles</a></li>
  8.             </ul>
  9.         </nav>
  10. </footer>

下面是它的CSS。

  1. footer {
  2.     padding:.5em 0 .35em 0; /*内容上下的间距*/
  3.     text-align:center; /*居中内容*/
  4.     border-radius:10px 0px 10px 0px; 
  5.     background:#fff;
  6.     box-shadow:0 12px 8px -9px #555;
  7.     }
  8. footer p { /*文本行的样式*/
  9.     font-family:'Source Sans Pro';
  10.     font-weight:400;
  11.     font-size:.85em;
  12.     letter-spacing:-.05em;
  13.     color:#555;
  14.     }
  15. footer p a { /*文本行中的链接*/
  16.     font-family:'Source Sans Pro';
  17.     font-style:italic;
  18.     font-weight:700;
  19.     font-size:1em;
  20.     color:#4eb8ea;
  21.     text-decoration:none;
  22.     }
  23. footer p a:hover {
  24.     color:#777;
  25.     }
  26. footer ul { /*链接列表*/
  27.     display:inline-block; /*收缩包围列表*/
  28.     margin:4px 0 0; 
  29.     }
  30. footer li {
  31.     list-style-type:none; /*去掉默认的项目符号*/
  32.     float:left; /*让列表项水平排列*/
  33.     font-family:"Source Sans Pro";
  34.     font-weight:400;
  35.     font-size:.85em;    
  36.     }
  37. footer li + li a {
  38.     border-left:1px solid #ccc; /*链接分隔线*/
  39.     }
  40. footer li a {
  41.     text-decoration:none; /*去掉链接默认的下划线*/
  42.     color:#aaa;
  43.     padding:0 5px; /*链接间距*/
  44.     }
  45. footer a:hover {
  46.     color:#777;
  47.     }

enter image description here图7-17 包含一个文本元素和一个列表元素的页脚

这一块没有什么新东西，都是你知道的。如图7-17所示，内容通过text-align:center居中对齐，段落及其文本都继承了这一设定，在footer内居中。这个声明正常情况下不会让链接列表居中，因为列表项由块级元素构成，默认会与容器同宽。不过，我给ul设定了display:inline-block，让它收缩包围li元素。这样实际上就相当于为ul指定了宽度，因此text-align:center对它也会起作用。记性好的读者应该知道，在前面介绍菜单的时候，我们解释了应用display:inline-block之后，元素宽度仍然是可变的。换句话说，即使将来再向这个列表中添加链接，或者从中删除链接，列表仍然会居中。最后，再提醒你一下，对列表应用自动外边距（而不对footer应用text-align:center），同样能让它在页脚内居中。