为什么要用960px?——网页内容宽度分析
来源:互联网 发布:网页在线视频剪辑软件 编辑:程序博客网 时间:2024/05/22 06:21
为什么要用960px?——网页内容宽度分析
液晶还没普及的年代,网页设计需要考虑800×600的分辨率。但如今800×600的分辨率使用率不到2%,已经可以忽略了。比这个分辨率高一级别的1024×768,使用率接近50%(国内),所以很多网站都是以1024的宽度为标准进行设计的,最常见的页面宽度是两种:1004和960。
早期的网页设计师使用1004px作为页面宽度,是基于这样的考虑:在1024*768的分辨率下打开IE,左边框宽度是2px,右边滚动条的宽度是18px,于是得出宽度就是1004px了。但这种宽度的设置并不利于栅格化布局的计算,如果选择三栏式的布局,就很难平均分配,所以现在很少有使用1004px宽度的网页了。
在比1004小的整数里,可以被较多数字整除的最大整数是960:
双栏布局:
三栏布局:
四栏布局:
所以,大多数设计师选择了960px作为网页的宽度。
确定了网页的宽度之后,接下来确定内容的宽度。通常我们都是直接按照黄金比例来进行划分,也就是将内容设定为600px,余下部分用作侧边导航。但内容的宽度还需要计算间距、留白,以及考虑文字和图片的搭配比例,比较规范的做法是绘制布局框架图。
一、自建布局框架图
自制布局框架图适用于不借用电脑,只在纸上画设计草图的阶段。上图是Jason Beaird在Principles of Beautifu Web Design提出的一种内容布局方式,首先将一张960px的画布划分为九等份(上图前两步),再把第一行切出三分之一,最后再把每一列都对半分,就得到一张布局框架图了。依照此布局图安排内容即可(图片来自Principles of Beautifu Web Design)
二、模板布局框架图
960 Grid system中提供了很多现成的布局框架图。分12、16、24栏三种:
上图是12栏的样式图。静态网页样式图已经上传到本地,可以点击这里访问。使用Photoshop做页面设计的话,请直接下载psd文件
文件信息:960_grid.psd 大小:2MB
有效时间:永久
将现有内容按照布局框架图来组织,界面就会显得整洁、美观了。下图是一个典型的12栏布局的网站。
- 为什么要用960px?——网页内容宽度分析
- 为什么要用960px?——网页内容宽度分析
- 为什么要用960px?——网页内容宽度分析
- 网页设计中有关网页宽度(960PX)的学问与栅格系统
- 网站动态内容为什么要用静态网页提供
- 网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体?
- 用CSS、HTML编写一个两列布局的网页,右侧宽度为200px,左侧自动扩展。
- 用CSS、HTML编写一个两列布局的网页,右侧宽度为200px,左侧自动扩展。
- 手工分析网页内容
- 为适应不同屏幕的宽度,datagrid用百分比设置宽度,无法事先知道各列的PX值,如何用样式控制内容的截取
- 取网页内容拼分析
- Jsoup网页内容抓取分析
- js网页内容抓取分析
- Jsoup网页内容抓取分析
- jsoup网页内容抓取分析
- 迭代分析网页内容
- Jsoup网页内容抓取分析
- 获得网页内容的有效长度和宽度
- 多款开源免费网络相册/相册系统源码推荐
- 再次学习javascript中的参数传递
- 用代码手写布局
- spring
- 银汇通支付:沈阳将推广无线POS机上门收电费
- 为什么要用960px?——网页内容宽度分析
- container_of 见解
- java get 请求乱码
- ArcGIS Runtime SDK For Android 授权方法(去除水印)
- C#: 带有背景文本的TextBox
- 银汇通支付让收银台跟着用户走,交易成本节
- 关于 Java 中 finally 语句块的深度辨析
- linux常用命令
- 解决表单GET提交后台数据乱码问题