列表导航栏实例（02）——精美电子商务网站赏析
出處：http://www.gabbardhatchingeggs.com/
【準備工作】
一、如圖示，創建網站框架：
二、reset.css文件參考內容：
/*YUI的CSS Reset http://baike.baidu.com/view/5186496.htm */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0;margin: 0; } table {border-collapse: collapse;border-spacing: 0; } fieldset, img {border: 0; } address, caption, cite, code, dfn, em, strong, th, var {font-weight: normal;font-style: normal; } ol, ul {list-style: none; } caption, th {text-align: left; } h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%; } q:before, q:after {content: ''; } abbr, acronym {border: 0; }
【說明】
此css reset文件來自http://baike.baidu.com/view/5186496.htm，據說是YUI的CSS Reset，版本不詳，有知道源文件出處的還望不吝賜教。
這個文件，在此處主要起作用的是{padding: 0; margin: 0;}，相當于取代了常用設置*{padding: 0; margin: 0;}。
三、引用圖片
bg-header.jpg
bg-pattern.jpg
?
nav.png
【操作步驟】
一、效果
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/layout.css" rel="stylesheet" type="text/css" /><title>無標題頁</title> </head> <body><div id="header"><ul id="nav"><li><a href="#" id="farm">Our Farm</a></li><li><a href="#" id="blog">The Blog</a></li><li><a href="#" id="shop">Shop</a></li><li><a href="#" id="info">Info & Extras</a></li><li><a href="#" id="contact">Contact Us</a></li></ul></div> </body> </html>【說明】
本實例中，導航欄三個狀態是在lay.css文件中的樣式中，由背景圖片nav.png實現的，列表中的列表項文字并沒有顯示出來，也許會在不支持樣式表的掌上網絡設備中顯示吧。
三、CSS
/*- LET'S GET STARTED! ----------------------------------------------------------------------*/ body {background: url(../images/bg-pattern.jpg);font-family: "adobe-garamond-pro-1" , "adobe-garamond-pro-2" , Georgia, "Times New Roman" , Times, serif;color: #6B5F51;font-size: 14px; }a {text-decoration: none; }a:focus {outline: none; }/*- HEADER ----------------------------------------------------------------------*/ #header {background: transparent url(../images/bg-header.jpg) repeat-x center top;overflow: hidden; }/*- NAV ----------------------------------------------------------------------*/ #nav {width: 847px;height: 112px;margin: 0 auto;z-index: 9999;position: relative;margin-top: 14px; } #nav li {display: inline; } #nav li a {display: block;position: relative;float: left;height: 112px;background: url(../images/nav.png);text-indent: -9999px; } #nav li a#farm {width: 131px;margin-right: 40px; } #nav li a#farm:hover {background-position: left -112px; } #nav li a#farm:active {background-position: left -224px; } #nav li a#blog {background-position: -171px top;width: 131px;margin-right: 41px; } #nav li a#blog:hover {background-position: -171px -112px; } #nav li a#blog:active {background-position: -171px -224px; } #nav li a#shop {background-position: -344px top;width: 164px;margin-right: 33px; } #nav li a#shop:hover {background-position: -344px -112px; } #nav li a#shop:active {background-position: -344px -224px; } #nav li a#info {background-position: -551px top;width: 131px;margin-right: 41px; } #nav li a#info:hover {background-position: -551px -112px; } #nav li a#info:active {background-position: -551px -224px; } #nav li a#contact {background-position: -723px top;width: 130px; } #nav li a#contact:hover {background-position: -723px -112px; } #nav li a#contact:active {background-position: -723px -224px; }【說明】
1、這個樣式表的主要技術是設置background-position屬性，導航條5個鏈接3個狀態共15個圖片都做在了一張高度為3*112=336px的圖片nav.png上，通過設置background-position 屬性，也就是設置背景圖像的起始位置，來截取不同的背景圖片的。這些個起始位置是根據大致的計算，經過調整所得。
2、樣式a，主要是去除連接文字默認的下劃線；
3、樣式a:focus，主要是去除點擊鏈接時，由于獲得焦點，而在鏈接圖片周圍顯示的一個虛線方框；
4、a:active的效果，可以在點擊鏈接時，按住鼠標不放，顯示出來。
?
?
轉載于:https://www.cnblogs.com/WestGarden/archive/2012/09/03/3138330.html
總結
以上是生活随笔為你收集整理的列表导航栏实例（02）——精美电子商务网站赏析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Exchange2010配置实验（七）D
- 下一篇： highcharts图标插件详解一