CSS中的黄金分割率

这是一位叫做 Christos Chiotis 的希腊 Web 设计师发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。

在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置

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 的话，行高应该使用 24px - 译者。

另一个例子，在表单中，输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说，它的宽度应该是高度乘以 1.62。

这样一来，Web 设计师同时需要很好的计算能力，至少要在旁边放一台计算器，为了节省时间，作者建议在设计中随时记住一个 62/38 原则，在任何需要分割的地方，都使用 62% 和 38% 作比例。

对于需要分割成三份的场合，可以先按 62%，38%原则分成两份，再将那份大的按 62% 和 38% 的比例分割。

转载于:https://www.cnblogs.com/davyli/archive/2008/11/08/1329494.html

CSS中的黄金分割率相关推荐

Logo设计中的黄金分割率
Logo设计中的黄金分割率 2012-08-14 10:17 | 2713次阅读 | 来源:Banskt Designs [已有15条评论]发表评论关键词:Apple,Logo,黄金分割率,设计,用 ...
UI设计中的黄金分割率，实用案例适合临摹学习
作为一名UI设计师,除了要具备分析并梳理产品需求的能力,视觉基础力,更是会直接影响到该设计师水平的几大点之一.那么其实视觉基础能力,是可以通过刻意练习,来进行提升的.对优秀作品进行临摹,深层次多维度来 ...
css 菜单栏悬停_在CSS中构建悬停菜单
css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...
黄金分割率理论--在分析大盘的时候用
转自:http://apps.hi.baidu.com/share/detail/956019 黄金分割率理论计算公式(5^0.5-1)/2＝(2.236-1)/2=0.618 (最高点-最低点)* ...
java 黄金分割率_黄金分割率使您的网页设计更有效
java 黄金分割率黄金比例可用于各种图形布局,尤其是用于平衡文本繁重的内容. 它可以帮助设计师创建层次结构,并吸引用户对特定区域的关注. 查看以下网站示例,看看设计师如何利用它! 什么是黄金分割率 ...
数学基础（四）博弈论(巴什博弈~威佐夫博弈（黄金分割率）~尼姆博奕~斐波那契博弈~SG函数模板)
一.巴什博弈 1.问题模型只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个,最后取光者得胜. 2.解决思路: 当n=m+1时,由于一次最多只能取m个,所以无论先取者拿走多 ...
[转]浅谈apple设计中的黄金分割
你研究或者不研究,美就在那里,不偏不移:你发现或者不发现,黄金分割就在那里,不多不少.了解他,发现美,也给自己增加精彩,好作品不会没有依据. 黄金分割相关书籍黄金分割漫话分寸,设计:发现黄金比例恒 ...
Web设计中的黄金分割
Web设计中的黄金分割简介 web设计中的黄金分割 ... 数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候,我确信如此.数学如此刻板乏味.你可能会惊讶的发现,最美观的设计,艺术作品,物体 ...
css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...

CSS中的黄金分割率

CSS中的黄金分割率相关推荐

最新文章

热门文章