如何定制Foundation4顶部工具栏
\u5982\u4f55\u5b9a\u5236\u6d6e\u52a8\u5de5\u5177\u6761\u5c24\u5176\u662f\u5728MSDN\u4e0a\uff0c\u4f60\u53ef\u4ee5\u67e5\u9605\u5230\u975e\u5e38\u8be6\u7ec6\u7684\u5185\u5bb9\u3002\u4e3a\u7b80\u5355\u8d77\u89c1\uff0c\u672c\u6587\u8fd9\u91cc\u53ea\u5c06\u9700\u8981\u5b9a\u5236\u7684\u4ee3\u7801\u5217\u51fa\u6765\u3002\u7b2c\u4e00\u6b65\uff1a\u521b\u5efa\u4e00\u4e2aMDI\u5de5\u7a0b\uff0c\u4e00\u8def\u90fd\u9009\u62e9\u9ed8\u8ba4\u9009\u9879\u3002\u7b2c\u4e8c\u6b65\uff1a\u5728 CMainFrame \u7c7b\u7684\u5934\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4e0b\u5217\u65b9\u6cd5\u4ee5\u53ca\u53d8\u91cf\u58f0\u660e\uff1a// Operationspublic: void DockControlBarLeftOf(CToolBar* Bar, CToolBar* LeftOf); protected: // control bar embedded members CToolBar m_wndToolBar1; CToolBar m_wndToolBar2;\u7b2c\u4e09\u6b65\uff1a\u5728 CMainFrame \u7c7b\u5b9e\u73b0\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4e0b\u5217\u65b9\u6cd5\u5b9e\u73b0\uff1avoid CMainFrame::DockControlBarLeftOf(CToolBar* Bar, CToolBar* LeftOf){ CRect rect; DWORD dw; UINT n; // \u8ba9 MFC \u8c03\u6574\u6240\u6709\u6d6e\u52a8\u5de5\u5177\u6761\u7684\u5c3a\u5bf8\uff0c\u4ee5\u4fbfGetWindowRect\u7684\u5230\u51c6\u786e\u7ed3\u679c RecalcLayout(TRUE); LeftOf-GetWindowRect(&rect); rect.OffsetRect(1,0); dw=LeftOf-GetBarStyle(); n = 0; n = (dw&CBRS_ALIGN_TOP) ? AFX_IDW_DOCKBAR_TOP : n; n = (dw&CBRS_ALIGN_BOTTOM && n==0) ? AFX_IDW_DOCKBAR_BOTTOM : n; n = (dw&CBRS_ALIGN_LEFT && n==0) ? AFX_IDW_DOCKBAR_LEFT : n; n = (dw&CBRS_ALIGN_RIGHT && n==0) ? AFX_IDW_DOCKBAR_RIGHT : n; // \u5f53\u77e9\u5f62\u4f7f\u7528\u9ed8\u8ba4\u53c2\u6570\u65f6\uff0cDockControlBar \u5c06\u5728\u5355\u72ec\u7684\u4e00\u884c\u91cc\u6d6e\u52a8\u5de5\u5177\u6761\uff0c // \u901a\u8fc7\u8ba1\u7b97\u77e9\u5f62\u7684\u5927\u5c0f\u6765\u6a21\u62df\u5de5\u5177\u6761\u62d6\u52a8\u5230\u6307\u5b9a\u4f4d\u7f6e\u5b9e\u73b0\u6d6e\u52a8\u3002 DockControlBar(Bar,n,&rect);}\u7b2c\u56db\u6b65\uff1a\u5728 CMainFrame::OnCreate \u4e2d\u521b\u5efa\u5de5\u5177\u6761\uff1aif (!m_wndToolBar1.CreateEx(this, TBSTYLE_FLAT | TBSTYLE_LIST, WS_CHILD | WS_VISIBLE | CBRS_TOP | CBRS_GRIPPER | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) || !m_wndToolBar1.LoadToolBar(IDR_MAINFRAME)) { TRACE0(Failed to create toolbar\n); return -1; // fail to create } if (!m_wndToolBar2.CreateEx(this, TBSTYLE_FLAT | TBSTYLE_LIST, WS_CHILD | WS_VISIBLE | CBRS_TOP | CBRS_GRIPPER | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) || !m_wndToolBar2.LoadToolBar(IDR_WINDOW)) { TRACE0(Failed to create toolbar\n); return -1; // fail to create }\u7528 DockControlBarLeftOf \u8c03\u7528\u4ee3\u66ff DockControlBar\u8c03\u7528\uff1am_wndToolBar1.EnableDocking(CBRS_ALIGN_ANY);m_wndToolBar2.EnableDocking(CBRS_ALIGN_ANY);EnableDocking(CBRS_ALIGN_ANY);DockControlBar(&m_wndToolBar1);DockControlBarLeftOf(&m_wndToolBar2,&m_wndToolBar1);\u7b2c\u4e94\u6b65\uff1a\u8981\u5b9e\u73b0 m_wndToolBar1 \u548c m_wndToolBar2\u7684\u6d6e\u52a8\u3002
\u7528cooldock\u5373\u53ef\u3002
首先我们将需要最新版本的Foundation。解压源码包并且把所有的文件放置在你的工程或者测试目录下。我们将直接使用index.html文件，创建一个style.css样式文件将用来重写顶部工具栏的样式来达到自定义导航栏效果。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。
绛旓細绗竴姝:閫氱敤鏍峰紡濡傛灉浣犺繕娌″仛濂藉噯澶,鍙互鍒涘缓涓涓猚ss鏂囦欢,鍛藉悕涓簊tyle.css骞朵笖鏀剧疆鍒颁笅杞戒笅鏉ョ殑Foundation宸ョ▼涓媍ss鏂囦欢澶逛笅銆備絾鍒繕璁版妸姝ゅ紩鐢ㄥ埌index.html鏂囦欢閲屻傚涓嬩唬鐮佺ず渚: Foundation 4 杩欓噷濡傛灉浣犱笉鎶妔tyle.css鏀剧疆鍦╢oundation.css涓嬮潰,灏嗕笉浼氳鐩栧師鏉ラ《閮ㄥ伐鍏锋爮鐨勬牱寮忋傚緢濂,鎺ヤ笅鏉ユ垜浠涓篽eader銆佸...
绛旓細闅惧害鑲畾鏄湁鐨勶紝鍥犱负ITIL4鏇寸鍚堝疄闄呭伐浣滃満鏅紝瀵逛簬鏃ュ父宸ヤ綔鏇存湁鎸囧鎰忎箟锛屽浜庝粖鍚庤亴涓氬彂灞曞彲浠ュ甫鏉ユ柊鐨勫鏈虹殑
绛旓細1銆侀樋鐜涘凹閬憰鏈濂界殑绮夊簳闃跨帥灏兼煍浜嚜鐒剁矇搴曟恫锛氭煍浜嚜鐒剁矇搴曟恫鏄樋鐜涘凹鐨勬槑鏄熶骇鍝佷箣涓锛屽悓鏃朵篃鏄ソ鑾卞潪閿閲忕涓鐨勭矇搴曟恫銆傝繖娆剧矇搴曟恫鎷ユ湁鏈涓鸿交钖勭殑璐ㄥ湴锛岃兘澶熸弧瓒充换浣曟渶涓烘寫鍓旂殑濡嗛潰瑕佹眰銆備笉鍚屼簬鏅氱矇搴曞彔鍔犲悗灏变細鍙樺緱鍘氶噸锛屾矇闂蜂箖鑷虫悡娉ワ紝鏌斾寒鑷劧绮夊簳娑插彲浠ュ眰灞傚彔鍔狅紝涓庡彟涓や欢闃跨帥灏兼槑鏄熶骇鍝丗LUIDSHEER搴曞...
绛旓細1. "Stand" - Jewel 2. "New soul" - Yael Naim 3. "As I Moved on" - Blue Foundation 4. "Sun Goes Down" - David Jordan 5. "he鈥檚 unbelievable" (radio version)6. "姊﹂噷寮鏄庣鎮夌殑鑺" - 娲惧効涔愬洟 7. "瑗挎父鎭" - 娌堜腹涓 8. "鎮叉洸锛嶉珮杩" - 娌堜腹涓 9. "濂藉ソ鐖" ...
绛旓細1銆乵akeup 鑻盵'meɪkʌp] 缇嶽ˈmekˌʌp]n. 鍖栧 [渚嬪彞]Iwaswearingapurplejumpsuit,highheeledshoes,andlotsof makeup.鎴戠┛鐫绱壊杩炶～瑁ゅ拰楂樿窡闉嬶紝鑴镐笂鎶圭潃鍘氬帤鐨勫寲濡嗗搧 2銆foundation 鑻盵faʊnˈdeɪʃn] 缇嶽faʊnˈde...
绛旓細4.Bible Foundation Index 鍦ｇ粡鍩洪噾浼氱储寮 5.Seed for the sower and bread for the eater 杩欏彞璇濆叏鏂囧涓嬮潰锛氶洦闆粠澶╄岄檷銆佸苟涓嶈繑鍥炪佸嵈婊嬫鼎鍦板湡銆佷娇鍦颁笂鍙戣娊缁撳疄銆佷娇鎾掔鐨勬湁绉嶃佷娇瑕佸悆鐨勬湁绮紟"For as the rain and the snow come down from heaven, And do not return there without ...
绛旓細3銆佺敇鑽夋鍙剁編鐧借ˉ姘寸矇搴 SPF18+++ Licorice Mulberry leaves Whitening Moisturizing Foundation4銆佸绫冲張鐧介湝 MUEMIEYOE White Cream鐢樿崏妗戝彾鎻愬彇鐗╃編鐧借偆鑹茬殑鍔熸晥鏄節閼浗闄呭疄楠屽缁忓巻涓夊勾鐨勭瀛︽垚鏋,浜2010骞村悜鍏ㄥ浗缇庡浼佷笟鎻愪緵鍗婃垚鍝,绉戝銆傚畨鍏,鏁堟灉鏈変繚闅溿傘愬瘑闆嗘粙鍏汇戝瘑闆嗘粙鍏昏倢鑲ゆ湁鏁堥攣浣忔按鍒,浠よ倢鑲ゆ按鐩堝墧閫,缁嗚吇...
绛旓細3.Blue Foundation杩欎釜鏉ヨ嚜涓归害鐨勪箰闃熷甫鏉ョ殑Trip-hop椋庢牸鐨勬瓕<As I Moved On>锛 Trip-hop鏄烦鑸為煶涔愮殑涓绉嶃傚畠鎶奌ip-hop鐨勮妭濂忓彉鎱紝鍔犲叆涓浜涜糠骞荤殑鍏冪礌锛孴rip-hop鏄鎱㈡澘鐨勩佽糠骞荤殑銆佹湁Jazz鎰熻鐨勩佽糠绯婄殑銆佸甫鐐笻ip-hop鑺傚鐨凚reak beat闊充箰銆4.Fleur鏄竴鏀潵鑷箤鍏嬪叞鏁栧痉钀ㄧ殑缁勫悎,鎴愬啗浜2000骞村洓鏈...
绛旓細3銆佺矇搴曪細foundation 4銆 淇楗硷細shading powder 5銆侀殧绂婚湝锛岄槻鏅掞細sun screen/sun block 6銆佹暎绮夛細loose powder 7銆侀棯绮夛細shimmering powder/glitter 8銆佺湁绮: brow powder 9銆佺湁绗旓細brow pencil 10銆佸攪鑶:&#...
绛旓細1銆乵ake up 鑻盵'meɪkʌp] 缇嶽ˈmekˌʌp]n. 鍖栧 [渚嬪彞]I was wearing a purple jumpsuit, high heeled shoes, and lots of makeup.鎴戠┛鐫绱壊杩炶～瑁ゅ拰楂樿窡闉嬶紝鑴镐笂鎶圭潃鍘氬帤鐨勫寲濡嗗搧 2銆foundation 鑻盵faʊnˈdeɪʃn] ...
