用css網站布局之十步實錄！（九）

2020-03-24 19:28:26

字體：大中小

來源：轉載

供稿：網友

導航條之所以放在第九步講，是因為導航條制作是本教程中最難的部分，自然也是技術含量最高的地方.導航條的制作可易可難，但這里介紹的相對較難，您能堅持到這一步已經很不易，如果你只是有個導航條就滿足的話，請參看第八步的副導航條的制作。
先去掉導航條的紅色背景，還有就是移除html文件中main-nav層的 > 我們實現導航條的動態效果如下圖所示：（GIF動畫）在網頁顯示的只是圖中紅框標出的部分，如果把每幅圖分為上，中，下三部分的話，未發生動作時顯示上部，當光標懸停時，顯示的是中部，被選擇時則顯示下部。
接下來進入css代碼部分，先往css文件中寫入：Example Source Code
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav ul { margin: 0; padding: 0; }
注意：/* Main Navigation */為增加css文件可讀性的說明，不會影響表現。
#main-nav的height屬性定義了main-nav層的高度； #main-nav ul 則定義main-nav層中列表的屬性，在這里先定義其margin和padding為0。
根據先前的設計，導航條應該和左邊有一定的距離，這就需要設置main-nav層的左邊距(padding-left)為11px,但由于IE5和Mac瀏覽器的BUG，需要加入以下代碼：Example Source Code
/* IE5 Mac Hack /*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
現在你可以看到導航列表距左邊有11px的距離，但是列表項目是豎排的，將 li ，即列表項目向左對齊就能使其從左到右橫向排列：Example Source Code
#main-nav li { float: left; }
為了使列表項目的尺寸和容納它的層保持一致，并利用浮動屬性使列表項目的文本隱藏，寫入：Example Source Code
#main-nav li a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
接著，要實現當光標懸停于列表項目上時，顯示背景圖片的中部，因此需要將背景圖片向上移動50px，寫入：Example Source Code
#main-nav li a:hover {
background-position: 0 -50px;
}
給各個列表項目設置寬度和背景圖片的路徑：Example Source Code
#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
最后我們要做的就是，當列表項目被選時，顯示背景圖片的下部。為此我們需要增加一些css代碼對原有的css表現作一些修改：Example Source Code
body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}
以上看似龐大的css選擇器可以識別body標簽的類(class)，如html中為：Example Source Code
body > 以上css選擇器就讓li#about,li#about a,的背景向上移動100px，使其顯示背景圖片的下部。
如果我們希望網站頭部背景圖片也根據body標簽的類進行變換，就需修改css的#header為：Example Source Code
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
至此就完成了 About 網頁的制作,依此類推，修改html中body的類為services/portfolio/contact制作相應html文件并分別保存。
在css文件中添加各個網頁相應的頭部背景圖片路徑(如services網頁的頭部背景圖片為services.jpg,在css中添加如下代碼)：Example Source Code
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}
然后用超級鏈接將這些網頁連接起來，就組成了一個網站了本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：css的效率和瀏覽器渲染的速度

下一篇：初學DIV+CSS應該理解HTML標簽的語義_0