Html 如何实现类似于上述网站的分区（家庭、关于、工作等）背景格式？
网站： 我正在尝试使用Zurb Foundation 5来建立一个类似的网站。基金会5是否有可以实现类似格式的类？我在基础4文档中找到了“节容器”类，并使用了以下代码：Html 如何实现类似于上述网站的分区（家庭、关于、工作等）背景格式？,html,css,zurb-foundation,Html,Css,Zurb Foundation,网站： 我正在尝试使用Zurb Foundation 5来建立一个类似的网站。基金会5是否有可以实现类似格式的类？我在基础4文档中找到了“节容器”类，并使用了以下代码： <section id="about" class="section-container"> <h1>Hello There!</h1> <h3>Pellentesque habitant morbi tristique senectus et ne
<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>
你好！
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。
如何使用常规CSS样式来实现这一点？好吧，我很好奇地去了我的笔记本电脑，我想你想要的是基金会的麦哲伦功能： 你可以把它和他们的顶栏功能结合起来，你就有了你想要的导航系统 背景效果只是一堆不同颜色的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>
.html，.body{高度：100%；}
.navigation{位置：固定；顶部：0；宽度：100%；高度：40px；背景：#ccc；}
.home、.work{背景：#fff；}
.about、.contact{背景：#ddd；}
.wrap{宽度：100%；最小高度：100%；填充顶部：40px；}
…你的粘性导航会在这里。。。
内容
内容
内容
内容