Web设计中的黄金分割[译]（2）
作者：被遗忘 发布时间：2009-02-20 13:41:00
Main Content
每个人都（应该）知道，内容才是王道！当人们来参观你的站点，这是他们想看的主要元素。它应该是web页面的焦点，所以参观者才能快速找到他们想要的。
Sidebar
sidebar是放置你次要内容的元素，像一些广告，站点搜索，订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的，尽管右很多站点用它。它大多数是放在右边的，但是你也能把它放在左边或者两边，只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航，sidebar往往是用纵向导航。
Footer
web页面的尾部总会有一个页脚，让您的访客知道他已经到达了你web页面的结束部分。和header一样，footer也不是一个特殊的元素 。在你的页脚里包含版权，法律声明以及主要的联系方式。包含一些重要的链接是个好主意，比如home page, contact page, 等. 有些网站用这个区域提供一些相关材料或者其他重要信息。
“Whitespace”
你可能有强烈的愿望去填充这些页面上的空白，但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的，创建了页面平衡给人一个好的感觉。
以上是web页面的骨架，现在我们来看如何黄金分割这些元素。
黄金分割和使用网格（Grids）
还记得之前我说数学是美丽的吗？我们认为视觉的吸引力是基于比例的（比如，黄金分割）。几千年来，艺术家，设计师，建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢？ 1.62 (实际是 1.618…) 我不会说这个数字的起源，但是我会告诉你如何使用它。
使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确，所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度，你的sidebar是345px。看看多么容易？！
但是等等先，乐趣不止于此！你也可以应用黄金分割到其他元素的宽度和高度。
0
投稿猜你喜欢
目录前言第一步：查看所有 SSH-Key第二步：生成一个 ssh-key，用于配置公司的 GitLab第三步：Github 生成一个 SSH- 引言RunLoop：又叫运行循环机制，在iOS中的两大机制之一。并不是只有iOS有Runloop其他语言也有，他们的方式不太一样，但是核心都
- 网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI
- Python产生一个数值范围内的不重复的随机数，可以使用random模块中的random.sample函数，其用法如下：import ran
- 今天我想试试能不能用数组来实现矩阵转置呢？想知道，那就接着往下看吧。希望大家读完有所收获，那我辛苦码字也就值了。一、常见二维数组操作🌴创建与
- 这是一个简易的员工管理系统，实现最简单的功能：1.登录用户密码验证（错误三次自动退出） 2.支持文本员工的搜索、添加、删除、修改 3.一级层
- 在MySQL里，聚集索引和非聚集索引分别是什么意思，有什么区别?在MySQL中，InnoDB引擎表是(聚集)索引组织表(clustered
- 一、简介抠图是用PS？用魔棒和快速选择工具？遇到复杂背景怎么办？最近发现一个神奇的工具——Remove Image Backgroundht
- 本文实例为大家了Python中列表(List)的详解操作方法，供大家参考，具体内容如下1.创建列表。只要把逗号分隔的不同的数据项使用方括号括
- 安装去http://www.mysql.com/downloads/， 选择最下方的MySQL Community Edition，点击My
- 随着 Node.js v8 的发布，Node.js 已原生支持 async/await 函数，Web 框架 Koa 也随之发布了 Koa 2
- 复制是将主数据库的DDL和DML操作通过二进制日志传到从库上，然后再从库重做，从而使得从库和主库保持数据的同步。MySQL可以从一台主库同时
- 要做一个页面上短信息的提示音的功能，本来想用HTML5中Audio+IE下的bgsound来实现，可是发现每种浏览器对Audio的解码类型还
- 如下所示：<!doctype html><html lang="en"> <head>
- 本文实例讲述了go语言日志记录库简单使用方法。分享给大家供大家参考。具体实现方法如下：package mainimport ( &
- 1、给滚动条换色 好多网站的滚动条不是系统默认的灰色，而是一些红色、蓝色的，请问这是如何做的？答：这个很好实现，插入下面的代码：<&n
- 1969年8月8日，在北京协和医院降生了一个漂亮的小女孩。接生的阿姨说，她的声音这么大，好象想要全世界的人都听到。后来，她的父亲为她取了一个
- 使用Python实现Word文档的自动化处理，包括批量生成Word文档、在Word文档中批量进行查找和替换、将Word文档批量转换成PDF等
- 遇到那种有很多图的微信公众号文章咋办？一个一个存很麻烦，应朋友的要求自己写了个爬虫。2.0版本完成了！完善了生成pdf的功能，可根据图片比例
- 一、DataLoader理解在深度学习模型训练中，数据的预处理和读取是一个非常重要的问题。PyTorch作为深度学习框架之一，提供了Data
