构建典型的 CSS 页脚的合适代码是什么。方框轮廓只是为了将它们视为一个整体,但不应显示为实心。构建这种结构的简单css框架将不胜感激!
它的一个典型的具体应用是这样的。
我会这样:
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/
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% 等。