[972]CSS打造XOOPS佈景
一、引入網頁檔
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; 給FireFox用的,因為FF知道#是註解,故不執行下面一行。
#color: blue; 給IE用的,因為IE看不懂#,所以會傻傻的執行之。
2.另外也可以用「!important」,而「!important」必須先出現。
color: red !important; 給FireFox用的,因為FF知道!important要優先執行,故不管下面怎麼改都不會執行。
color: blue; 給IE用的,因為IE看不懂!important,所以還是會傻傻的執行之。
三、分別設定IE5、IE6、IE7、FireFox樣式
1.利用IE瀏覽器的專屬功能,可以針對瀏覽器版本不同,執行不同CSS
(1) <!--[if IE]>您用的是 IE 瀏覽器<![endif]-->
(2) <!--[if IE 5]>您用的是 IE 5.x 瀏覽器<![endif]-->
(3) <!--[if IE 5.5]>您用的是 IE 5.5 瀏覽器<![endif]-->
(4) <!--[if lt IE 6]>您用的是 IE < 6.0 瀏覽器<![endif]-->
(5) <!--[if gt IE 6]>您用的是 IE > 6.0 瀏覽器<![endif]-->
(6) <!--[if lte IE 5.5]>您用的是 IE <= 5.5 瀏覽器<![endif]-->
四、實戰:
1.請利用現有文章結構,搭配CSS,做一個空白的網頁樣板,方便日後套用。
2.沒有內容的時候,page區塊中的元件會超過page範圍,看起來不好看!如何讓他在沒有內容的時候,可以維持一定高度。而當有內容的時候,又不至於影響其外觀?
↓
3.提示:使用min-height屬性搭配height,min-height屬性只有FirFox有效,IE無效!如何讓IE也會有「最低高度」的效果?