css - css 构建一个典型的页脚

Question

构建典型的 CSS 页脚的合适代码是什么。方框轮廓只是为了将它们视为一个整体，但不应显示为实心。构建这种结构的简单css框架将不胜感激！

它的一个典型的具体应用是这样的。

Answer 1

我会这样：

HTML：

<div id="footer">
<div class="footer-content">
    <div class="col"></div>
    <ul>
        <li>link#1</li>
        <li>link#1</li>
        <li>link#1</li>
    </ul>
    <div class="col"></div>
    <ul>
        <li>link#1</li>
        <li>link#1</li>
        <li>link#1</li>
    </ul>
    <div class="col"></div>
    <ul>
        <li>link#1</li>
        <li>link#1</li>
        <li>link#1</li>
    </ul>
</div>

CSS

#footer {
     width:960px;
     background-color:grey;
     height:400px;
 }
 .footer-content {
     width: 800px;
     padding-top:50px;
     margin:0 auto;
 }
 .footer-content ul {
     float:left;
     margin-right: 100px;
     list-style: none;
 }

见演示：http: //jsfiddle.net/KDm9N/1/

Answer 2

HTML：

<div class="footer">
    <div class="row">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="row">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="row">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</div>

CSS：

.footer .row {
    float: left;
    width: 33.3%;
}

JSFiddle：http: //jsfiddle.net/nQpPw/

如果您想要更多行，那么您所要做的就是更改 HTML dom 并增加行宽。对于 4，它将是宽度：25% 等。