網頁設計grid_網上下的模板好多都有gridcss這個css文件

1、為什麼網頁設計要使用柵格化

研究網頁柵格系統前，來看一組數據：
網站首頁頁面寬度 px
Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網易 960
Live Search 958
搜狐 950
優酷 960
AOL 960

上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結構較復雜，都可以認為是門戶型網站。

再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什麼固定規律，共同的特點是：功能專一，頁面結構相對簡單。

根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.

這是一件很有趣的事情，為什麼要選擇這個寬度呢？這個寬度值究竟有什麼魔力？
神奇的960

設計師們對蘋果情有獨衷。在 1024 x 768 的解析度下，打開Firefox：

自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.

有趣的960就這樣出現了。是的，可以認為一切就這么簡單。柵格系統最早出現在平面設計領域，設計師們愛用蘋果，蘋果下瀏覽器的默認寬度為960px, 於是960就這么「自然」地出現了。
數字背後的奧妙

上面的「自然」出現，細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什麼1000之類的整數，自然另有奧妙。

科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：

960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種（26 = 7 * 2 * 2 - 2, 減去2是去掉1和960自身），我們標記為：

N(960) = N(2^6 * 3 * 5) = 26

根據上面的演算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

根據直覺（嚴格證明也不難，不過還是留給數學系的學生去證明吧），我們得到一個有趣的結論：

要使得N(width)最大，width的取值有兩個系列：
A系列： …, 320, 720, 1440, …
B系列： …, 480, 960, 1920, …

N越大，可組合的寬度值就越多。對柵格系統來說，這意味著越靈活！

目前絕大多數顯示器都支持 1024 x 768 及其以上解析度。為了有效的利用屏幕寬度同時保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網頁柵格系統中的最佳寬度了。（也許不久的將來，將會流行1440）首先澄清一個應用場景問題。研究(1)中指出，對於結構復雜的網站，不少設計師們喜歡採用960固定寬度布局。但要注意的是，960並不是萬能鑰匙，大部分網站沒有也不需要柵格系統。Amazon採用的是寬度自適應布局，最大限度的呈現信息。Google更是簡簡單單，主題部分就一個列表。eBay的頁面非常簡潔，商品頁面寬度自適應，信息自然流暢，噪音少，購物很踏實。類似的站點還有很多，對於這些站點來說，寬度自適應布局更受青睞。
有個很有意思的網站是Yahoo!, 看起來是固定寬度布局，實際上在CSS中只要去掉一行，就能搖身一變自適應寬度了：
以下為引用的內容：
#page { width: 70em;}
為什麼Yahoo!最後選擇了定寬布局呢?這很可能是因為定寬布局比寬度自適應布局更容易控制。對於結構復雜的網站來說，可維護性和可擴展性非常重要。Yahoo!是以信息展示為主的門戶型網站，960的寬度對於信息的閱讀比較友善(Joe Clark寫了一篇屏幕閱讀時有關行長的有趣文章)。種種因素使得Yahoo!最後採用了定寬布局(Tommy Olsson總結了每種布局設計的優缺點)。
這里將只關註定寬布局，適用的場景是搭建復雜的門戶型網站。對於寬度自適應布局和相應的柵格系統，暫不討論(根據實現的技術手段不同，寬度自適應布局又分為流體布局和彈性布局。我個人蠻喜歡彈性布局，以後有時間再研究)。
好了，已經將范圍縮小到定寬布局的網頁柵格系統，那我們開始吧。
並不遙遠的750

還記得800×600的顯示器不?雖然才時隔幾年，感覺卻好像是上個世紀的事了。Mark Boulton做了最早的探索：

將750分割成均等的6份，這就形成了柵格系統，稍加組合劃分就形成了兩欄布局和三欄布局。Mark Boulton還研究了Gutter(垂直欄之間的間隙)對柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細闡述。
幾個術語和一個公式
一個標準的柵格系統，包括以下部分：

將Flowline的總寬度標記為W, Column的寬度標記為c, Gutter寬度標記為g, Margin的寬度標記為m, Column的個數標記為N, 我們可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
一般來說，Gutter的寬度是Margin的兩倍，上面的公式可以簡化為：
W = c * N + g * (N - 1) + g = (c + g) * N
將c+g標記為C, 公式變得非常簡單：
W = C * N
上面的公式就是柵格系統的基礎，很簡單吧。
950的來歷
具體應用時，Margin其實是一個空白邊，從視覺上看並不屬於總寬度。不少柵格設計里習慣性地設定Gutter為10px, 這樣Margin就是5px. 當W為960，分割成6列時，柵格如下圖：

上圖的處理是左右Margin各為5px. 也可以將Margin集中放在一邊，比如右邊：

無論Margin放在何處(這隻影響技術實現，不影響設計)，我們真正要關注的是去除Margin之後的部分：

這就是我們要真正關注的950!將W的含義變為去除Margin的總寬度，公式變化為：
W = N * C - g
將上面的公式實例化一下：
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10
這就形成了960蛋糕的三種常見切法。
12 x 80

16 x 60

24 x 40

上面三種切法，N越大，靈活度越高。可以根據網頁的實際復雜度來選用對應的切法。在960 Grid System首頁中，展示了12 x 80的應用：

我們來看下研究(1)中開頭列舉的網站的柵格應用情況。
Yahoo!是很標準的 24 x 40 柵格：

淘寶網目前只有商城上部分使用了柵格系統(大的兩欄布局遵守了 24 x 40 的柵格化，主體部分使用的另一套740的柵格劃分)：

網易很不錯，採用的是 16 x 60 的柵格系統：

研究(1)中的其它站點都沒有真正嚴格地採用柵格系統。
柵格系統的優勢
上面的「發現」是讓人有點沮喪的。目前嚴格採用柵格系統的站點非常少，為什麼我們還要努力的讓網頁柵格化呢?
柵格系統具有以下優勢：
能大大提高網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的。這對於大型網站的開發和維護來說，能節約不少成本。
基於柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。
對於設計師們來說，靈活地運用柵格系統，能做出很多優秀和獨特的設計。(詳見《超越CSS》一書)
對於大型網站來說，我相信柵格化將是一種潮流和趨勢。
下面討論柵格系統中的黃金分割。
黃金分割
黃金分割可以歸結為數學問題：對於長度為1的線段，將其分成兩部分 x 和 1 - x, 使得：
x / 1 = (1 - x) / x
化為簡單的二次方程：
x^2 + x - 1 = 0
正數解為：
x = (sqrt(5) - 1) / 2 ~= 0.618
這就是黃金分割。這個比例不僅僅出現在諸如繪畫、雕塑、音樂、建築等藝術領域，在管理、工程設計等方面也有著不可忽視的作用。 (這是個自然界的魔數，類似的還有真空光速、普朗克常數、精細結構等等，感興趣的Google吧)
在平面設計領域，黃金分割點被廣泛採用。比如下面這種圖：

數一數上面有多少黃金分割?
對於960柵格，實際寬度是950. 兩欄布局時，黃金分割為：

對於 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數比例為 9 : 15. 但實際使用時，因為窄欄經常用來做導航或放輔助信息，並不需要350px這么寬。因此實際情況下經常被採用的布局是：

上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應用。
高度方向上的柵格
還記得研究(1)中那張紅紅的很刺眼的圖嗎?注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比較大，同時可以讓高寬比接近黃金分割。針對560, 我們採用 14 x 40 柵格：

這樣，我們就在寬度和高度兩個方向上都實現了柵格化。
淘寶的首頁目前尚未嚴格遵守柵格系統，如果重構的話，寬度方向可以考慮採用下面的柵格布局（只考慮頁面主體部分，忽略高度的比例）：

（圖1）
紛亂的高度世界我們來看下圖1左上角。左上角部分目前的寬度為256px, 重構的話可以將寬度縮小到230px以符合柵格（不可避免的要調整內容，比如人氣寶貝中將只能放下3張圖片）。來仔細看下高度方向：

（圖2）
高度方向的布局是：90 : 117 : 100, 第一個間隔是8, 總高度為325. 很明顯，高度方向沒有任何柵格化的跡象。實際上，即便是嚴格遵守柵格系統的Yahoo!首頁，高度方向上也沒有嚴格柵格化。
這究竟是為何？
一切皆有可能我們縮小關注點：

（圖3）
上圖中，圖像的大小是70 x 70, 剛好是24列960柵格系統兩列的寬度。對於右邊的文字，採取了如下樣式：font-size: 12px;line-height: 150%; /* 12 x 150% = 18px */
中文字體是宋體，line-height的計算值是18px. 注意圖3中文字部分可視區域的高度為65, 上下各有4px和1px的間隙。為什麼會產生這么奇怪的間隙呢？我們來看下圖：

（圖4）
從上圖中我們可以得知，12px的宋體中文字，實際高度只有11px. line-height減去11多出來的高度，則「均勻」分布在上下間隙中（如果多出來的高度為偶數，則上下均分；為奇數時，上面比下面多1px）。這樣，對於70px的高度來說，要布局4行文字時，假設行高多出來的上半部分為x, 下半部分為y, 在最理想的情況下，應該滿足以下公式：11 * 4 + 4 * x + 3 * y = 70x = y 或 x = y + 1
不難推出，x最理想的整數解為4. 從而line-height為 4 + 11 + 3 = 18. 因此：
對於24列960柵格系統來說，如果要在高度方向上實現柵格，font-size為12px時，line-height的最佳取值是18px(150%).
追求完美點話，還可以將文字部分margin-top: -1px, 使得65上下的間隙為3和2.
至此，我們可以初步判斷：
高度方向上是有可能嚴格柵格化的。一切皆有可能！
然而，現實總那麼殘酷
（圖5）
上圖中的標題高度為22, 這在24列960柵格系統中是無法對齊的。而且總高度為100, 在24列960柵格系統中也不存在（110才可以）。或許高度方向上我們可以細化行寬為20, 但依舊沒法解決上面兩個問題（22是明顯不能解決的，而對於100px的高度，也無法通過細化行寬來解決。可選高度永遠是10的奇數倍，如果進一步細化，小於10後，會變得非常繁瑣，沒什麼實際應用價值）寬度世界裡會好些嗎
（圖6）
上面是Yahoo!首頁上的兩個小模塊，我都不想去標注模塊裡面的布局寬度了（因為一點都不符合24列960柵格系統）。寬度世界裡，和高度世界一樣充滿希望但現實卻殘酷無比。銀彈是不存在的柵格系統是美好的。但如果我們一味地追求將所有設計都柵格化（必須承認我曾有這個幻想），則立刻會陷入地獄一般的黑暗中。這篇文章中的艱難嘗試（我分析了20多個小模塊），讓我突然醒悟到一個粒度問題：任何設計都有適用范圍，超出最佳適用范圍，強行使用只會帶來無盡的煩惱。對於柵格系統（這里指所有柵格系統，包括多種柵格系統混合使用的情景）來說，我覺得以下場景非常適合：

頁面的總體寬度布局，比如兩欄、三欄等布局
一些固定區塊的尺寸，比如廣告圖片的尺寸
區塊之間的間距，可以參考柵格系統的槽寬（Gutter）
一些可以柵格化的小區域，比如圖3中的例子，暗合柵格往往能簡化布局上的考慮
除了上面這些應用場景，強行使用柵格系統，往往會束手束腳，適得其反。這篇文章的目的，就是嘗試用最啰嗦最費神貌似很科學實際很無聊的分析來指出柵格系統應用時的粒度問題。在粒度問題上達成一致後，下一篇中我們將討論柵格系統的技術實現，最後一篇則討論柵格系統的壓軸好戲：模塊化開發。
前三篇文章中，明確了柵格系統的設計細節和適用范圍。這一篇將集中討論960柵格系統的技術實現。
Blueprint的實現Blueprint是一個完整的CSS框架，柵格系統是它的一部分功能。我們來看demo頁面：

以上三欄布局的代碼為：<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>
上面是基本功能，Blueprint還支持append-n, prepend-m, border等「高級」功能，這些就不細說了

2、C#調用使用Grid++Report設計的模板列印出來的頁面大小與設計時的大小不符

你用的什麼列印機

出現字體超大或過小一般都是由於列印機驅動程序與用友軟體不匹配

建議更換列印機驅動

比如針式列印機可以使用 EPSON 1600K

3、網上下的模板好多都有grid.css這個css文件,這拿幹啥用的

這是一種柵格布局系統；關鍵詞柵格化布局
比如一般把網頁分為12份
grid_1 -grid_12 每一格分別設置好寬度間距等，此處寬度也可以用百分比替代
這樣的話就不用重復的去計算每一塊的寬度等，當然前提是設計的時候也需要使用這樣的思路
參考資料
www.3lian.com/e/2012/09-05/36001.html
www.linuxnote.org/css-grid-maker.php

4、如何在網站設計中運用柵格系統

柵格系統英文為「grid systems」，也有人翻譯為「網格系統」，其實是一回事。不過從定義上說，柵格更為准確些。
柵格設計系統（又稱網格設計系統），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，在二戰後大受歡迎，已成為今日出版物設計的主流風格之一。

5、網頁柵格化是什麼啊？誰有這方面的教程？

6、靜態網頁設計製作中的布局模式

一、靜態布局（Static Layout）

即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。

1、布局特點：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。

2、設計方法：

PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。

在移動端開發中採用靜態布局的兩種方式：

（1）在viewport meta標簽上設置width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發-web app 變革之rem）

（2）設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。

優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。

缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

1、布局特點：屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】

2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。

三、自適應布局（Adaptive Layout）

自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。改變屏幕解析度可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。

1、布局特點：屏幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。

2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。

四、響應式布局（Responsive Layout）

隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕解析度范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

響應式幾乎已經成為優秀頁面布局的標准。

1、布局特點：每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。

2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。

7、前端未來頁面布局發展方向是 Flexbox 還是 Grid

　1、flex
Apache基金會今天發布了Flex 4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本。

需要注意的是，Flex目前還在孵化階段，還不是Apache的正式項目，Flex 4.8也不是一個正式的Apache版本。

Apache稱，該版本標志著Flex新時代的開始，Flex的未來將由社區來驅動，而不是由一個公司驅動。開發者可以通過貢獻代碼，來幫助改進Flex，如修復bug、增加功能等。
從Macromedia賣給Adobe，然後又捐給apache，不知道搞什麼名堂。不過還好沒有經過大幅重構，否則就真的是悲哀了！

2、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。

華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！

3、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。

但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！

4、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQuery MiniUI - 快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。

界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！

5、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。

功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！

6、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。

畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！

7、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！

8、YUI
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫，為了能建立一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證，基本上沒怎麼研究過！

YUI Compressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！

9、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個項目合並而成的一個新項目。

大公司的框架，並且是幾樣庫的強強聯合，值得推薦！

10、Dojo
在國內應用好像不是很廣，不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。

有多個基金會的支持，包括IBM和SUN，都是軟體界的泰斗，值得信賴！

11、ZK
ZK是一套以 AJAX/XUL/Java 為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。 ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以及以 XML 為基礎的使用介面設計語言 ZK User-interfaces Markup Language (ZUML)。
在線的demo

設計器的demo

日歷組件

功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！

12、OperaMasks-UI
OperaMasks-UI是OperaMasks團隊 2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端 JavaScript UI組件庫。目前，該團隊已將這一產品以LGPL 開源協議開放給社區。

文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！

13、JavaFX
Sun公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用 JavaFX 編程語言開發富互聯網應用程序(RIA)。JavaFX Script 編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative, statically typed(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用Java API的能力。因為 JavaFX Script是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序變為可能。

不管用的人多少，畢竟是從sun開始，現在是oracle，相信會有一個廣闊的市場，但是確實不知道有哪個公司用這個框架開發！

8、網頁柵格系統是什麼？我們必須遵循它嗎？

為什麼設計師們都不約而同的採用幾乎相同的布局尺寸呢？這不是巧合，而是遵循著一個規律——柵格系統。柵格系統英文為「grid systems」，也有人翻譯為「網格系統」，其實是一回事。不過從定義上說，柵格更為准確些，從維基百科查到柵格的定義為：柵格設計系統（又稱網格設計系統、標准尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，在二戰後大受歡迎，已成為今日出版物設計的主流風格之一。如今，柵格系統也已經被運用到網頁中。它以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。柵格系統的原理和應用柵格系統的計算公式：

9、如何進行自適應網頁設計

做網站讓頁面自適應大小方法代碼如下：

一、電腦站設置網站自適應方法

全屏寬度主要在於CSS代碼中，將width為100%，而不是一個固定的像素值，代碼如下。

手機網設置網自適應方法：

在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解釋：

10、關於網頁設計的問題，如下：

1、在網頁代碼的頭部，加入一行viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
注意：該方式不支持IE8及IE8以下的版本
2、不使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。對圖像來說也是這樣。
具體說，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度： width: xx%; 或者 width:auto;
3、使用相對大小的字體
字體也不能使用絕對大小（px），只能使用相對大小（em或者rem）
例如： body
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素（1em=16px）。
h1
h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）
將想要的像素去除默認的16像素可以得到em
4、流動布局（fluid grid）
"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main
.leftBar
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
5、媒體查詢器@media
"自適應網頁設計"的核心，就是CSS3引入的MediaQuery模塊。
它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
總而言之，自適應屏幕是在底層實現的。
希望可以幫到你~~希望採納謝謝

導航:首頁 > 萬維百科 > 網頁設計grid

網頁設計grid

與網頁設計grid相關的知識