Foundation 4 默認樣式下載（譯者註：在翻譯此教程期間，Foundation已升級為第5版本。）
導航區間背景圖片
當然，下載完上面提供的背景圖片之後，我們把它放在img文件夾下，準備好了嗎？打開妳最喜歡的編輯器然後讓我們開始吧！
搭起HTML結構
第壹步：常用的模板
index.html文件裏面已經預包含壹些HTML代碼。妳可以保留<header>裏面的代碼，也可以保留所有的腳本（JavaScript）鏈接（放置在</body>標簽之前）。保留這些來確保Foundation的網格系統和頂部工具欄可以運行起來。
妳可以刪掉其他內容代碼，我們將采用壹種全部寬度的設計，這不是很復雜的，只是需要想到更好的辦法來處理它。
好的，我們將編寫header、導航、主內容和footer區域的內容，我們將給每個區域都添加class="full-width",然後再添加壹個塊元素 <div class="row">，塊元素裏面再添加壹個塊元素<div class="large-12 columns">，這也就是搭起基本的網格結構。
備註：更多關於網格系統如何運行的，可以回顧教程第二篇：初學者學習foundation：網格系統
<!-- HEADER AREA -->
<header class="full-width header-area">
<div class="row">
<div class="large-12 columns">
<h2>Foundation-4 Custom Top Bar</h2>
</div>
</div>
</header>
<!-- NAVIGATION AREA -->
<div class="full-width navigation-area">
<div class="row">
<div class="large-12 columns">
<nav class="top-bar"></nav>
</div>
</div>
</div>
<!-- CONTENT AREA -->
<div class="full-width content-area">
<div class="row">
<div class="large-12 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>
</div>
</div>
</div>
<!-- FOOTER AREA -->
<div class="full-width footer-area">
<div class="row">
<div class="large-12 columns">
? 2013
</div>
</div>
</div>
第二步：頂部工具欄標記
在編寫樣式之前，我們需要編寫出壹些必須的HTML結構代碼使得Foundation頂部工具欄能夠正確地運行起來。因此需要5樣基礎元素使得引擎跑起來。
<nav class="top-bar">
<ul class="title-area">
<li class="toggle-topbar"> = 為了增強在手機布局上的菜單。
<section class="top-bar-section">
<ul class="left">和<ul class="right">
現在我們用這5樣基礎元素來搭建基礎框架並且實現功能。
備註：在此教程例子中，我們將創建壹個自定義的導航菜單，因此刪除壹些包括logo、文本和圖片的標題。因此從下面代碼例子可以看到在塊元素<ul class="title-area">裏的<li class="name"></li>裏面是空的。
接著，我們來添加壹些菜單元素和壹個下拉菜單代碼，在妳想添加下拉菜單的li元素裏添加class="has-dropdown"，然後在裏面包含下拉菜單代碼 <ul class="dropdown">...</ul>。如果想表示當前使用狀態的li，則需要添加”active”。<ul class="right"><ul>裏面可以為空的，嵌入代碼中。壹般情況下，妳將會在這個空的ul裏添加壹個按鈕或者搜索欄。更多關於頂部工具欄，可看上壹篇教程：初學者學習foundation：頂部工具欄
如下HTML代碼示例，其中的註釋會幫助妳理解整體是如何運作的。
<!-- Nav Wrap -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<!-- The Section wrap -->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Our products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Prices</a></li>
<li class="has-dropdown">
<a href="#">Features</a>
<ul class="dropdown">
<li><a href="#">Modalboxes</a></li>
<li><a href="#">Submenu's and navigation</a></li>
<li><a href="#">Price tables</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Button groups</a></li>
<li><a href="#">Labels, Keystrokes and Tooltips</a></li>
<li><a href="#">Alert boxes</a></li>
<li><a href="#">Columns</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Right Nav Section -->
<ul class="right"></ul>
</section>
</nav>
第三步：目前效果
現在可以在妳的瀏覽器上看到目前的效果，基於Foundation框架使用頂部工具欄我們已經創建壹個水平菜單。為了方便把菜單放置到其他地方，而不是固定在瀏覽器的頂部，我們需要在以上代碼外層添加網格的<div>。
當妳在調整瀏覽器窗口時，會發現菜單欄在預先設定的斷點發生改變。
接下來著手編寫自定義樣式，將關註如何去編寫頂部工具欄的樣式和可以使用哪些class。
編寫CSS
第壹步：通用樣式
如果妳還沒做好準備，可以創建壹個css文件，命名為style.css並且放置到下載下來的Foundation工程下css文件夾下。但別忘記把此引用到index.html文件裏。如下代碼示例：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Foundation 4</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/custom.modernizr.js"></script>
</head>
這裏如果妳不把style.css放置在foundation.css下面，將不會覆蓋原來頂部工具欄的樣式。
很好，接下來我們要為header、導航、內容和footer寫壹些基礎樣式，如導航塊，我們將添加壹張已經下載好的背景圖。這些通用樣式壹般不是很難去實現的，見如下代碼示例，我們添加壹個class”full-width”到每個區域中，以致於每個區域的寬度都是占滿瀏覽器寬度的。
body {
background-color: #ccc;
}
/** Set the backgrounds for the different sections **/
.header-area {
background-color: #2d465c;
min-height: 160px;
}
.navigation-area {
background-image: url('../img/navigation-container.jpg');
background-repeat: repeat-x;
}
.content-area {
padding: 50px 0 70px 0;
}
.footer-area {
background-color: #1f1f1f;
color: #fff;
min-height: 50px;
padding: 20px 0 0 0;
}
.full-width {
min-width:100%;
position: relative;
}
h2 {
color: #fff;
font-weight: normal;
margin-top: 50px;
}
第二部：頂部工具欄樣式
現在看壹下效果，會發現菜單會往外偏移壹點，原因就是使用默認的樣式，接下來修復這個問題！
有壹些樣式類是需要修改以達到想要的效果。首先，我們將在.top-bar和.top-bar-section li裏移除黑背景，改變height（在導航區域內）和line-height為58px。如下代碼，可看註釋幫助理解。
/** Changes background color, height and margin of the border **/
.top-bar {
background: none;
height: 58px;
line-height: 58px;
margin-bottom: 0;
}
/** Removes black background on menu bar **/
.top-bar-section ul {
background: none;
text-transform: uppercase;
}
/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
background: none;
line-height: 58px;
padding: 0 27px;
}
我們已經移除黑背景了，並且適應高度、行高和內邊距，將文字轉化為大寫字母，這些都是為了適應我們自定義設計。
如果妳進行刷新頁面，可以看到出現雛形了，我們繼續編寫下拉菜單、菜單子項目、激活(active)和鼠標懸空(hover)的狀態的樣式吧。繼續往下看代碼示例，並閱讀註釋：
/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
background: rgb(0, 0, 0);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
color: #fff;
}
/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
color: #fff;
}
/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
color: #2d2d2d;
}
/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}
/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
background: #333;
color: #fff;
}
/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
border-color: rgba(0, 0, 0, 1) transparent transparent;
margin-top: 2.5px;
}
我們已經改變菜單的好幾個地方（樣式），如首先，我們就改變激活（active）菜單默認的黑背景為“CSS漸變”，接著給不激活菜單添加hover狀態，並改變裏面的文字顏色為深灰色，目的是顯示得更為清晰。然後.top-bar-section li:hover 的樣式將使得下拉菜單裏的子項目被鼠標懸空時顯示特定效果。為了完善樣式，我們ul.dropdown添加壹個背景顏色和重新設置下拉菜單箭頭的位置，是因為我們內邊距適應.top-bar-section。