网页布局的位置重心与位置间的对比关系（2）
作者：小毅 来源：蓝色理想 发布时间：2007-10-15 19:20:00
大布局
基本上网页的布局分为，上中下、左中右、左右、上下、与上下左右之混合几类。同时我们还要思考的是分辨率与网页大小的关系。现在大部分的机器都是1024以上的分辨率了，那我们的宽度是不是一定也要顺应变得宽一点呢。个人观点是大可不必。因为网页本身也会与浏览器产生视觉对比。如果塞得太满势必也不是很好看。如果留下空隙网面与留出来的空白也可形成一定的对比，其比例也较接近黄金分割率。所以我觉得还是不要塞满浏览器为好，给网页一个可以呼吸的空间。那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我们不能把上下或是左右平分，而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分，我们我们要注意三者之间的关系，比如上中下结构，我们很清楚中间是主要内容需要大一点的空间，那么中空间的部分会尽量的点有大比例，一般来讲我们会让中间占大约百分之六十。而上面占百分之三十，下面占百分之十。那也就是说，下面是上面的三分之一，上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。
小布局
也可以说是细节上的布局。我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置，有些人喜欢排位，并且会把最重要的放在最上面，其实不然啊，放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置，是不是没有放在最顶部的?当然由于分辨率的问题目，这些头条可能位置也会有所变化。在800下头条是偏下的，而1024是居中一点，1600就偏上一点。但是从浏览器的大角度来看，这些头条也都是处于视觉中心点的。
图片布局
我们在处理图片的时候也会用到布局，比如我们的文字放在什么地方，标志放在什么地方这些都是布局的范畴。这里也要应用上述的概念，重要的要核心不要放在正中或是过于偏向角落。当然也会遇到重心的东西很大，基本上都占满了画面，下面让大家来看一张招贴画。
大家看上面这张图，画面重点是那个MP4，但是这个对象很大。没关系，把这个MP4的图做得有透视性，左右的重量就不一样了。这样向左去一点，那么重心就向左去了，再加上MP4偏上，这个MP4就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。
好了，关于布局就说这么多，这里总觉得这里还少些东西，细想可能是视觉平衡方面的问题。这里讲得很多了，视觉平衡方面的问题目就再想想过些日子再整理出来。
0
投稿猜你喜欢
- 基础知识实际上，“运算符重载”只是意味着在类方法中拦截内置的操作……当类的实例出现在内置操作中，Python自动调用你的方法，并且你的方法的
- 在新的公司开始上班，今天工作的主题内容是市场部门需要抓取一些论坛用户的邮箱，以便发送营销邮件。于是用了一个python脚本来执行，前面抓了几
方法一：1、安装Jupyter Notebookpip install jupyter2、在PyCharm中新建Jupyter Notebo- 什么是 JScript？JScript 是由微软开发的活动脚本语言，基于 ECMAScript 规范实现。Internet Explorer
- 1.锦短情长为什么选择这个标题，借鉴了一封情书里面的情长纸短，还吻你万千。锦短情长都只谓人走茶凉，怎感觉锦短情长？一提起眼泪汪汪，是明月人心
- 创建主键可以有两种方式：create table 表名（字段名 类型，字段名 类型，……primary key(name));或者是crea
- 详解Python文本操作相关模块linecache——通过使用缓存在内部尝试优化以达到高效从任何文件中读出任何行。 主要方法： lineca
- 本文实例讲述了python实现web方式logview的方法。分享给大家供大家参考。具体如下：这里用Python实现web方式查看日志的一个
- run() 方法并不启动一个新线程，就是在主线程中调用了一个普通函数而已。start() 方法是启动一个子线程，线程名就是自己定义的name
- 1.1 简介深层神经网络一般都需要大量的训练数据才能获得比较理想的结果。在数据量有限的情况下，可以通过数据增强（Data Augmentat
- 前言多表查询，也称为关联查询，指两个或更多个表一起完成查询操作。前提条件：这些一起查询的表之间是有关系的（一对一、一对多），它们之间一定是有
- 因为python是动态语言，变量类型是可变的，所以不管pycharm还是sublime都做不到准确的类型推断。一个比较取巧的做法是asser
- bool assert ( mixed $assertion [, string $description ] ) — 检查一个断言是否为
- 我使用的是tensorflow-gpu (1.2.1)和Theano (0.9.0)，2个4G显存Nvidia Quadro M2000 G
- 两年前，我们开发了一套基于Flash的文件（主要是图片）上传RIA应用，提供给阿里巴巴的用户使用。如果你使用过Wordpress或flick
- 本人 python新手，使用的环境是python2.7，勿喷# -*- coding:utf8 -*-import random
- 先贴代码package mainimport ("fmt")// Send the sequence 2, 3, 4,
- 1. 返回列表和标量(Scalar)前面我们注意到Query对象可以返回可迭代的值(iterator value)，然后我们可以通过for
- 无意中看到以前在电脑上保存的一个html页面，关于div水平垂直居中的问题。如何实现div水平垂直居中呢？1.已知宽高度水平垂直居中posi
- 此次遇到的是一个函数使用不熟练造成的问题，但有了分析工具后可以很快定位到问题（此处推荐一个非常棒的抓包工具fiddler） 正文如
