2023-02-21 分類: 網(wǎng)站建設(shè)
希臘Web 設(shè)計師Christos Chiotis 發(fā)表在 CssGlobe 的一篇文章,講述了黃金分割率在 CSS 中的應(yīng)用。黃金分割率是一個應(yīng)用廣泛的數(shù)學(xué)常數(shù),大約為 1.6180339887。黃金分割率用在 Web 設(shè)計中,可以為設(shè)計帶來更多視覺上的和諧。
在一個簡單的兩欄式頁面布局中,使用兩個容器,第一個容器用來顯示主要內(nèi)容,第二個容器顯示側(cè)條。比如,頁面寬度為 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
不過對中文而言,至少 font-size 和 line-height 之間使用黃金分割率是不適合的,假如中文字體使用 12px 的話,好行高是 22px,如果字體使用 14px 的話,行高應(yīng)該使用 24px 。
另一個例子,在表單中,輸入框的寬度應(yīng)該是標簽文字的寬度乘以 1.62。而對于顯示在 Web 上矩形來說,它的寬度應(yīng)該是高度乘以 1.62。
這樣一來,Web 設(shè)計師同時需要很好的計算能力,至少要在旁邊放一臺計算器,為了節(jié)省時間,作者建議在設(shè)計中隨時記住一個 62/38 原則,在任何需要分割的地方,都使用 62% 和 38% 作比例。
對于需要分割成三份的場合,可以先按 62%,38%原則分成兩份,再將那份大的按 62% 和 38% 的比例分割。(來源:cssglobe.com翻譯:OMSHARP CMS)
網(wǎng)站欄目:成都CSS設(shè)計中的黃金分割率應(yīng)用
標題鏈接:http://m.rwnh.cn/news4/238604.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、App設(shè)計、外貿(mào)建站、定制網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容