Tad 教材網 - 線上書籍

:::

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

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/bluefish/06.zip)**一、引入網頁檔**  
 1.下載 jquery.js 以及 jquery.inc-5.pack.js，把這兩個檔放到和您的網頁同一目錄。接著，在您網頁的 </head> 前加入以下兩行：  
 **<script type="text/javascript" src="jquery.js">  
 <script type="text/javascript" src="jquery.inc-5.pack.js">**  
 2.在您的網頁，要插入檔案內容的地方，置入以下語法：  
 **<div class="inc:欲引入檔案.html">備註文字</div>**  
 3.您也可以作成互動式的即時產生內容：  
 **<div onclick="$(this).inc('欲引入檔案.html');">秀在畫面的圖文</div>**

**二、分別設定IE、FireFox的外觀（FF在上，IE在下）**  
 1.有些情況下，同一個CSS屬性，在不同瀏覽器中卻有不同的呈現外觀。為了讓各種瀏覽器都有相同外觀，我們可能需要針對各個瀏覽器來設定 CSS。以下是最簡單的設法（順序要對！#在下）：  
 **color: red;**  <font color="#666699">給FireFox用的，因為FF知道#是註解，故不執行下面一行。</font>  
 **<font color="#ff0000">\#</font>color: blue;** <font color="#666699">給IE用的，因為IE看不懂#，所以會傻傻的執行之。</font>  
   
 2.另外也可以用「!important」，而「!important」必須先出現。  
 **color: red <font color="#0000ff">!important</font>;** <font color="#666699">給FireFox用的，因為FF知道!important要優先執行，故不管下面怎麼改都不會執行。</font>  
 **color: blue;** <font color="#666699">給IE用的，因為IE看不懂!important，所以還是會傻傻的執行之。</font>

**三、分別設定IE5、IE6、IE7、FireFox樣式**  
 1.利用IE瀏覽器的專屬功能，可以針對瀏覽器版本不同，執行不同CSS  
 (1)   
 (2)   
 (3)   
 (4)   
 (5)   
 (6)

四、實戰：  
 1.請利用現有文章結構，搭配CSS，做一個空白的網頁樣板，方便日後套用。  
 2.沒有內容的時候，page區塊中的元件會超過page範圍，看起來不好看！如何讓他在沒有內容的時候，可以維持一定高度。而當有內容的時候，又不至於影響其外觀？

<div align="center"> ![](http://tad0616.net/uploads/tad_book3/image/06/01.PNG)</div>↓

<div align="center">![](http://tad0616.net/uploads/tad_book3/image/06/02.PNG)</div>3.提示：使用min-height屬性搭配height，min-height屬性只有FirFox有效，IE無效！如何讓IE也會有「最低高度」的效果？

:::