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％ 的比例分割
0
投稿猜你喜欢
- 一、题目描述本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。小明刚刚找到工作，老板人很好，只是老板夫人很爱购物。老板
- 浏览器：IE ，不支持firefoxfilter视觉滤镜的种类:Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) Dro
- 问题：一直在想requests的content和text属性的区别，从print 结果来看是没有任何区别的看下源码：@property &n
json的作用JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式json.dumps(): 对数- 目录1、父传值给子组件2、子传值给父组件3、子调用父组件中的方法4、父调用子组件中的方法1、父传值给子组件父组件：<template&
- 1.使用Qt Design设计一个空白窗口(注意：我是使用MainWindow创建的窗口）2.使用PyUIC将.ui文件转换成.py文件右键
- phpMyAdmin错误 缺少 mysqli 扩展。请检查 PHP 配置 的解决方案phpMyAdmin 缺少 mysqli 扩展。请检查
- Python字典的创建方法一：>>> blank_dict = {}>>> product_dict =
- python np.dot(a,b)运算规则解析首先我们知道dot运算时不满 * 换律的，np.dot(a, b)与np.dot(b, a)是
- 当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求，SAAS的模式看起来非常有吸引力。Web应用程序的界面设计，其核心
- 双屏不是什么新鲜事，不过相信国内前端工程师还是用单屏的多，前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和AL
- python提高图像质量概述调研了一些提高图像质量的方式深度学习方法，如微软的Bringing-Old-Photos-Back-to-Lif
- 1、联合查询联合查询又称为多表查询，它的基本执行过程就是笛卡尔积1.1 认识笛卡尔积那么什么是笛卡尔积呢？答：笛卡尔积就是将两张表放在一起进
- Expression定义 IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这
- GOPATH设置go 命令依赖一个重要的环境变量：$GOPATH1（注：这个不是Go安装目录。下面以笔者的工作目录为说明，请替换自己机器上的
- tcp粘包产生的原因这里就不说了，因为大家能搜索TCP粘包的处理方法，想必大概对TCP粘包有了一定了解，所以我们直接从处理思路开始讲起tcp
- 有开发的同事反映远程登录SQL Server操作报错，索引超出了数组界限等如下图线上数据库版本为SQL Server2012 R2，检查后发
- 最近写的资源策略管理，在ceilometer 中创建alarm时，name要求是不能重复的，所以在创建policy的时候，要对policy的
- 版本：python3.7功能，开发一个用户访问的页面，支持图片上传，并将其保存在服务器。项目结构：app.py文件内容如下：from fla
- class Account(object): "一个简单的类" account_type="Basic&quo
