CSS 设计中的黄金分割率应用
作者:edream 来源:沉寂博客 发布时间:2008-11-12 12:17:00
希腊Web 设计师Christos Chiotis 发表在 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% 的比例分割
猜你喜欢
- 我其实是同一天看到Robert Treat几人整理的”Mysql 迁移到Oracle前需要了解的50件事“与Baron Schwartz的”
- <%'使用说明'Dim a'Set a=new CreateExce
- <%@ Language=VBScript %><HTML><HEAD>
- 如何做一个文本搜索? 比较简单,见下:<%Head = "搜索"SearchStri
- 第一种方法: 代码如下:/* 创建链接服务器 */ exec sp_addlinkedserver 'srv_lnk
- 在我发表上一篇《Zen Coding: 一种快速编写HTML/CSS代码的方法》之后,有网友表示不知道怎么在Dreamweaver上使用ze
- 问:如何给导入文件加上时间戳标记?答:请参考下文中介绍的两种方法:1.在DOS下从系统获得时间戳利用Dos命令取得时间戳:C:\>ec
- DW2004的中文乱码情况你遇到过么?乱码一般是怎么出现的呢?也许很多时候用其他软件(比如Editplus)写程序的时候,忘了meta标签里
- 通过优化CSS代码,减小对系统资源的占用。自己整理出几个能减少系统资源占用的CSS写法,要优化网站的页面加载速度,这些注意点不能忽视!一、尽
- 方法一:利用Cookies对象 因为Cookies对象把变量的值保存在浏览器客户端,所以可以根据Cookies保存的IsVoted的值来判断
- <!--#include file="config.asp" -->&nbs
- asp中fso怎样判断一个盘上是否有文件,实例代码,需要的朋友可以试试:<% dim objfolder dim
- 近日在月影的blog上找到一段代码。看了老半天没明白什么意思,倍受打击!不死心,于是仔细分析思考了好几次,才明白过来这段函数的意义。js果然
- 有时会被问到“看看XXX网站如何?”之类的问题。谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你
- 下面的各种屏蔽网页鼠标或键盘的代码都是我以前收集的,挺实用的,防一般的访客还是很有用的。1.禁止鼠标选中捕捉网页文字图片等元素在<bo
- 谁在用这些导航google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜
- 一、目的之前在博文SQL Server数据库最小宕机迁移方案中提到了使用了完全备份+差异备份的功能完成了数据库的转移,但是这个方法在遇到了7
- 1. position:static所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该
- 闲着没事看到国外一个酷站欣赏的网站不错,不过他是用FLASH做的,于是想着用JS也写一个看看,技术有限写的不是很完美,还有一些小的BUG不知
- javascript可以根据输入值自动搜索显示相关的select列表,对于列表很长时可以很方便的查找到要的值。js代码:<script