Question

我正在尝试复制this网站的页脚作为学校项目的一部分。到目前为止，我已经发现我的div应该是这样构造的：

new Buffer()

我使用的CSS是：

    <div class="wrapper">
        <div class="top-side">...</div>
        <div class="content">...</div>
        <div class="footer">
            <div class="footer-col">
                <h4>Column header</h4>
                <ul>
                    <li>list item1</li>
                    <li>list item2</li>
                </ul>                    
            </div>
        </div>
    </div>

到目前为止，这是我的整个代码。我无法弄清楚应该将更多内容添加到我的css中，因为这是需要的意思，每列中每个元素的左对齐以及每列的粗体标题。（我用.wrapper .footer { bottom:0; width:100%; margin: 5px; color: #FFFFFF; background-color: black; } .footer .footer-col { display: block; float: left; margin: 0 20px 0 0; width: 20%; } .footer .footer-col ul { list-style: none; display: inline; overflow: hidden; } .wrapper .footer .clear { clear: both; }）

解决了这个问题

任何提示？

Answer 1

如果您想要复制您所说的网站的footer，我认为一个好的方法就是复制类似的HTML结构。

在这种情况下，请使用浏览器检查器检查代码，然后您将查看5组标题h4 + ul列表。

Here's a hint to do it in a JSFiddle I've made.

CSS

.container {overflow: hidden; background: #000; color: #fff; }
.footer-tab { float: left; width: 20%; font-family: Arial; }

ul { padding-left: 0; }
ul li { list-style: none; margin: 10px 0; font-size: 12px; }
ul li a { font-weight: bold;  }

我没有制作所有代码，但我认为，你可以看到一个更好的结构来实现它。

页脚中的列

1 个答案: