DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 九宮格生成腳本
九宮格生成腳本
編輯:CSS詳解     

GNineBox的2.1版本,支持Opera。

/* =================== GNineBox v2.1 ===============================
GNineBox("jgClass")
GNineBox("類名")

功能說明:
GNineBox是一個生成九宮格的程序。也可用於制作圓角。

版本更新歷史:
v2.1:支持Opera。
v2.0:可通過CSS樣式定義九宮格外框樣式,實現表現跟內容分離。
(已知問題:不支持Opera)

版權信息:
本程序是自由程序,使用請保留本標注。

作者信息:
Ghost Zhang
Email:[email protected]
QQ:22168741
ORG:www.WebReBuild.ORG www.CSSForest.ORG
Blog:http://forest.blogbus.com

使用說明:
只需要通過CSS樣式定義要應該九宮格的class類的公共圖片名稱即可。
例:
定義樣式:.gnb{background:url("gn.gif");}或
.gnb{background-image:url("gn.gif");}
只需要給出圖片名稱前面的公共名即可,如圖片名分別為“gn_tl.gif”、
“gn_tm.gif”、“gn_tr.gif”,只要imgName定義為“gn”。
在頁面最下面加入:<script type="text/Javascript">GNineBox("GNB");</script>

GNineBox的樣式的定義優先級如下:
標簽級樣式,如:<div class="gnb" style="background-image:url(gn.gif)">...</div>
文件級樣式,如:<style type="text/CSS">.gnb{background-image:url(gn.gif)} </style>
外聯樣式,如:<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/CSS" media="screen" />

沒有層級的關系,即.top .gnb{background-image:url(gn.gif)}與.gnb{background-image:url(gn.gif)}是相等的。
在文件級樣式或外聯樣式中,最後的定義會被使用,即:
如果同時定義了.top .gnb{background-image:url(gn.gif)}和.gnb{background-image:url(gn2.gif)}
那麼.gnb{background-image:url(gn2.gif)}會被應用。

注意:Firefox跟Opera對路徑中的空格必須解析為%20。
如果background的image路徑中出現空格,請將其改為%20,以確保路徑能被正確讀取。
如:
background-image:url(http://www.CSSforest.org/trys/gninebox 2.0/bg.gif);
應該寫為:
background-image:url(/School/UploadFiles_7810/201104/20110410213437816.gif);
========================================================================*/

GNineBox 2.1Demo

下載GNineBox v2.1

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved