網(wǎng)站建設(shè)您當(dāng)前位置: 主頁 > 網(wǎng)絡(luò)學(xué)院 > 網(wǎng)站建設(shè)
CSS 設(shè)計(jì)中的黃金分割率應(yīng)用
發(fā)布日期:2020-11-16 來源:優(yōu)橙 瀏覽量:
摘要: 希臘網(wǎng)頁設(shè)計(jì)師克里斯特斯·希奧蒂斯在CssGlobe上發(fā)表了一篇文章,描述了黃金分割率在CSS中的應(yīng)用 黃金分割率是一個廣泛使用的數(shù)學(xué)常數(shù),約為1.618039887 網(wǎng)頁設(shè)計(jì)中使用的黃金分割率
希臘網(wǎng)頁設(shè)計(jì)師克里斯特斯·希奧蒂斯在CssGlobe上發(fā)表了一篇文章,描述了黃金分割率在CSS中的應(yīng)用 黃金分割率是一個廣泛使用的數(shù)學(xué)常數(shù),約為1.618039887 網(wǎng)頁設(shè)計(jì)中使用的黃金分割率可以給設(shè)計(jì)帶來更多的視覺和諧。
在簡單的兩列頁面布局中,使用兩個容器,第一個容器顯示主要內(nèi)容,第二個容器顯示側(cè)欄 例如,頁面寬度為960像素,使用黃金比例,主內(nèi)容容器的寬度應(yīng)為960/1.62=593像素,而側(cè)欄的寬度應(yīng)為960-593=367像素
作者建議,以下基本CSS設(shè)置
行高=字號* 1.62
paragraph margin=paragraph行高* 1.62/2
可用于網(wǎng)頁布局和布局頁眉的邊距-top=頁眉行高* 1.62
但對于中國人來說,至少字號和行高之間的黃金比例不合適。如果中文字體為12px,最佳行高為22px,如果字體為14px,行高應(yīng)為24px。
作為另一個例子,在表單中,輸入框的寬度應(yīng)該是標(biāo)簽文本的寬度乘以1.62 對于顯示在網(wǎng)上矩形,其寬度應(yīng)為高度乘以1.62
因此,網(wǎng)頁設(shè)計(jì)師在需要良好計(jì)算能力的同時,至少應(yīng)該在他們旁邊放置一個計(jì)算器。為了節(jié)省時間,作者建議在設(shè)計(jì)中隨時牢記62/38原則,在需要分割的任何地方都應(yīng)使用62%和38%。
對于需要分成三部分的場合,可以按照62%和38%的原則分成兩部分,然后大部分可以按照62%和38%的比例進(jìn)行劃分 (資料來源:cssglobe.com譯文:歐姆夏普合作管理系統(tǒng))
福州優(yōu)橙互聯(lián)是一家專注于福州網(wǎng)站建設(shè)的網(wǎng)站制作公司,為客戶提供小程序制作,促進(jìn)福州網(wǎng)絡(luò)的全網(wǎng)推廣和精準(zhǔn)拓客。歡迎訪問http://www.xingfubangke.cn
相關(guān)推薦
網(wǎng)站建設(shè)中必須注意的幾個安全問題2020-08-10
這是營銷網(wǎng)站設(shè)計(jì)中的一個亮點(diǎn)2020-07-18
和漂亮相比實(shí)用性是網(wǎng)站建設(shè)的關(guān)鍵因素2020-10-14
網(wǎng)站建設(shè)中如何修改dedecms系統(tǒng)后臺修改賬號密碼2020-08-10
優(yōu)橙網(wǎng)絡(luò)解密的企業(yè)營銷網(wǎng)站特征2020-12-15
優(yōu)成網(wǎng)的網(wǎng)站轉(zhuǎn)換率這么高嗎?2020-08-15
搜索引擎優(yōu)化:如何優(yōu)化百度主頁的網(wǎng)站關(guān)鍵詞排名2020-05-07
關(guān)于我們、公司介紹頁面怎么做?2019-12-04
讀取數(shù)據(jù)?解讀“人”!2020-05-24
上海網(wǎng)站建設(shè)的目的2020-08-30