Question

我想在我的网站上放置4个带文字的矩形

类似的东西（蓝色是指定它们的颜色！

http://imageshack.us/photo/my-images/42/983f.jpg/

并且真正的页脚看起来像这样

http://imageshack.us/photo/my-images/545/aygh.jpg/

灰色区域是链接向下的区域

这是我的

HTML

<div class="footer" id="footer">
    <p>
    <a href="#">About Us</a><span>|</span>
    <a href="#">Terms and Conditions</a><span>|</span>
    <a href="#">Privacy</a><span>|</span>
    <a href="#">FAQ</a><span>|</span>
    <a href="#">Advertise with us</a><span>|</span>
    <a href="#">Careers</a>
    </p>
</div>

CSS

#footer
{   
    background: rgba(0,0,0,0.5);
    color: White;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    line-height:normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
    font-size: 1em;
    clear: both;
    height: 10%;
}

#footer p {
    position: absolute;
    bottom: 0px;
    margin-left: 600px;

}


#footer a{
    text-align: center;
    color: white;
    position: relative;
    bottom: 0px;
    margin: 20px;
}

#footer span {
    bottom: 5px;
}

我不想更改

    <p>
    <a href="#">About Us</a><span>|</span>
    <a href="#">Terms and Conditions</a><span>|</span>
    <a href="#">Privacy</a><span>|</span>
    <a href="#">FAQ</a><span>|</span>
    <a href="#">Advertise with us</a><span>|</span>
    <a href="#">Careers</a>
    </p>

我想添加另一个包含4个方框的div，其中左侧，中间左侧，中间右侧和右侧

Answer 1

如果您希望链接在页面上水平呈现，则可以应用以下css。

div a
{
    display:inline;
    border:1px solid #000;
    padding:5px;
    margin:auto;
    bottom:0px;
}
.footer{
    position:absolute;
    bottom:0px;
}

删除不需要的<p>标记

您可以根据需要设计其余部分。如果您正在寻找更具体的内容，请使用详细信息更新您的问题

这是一个fiddle

在页脚中放置带有文本的4个框

1 个答案: