成都CSS設(shè)計(jì)中的黃金分割率應(yīng)用

希臘Web 設(shè)計(jì)師Christos Chiotis 發(fā)表在 CssGlobe 的一篇文章，講述了黃金分割率在 CSS 中的應(yīng)用。黃金分割率是一個(gè)應(yīng)用廣泛的數(shù)學(xué)常數(shù)，大約為 1.6180339887。黃金分割率用在 Web 設(shè)計(jì)中，可以為設(shè)計(jì)帶來(lái)更多視覺(jué)上的和諧。

在一個(gè)簡(jiǎn)單的兩欄式頁(yè)面布局中，使用兩個(gè)容器，第一個(gè)容器用來(lái)顯示主要內(nèi)容，第二個(gè)容器顯示側(cè)條。比如，頁(yè)面寬度為 960 px，使用黃金分割率，主內(nèi)容容器的寬度應(yīng)該為 960 / 1.62 = 593 px，而側(cè)條的寬度為 960-593=367 px。

作者建議，在 Web 排版與布局中可以使用以下基本 CSS 設(shè)置

line-height = font-size * 1.62

paragraph margin = paragraph line-height * 1.62 / 2

header’s margin-top = headers line-height * 1.62

不過(guò)對(duì)中文而言，至少 font-size 和 line-height 之間使用黃金分割率是不適合的，假如中文字體使用 12px 的話，好行高是 22px，如果字體使用 14px 的話，行高應(yīng)該使用 24px 。

另一個(gè)例子，在表單中，輸入框的寬度應(yīng)該是標(biāo)簽文字的寬度乘以 1.62。而對(duì)于顯示在 Web 上矩形來(lái)說(shuō)，它的寬度應(yīng)該是高度乘以 1.62。

這樣一來(lái)，Web 設(shè)計(jì)師同時(shí)需要很好的計(jì)算能力，至少要在旁邊放一臺(tái)計(jì)算器，為了節(jié)省時(shí)間，作者建議在設(shè)計(jì)中隨時(shí)記住一個(gè) 62/38 原則，在任何需要分割的地方，都使用 62% 和 38% 作比例。

對(duì)于需要分割成三份的場(chǎng)合，可以先按 62%，38%原則分成兩份，再將那份大的按 62% 和 38% 的比例分割。（來(lái)源：cssglobe.com翻譯：OMSHARP CMS）

文章題目：成都CSS設(shè)計(jì)中的黃金分割率應(yīng)用
URL網(wǎng)址：http://muchs.cn/news/238604.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、靜態(tài)網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)