【原理 】其實就是用css中Descendant selector的方法，讓某一特定的元素改變style，而決定方法就是為每一頁設定body id。這次例子用的是unorder list <ul>元素，然後將hyperlink都放到<li>裏頭。(當然可以更簡單，不過用ul在結構上更有意義)
首先設定<ul>的list-style-type為none，再設定其下的<li>為block，用float橫排，為了做成在同一頁的效果，我們會用relative positioning降一點點，剛好讓border履蓋下個<div>的頂border。接下來就是放一個div叫content在下面，設定border，內容就放在裏面。
【style sheet 】 為了方便設定和共用，這次用外部的stylesheet，因此不用將代碼插入head裏，請另存新檔(此例是tab.css)，內容如下：
【複製步驟一】
【修改程式碼】- ul 必需設定成margin和padding為0，來履蓋原來的設定。
-
ul 下的 li 設定成block，用float左排，用top 在原來的位置向下移 1px，用來履蓋接下來的 div的 border，這些設定的目標是其他頁的tab。
-
ul 下的 li 下的 a 原素，設定成 block，讓整個tab都是觸動範圍。
-
body#page1 li.page1的意思是：id=page1的body 下面的 class=page1的li ，也就是本頁tab的設定，我們設定底border和背景與之後的div相同。
-
div#content就是放置內容的地方，因為上面是float元素，所以必需設定clear:both避免走位。
【網頁碼 (其中一頁的範例) 】
【複製步驟二】
【複製步驟三】
【修改程式碼】- 因為是外部style sheet，所以要用<link rel="STYLESHEET" href="tab.css" type="text/css">連結。
-
<body id="page1">，當用其他頁的時候請用其他的在style sheet設定好的id，例如是page2時就設定<body id="page2">。
-
每一個 <li>也要設定該連結頁的class，如連結到page1時用<a class="page1">。不過這整個部份的代碼在每一頁也是一樣的，不用更改。
-
然後放上一個div，id是style sheet裏設定好的content
【後話 】這樣就可以做成簡單的tab導覽列，而又不用每頁更改相關的代碼。要加新tab的時候，就在style sheet增加e.g. body#page4 li.page4，將新頁的body設定成id="page4"，再在每個頁面的html加上多一行<li class="page4">......</li>就成。
再進一步就是用include的功能 (如ssi, php)，直接將tab導覽列的碼存成獨立的檔，那麼每次只需更新一個檔，可避免每頁都要更新的工作。
| 
討論
寫信
首頁
今日：490
作者：
立即觀看「tab導覽列」範例
【標記】
【貼上】然後切換到您的網頁，按『Ctrl+V』將剛剛複製的程式碼貼在</head>之前。
