如何使用基础创建一个页首和页脚,就像基金会网站一样

时间:2014-09-06 15:50:09

标签: css zurb-foundation footer

我是CSS和前端框架的新手。

如何使用基础创建页首,订阅部分和页脚,与基础网站中的类似。

我曾尝试使用基础css ..

<div class="row full-width" id="subsc">
      <div class="large-4 columns">
        </div>
      <div class="large-8 columns">
        <div class="large-5 large-offset-6 columns">
        <label for="right-label" class="right inline">Label</label>
        <input type="text" id="right-label" placeholder="Inline Text Input">
        <a class="button" href=#>Get a Call back !</a>
        </div>
      </div>          
    </div>

1 个答案:

答案 0 :(得分:1)

我相信这就是我们所需要的。

HTML

<footer>
    <div class="top">

    </div>
    <div class="center">

    </div>
    <div class="bottom">

    </div>
</footer>

CSS

footer {
    position: relative;
    width: 100%;
    min-height: 200px;
}

footer .top {
    position: relative;
    width: 100%;
    background-color: #085A78;
    min-height: 50px;
}

footer .center {
    position: relative;
    width: 100%;
    background-color: #074E68;
    min-height: 150px;
}

footer .bottom {
    position: relative;
    width: 100%;
    background-color: #333333;
    min-height: 50px;
}

(从基础复制的颜色) DEMO