Question

网站：wadegarett.com

我正在尝试使用Zurb-Foundation 5来构建类似的网站。 Foundation 5是否有任何可以实现类似格式的类？我找到了＆＃34; section-container＆＃34;在Foundation 4文档中的类，并使用以下代码：

<section id="about" class="section-container">
        <h1>Hello There!</h1>
        <h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h3>
    </section>

它有点工作，但我无法找到基金会5中的部分的任何文档。是否可以使用它？

如何定义每个部分的高度？

如何使用普通的CSS样式来完成？

Answer 1

好的，所以我很好奇地去了我的笔记本电脑，我认为你正在寻找的是基金会的麦哲伦功能：

http://foundation.zurb.com/docs/components/magellan.html

您可以将其与Topbar功能混合使用，并拥有您正在寻找的导航系统。

http://foundation.zurb.com/docs/components/topbar.html

背景效果只是一堆不同颜色（我加拿大哈哈）背景的div。

我们需要为几件事添加100％的高度，导航栏总是必须修复，我们必须添加导航栏高度的填充我们的div。

<html>
<head>
<style>
    .html, .body { height: 100%; } 
    .navigation { position: fixed; top: 0; width: 100%; height: 40px; background: #ccc; }
    .home, .work { background: #fff; }
    .about, .contact { background: #ddd; }
    .wrap { width: 100%; min-height: 100%; padding-top: 40px; }
</style>
</head>
<body>
<div class="navigation">...your sticky nav would go here...</div>
<div class="wrap home">
    <div class="row">
        <div class="small-12 columns">
            <p>Content</p>
        </div>
    </div>
</div>
<div class="wrap about">
    <div class="row">
        <div class="small-12 columns">
            <p>Content</p>
        </div>
    </div>
</div>
<div class=" wrap work">
    <div class="row">
        <div class="small-12 columns">
            <p>Content</p>
        </div>
    </div>
</div>
<div class="wrap contact">
    <div class="row">
        <div class="small-12 columns">
            <p>Content</p>
        </div>
    </div>
</div>
</body>
</html>

如何实现类似于上述网站中的部分（家庭，约会，工作等）背景格式？

1 个答案: