經典背景自適應導覽列布局之我見

一、前言

說起導覽列，幾乎是每個網站必不可少的，也是極為重要的一部分。

開始介紹一下我所認為的一種比較好的自適應導覽列實現。

二、基本的HTML實現

html是一切網頁的基礎，也是最最重要的一部分，它決定了你怎麼寫CSS，JS。這裡可以大概參考我之前寫的一篇，論HTML的主要性。

<ul class="nav cf">                <li><a class="current" href="/"><span>首頁</span></a></li>                <li><a href="/index/jobs"><span>招聘職位</span></a></li>                <li><a href="/index/plan"><span>招聘行程</span></a></li>                <li><a href="/index/history"><span>美團發展史</span></a></li>                <li><a href="/index/people"><span>美團人</span></a></li>                <li><a href="/index/help"><span>常見問題</span></a></li>            </ul>

這裡採用了美團校園招聘的頭部方式。

三、CSS的實現

像上面說的那樣，CSS是建立在HTML的基礎之上的。

.nav { margin-left:352px; font-weight:bold; } .nav li { float:left; padding-left:1px; } .nav a { display:block; position:relative; margin:0 -1px; padding-left:20px; color:#FFF; }.nav span { display:block; padding:42px 20px 18px 0; }.nav .current { cursor:default; }.nav .current,.nav a:hover { z-index:2; text-decoration:none; background:url(i/bg-nav.png) no-repeat 0 0; } .nav .current span,.nav a:hover span { background:url(i/bg-nav.png) no-repeat right 0; }

CSS的主要作用點是在a標籤，之所以造成這樣子的原因是因為可愛的IE6隻有a標籤支援:hover屬性。;)

其中bg-nav.png為一整塊背景圖片。 這裡省去了相關的reset CSS，即需要對應的樣式重設。但我想這是每個公司都基礎的部分，也是都預設包含的部分。

四、其中的亮點地方

1. 選中每一項欄目都不會有跳動的感覺；
2. 選中的一項保持在上方；
3. 精鍊短小的代碼和結構；
4. 其實上面都不是亮點，一切的一切都是為了自適應。;)

五、後話

前端開發可謂知易行難。不一樣的人寫出的代碼會絕然不同。

看處和亮點我覺得還是在html和css的結合。這也是我所認為的。