02 youtube官網網頁版設置中文版式調整寬度和高度(nokiaN97和nokiaN900的詳細比較.港行的比大陸版的好？)

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"> .買粉絲ntainer { margin: 0 買粉絲; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="買粉絲ntainer"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>

上面是基本功能，Blueprint還支持append-n, prepend-m, border等“高級”功能，這些就不細說了

關于百度空間

css設置個性化背景音樂窗口

設置==> 模板設置==>創建新模板==>開始css編輯

在CSS代碼里查找#phx，然后可以找到這一項“#phx{ FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0); WIDTH: 232px; HEIGHT: 240px}”。

然后解釋下每項設置的意思：

Opacity=透明度，可以用0-100之間的數值，數值越低透明度越低。這條是設置播放器中間部分的透明度；FinishOpacity=邊緣的透明度，也是用0-100之間的數值；例如我的播放器設置Opacity=100, FinishOpacity=70，中間沒有透明度，這樣看視頻會很清楚，邊緣透明度設置為70，稍稍有些透明。

另外還可以設置播放器的顏色，在phx{ FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)的后面加入顏色/風格代碼，可以設為默認、gray（灰色）、xray（黑色）、invert（默認色相反）、red、blue、pink等，可以自己改一改看看效果。例如設置成灰色：“#phx{ FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray; WIDTH: 232px; HEIGHT: 240px}”（把gray加入小括號和分號之間），設置成默認就什么都不加就是了。

WIDTH后邊的數字表示播放器的寬度， HEIGHT后邊的數字表示播放器的高度，如果只讓播放器顯示進度條，就是只要把height:240px中的240改成43或者44就可以了。這兩條可以根據自己的喜好隨便調整大小。

Style=2漸變透明效果，可設置為0到3，這個是設置視頻窗口里的，如果你不啟用視頻窗口，這個也不用管它。StartX=20, StartY=40, FinishX=0, FinishY=0我沒有研究明白，可能是坐標。

下面是怎樣設置背景音樂：

1）在“設置”中設置背景音樂：“設置”——“模板設置”——“高級設置”——“自定義模板”—— “內容模塊”——勾選“背景音樂”

2）設定好后，在“主頁”頁面右下方的“背景音樂”欄目點擊“編輯”按鈕，會彈出一個頁面，把要播放的音樂文件地址按照曲目順序填寫到后面的框里面。然后根據自己的喜好選擇“自動播放”，也可同時選擇“循環播放”，最后點擊“確定”按鈕，背景音樂就添加完了。

3）目前背景音樂支持以下格式上傳：MP3、WMA、WMV、MPG、MPEG、AVI、SWF、WAV。

怎樣添加視頻：

在[背景音樂設置]模塊中添加以下格式的 URL 地址：WMV、AVI、MPG、MPEG、SWF。必須選擇 顯示視頻框。

一般的情況，視頻文件的 URL 地址包含后綴名，如： 買粉絲://買粉絲.aimini.買粉絲/p2p-file/sharing/mv/uDBlzI9c2hQCbgS買粉絲syyma7kxUqWpkfNwZk2qFCsas8ywXbDrZ22RKaYCbXbug0w-donttellme.wmv

(Avril Lavigne 的 Don't tell me)

這個 URL 地址的結尾處“.”后面的幾個字母(wmv)是就表示是 WMV 文件格式。像這種包含有后綴名的 URL，直接在[背景音樂設置]添加即可。不過要注意的一點是，應該避免添加有地址引用保護的視頻文件。

有些視頻文件的 URL 地址不包含后綴名，但只要是 Windows Media Player 能播放的視頻文件，也能添加。如：買粉絲://買粉絲.xxxxxx.買粉絲/test買粉絲1 或 買粉絲://買粉絲.xxxxxx.買粉絲/get買粉絲?v=test買粉絲2

具體的操作是：在上面第一個 URL 地址中，沒有“?”符號。那么在添加的時候，需要在 URL 地址后面增加“?fn=1.wmv”這幾個字符，這其中“fn”和“1”的名稱，可以自己更改。。。。在上面第二個 URL 地址中，有“?”符號。那么在添加的時候，需要在 URL 地址后面增加“&fn=1.wmv”這幾個字符。。。。

還有一種視頻格式是大家熟知的 FLV，因為 BAIDU 并不提供 Flv 播放器，所以無法直接播放。當然，天無絕人之路，因為 Windows Media Player 能播放 SWF，所以，只要在添加視頻地址的時候，將 Flv 播放器的地址連同一起添加上去就行。

如：買粉絲://買粉絲.aimini.買粉絲/mv.swf?file=買粉絲://lax-v208.lax.youtube.買粉絲/get_買粉絲?買粉絲_id=EIpKBlTHKSA&fn=1.wmv

上面 URL 地址中 買粉絲://ww

很赞哦!（61）