Tad 教材網 - 線上書籍

:::

14. 整合登入及使用者選單

16. 設計模組畫面樣板 next

\[972\]CSS打造XOOPS佈景
===================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/bluefish/15.zip)

### 一、主選單

1.id="mainmenu"（整個主選單）  
 (1) class="menuTop"（第一個選項，通常是回首頁）  
 (2) class="menuMain"（一般主選項）  
 (3) class="menuSub"（次選項）

### 二、使用者選單（若已內建到佈景，則可略過）

1.id="usermenu"（整個使用者選單）  
 (1) class="menuTop"（第一個選項）  
 (2) class="highlight"（有新信時）

### 三、表格框線部份（評論區、「新會員」或「張貼者排行」區塊就會用到）

1.class="outer"（表格外框）  
 2.class="head"（表格頭）  
 3.class="foot"（表格尾）  
 4.class="odd"（奇數列）  
 5.class="even"（偶數列，建議盡量設成有顏色，因為常被拿來當工具列底色）

#### 四、XOOPS基本CSS範例（xoops.css）

1.請在style.css中用「@import url(xoops.css);」引入之。

<table border="0" cellpadding="1" cellspacing="1" width="100%"> <tbody> <tr> <td>\#mainmenu a {  
 display: block;  
 margin: 6px 2px;  
 text-decoration: none;  
 color:rgb(0,51,102);  
 }  
   
 #mainmenu a:hover {  
 background-image: url(images/xx.png);  
 background-position: 0px;  
 background-repeat: no-repeat;  
 color:rgb(255,0,51);  
 }  
   
 #mainmenu a.menuTop {  
 padding-left: 8px;  
 color:rgb(255,51,0);  
 background-image: none;  
 }  
   
 #mainmenu a.menuMain {  
 padding-left: 18px;  
 }  
   
 #mainmenu a.menuSub {  
 padding-left: 36px;  
 color:rgb(0,102,102);  
 }  
   
 #mainmenu a.menuSub:hover {  
 background-position: 18px;  
 }</td> <td>.outer {  
 border: 1px solid silver;  
 border-collapse:collapse;  
 }  
   
 .head {  
 background-color: rgb(153,153,51);  
 padding: 5px;  
 color:rgb(255,255,255);  
 font-weight: bold;  
 }  
   
 .foot {  
 background-color: rgb(153,153,51);  
 padding: 5px;  
 color:rgb(255,255,255);  
 font-weight: bold;  
 }  
   
 .even {  
 background-color: rgb(255,255,255);  
 padding: 5px;  
 }  
   
 .odd {  
 background-color: rgb(225,255,196);  
 padding: 5px;  
 }  
   
 tr.even td {  
 background-color: rgb(255,255,255);  
 padding: 5px;  
 }  
   
 tr.odd td {  
 background-color: rgb(225,255,196);  
 padding: 5px;  
 }</td> </tr> </tbody> </table>

:::