960 grid 分析

【960 grid 分析】的更多相关文章

960 网格系统的构造如下:页面总宽度 960px12 栏布局, 每栏 60px每栏两边保留 10px 的外边距, 相当于 20px 的槽内容区域总宽度是 940px 960 布局无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用. 为什么960? 1024 x 768 的分辨率下,打开F…

960 grid 使用

去官网下载960 grid,解压后可以看到css下面有如下文件: 960.css是一个综合性文件.我们要引入960 ,reset和text 3 个文件. 一般情况下调用: <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” /> <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css…

compass安装使用960 Grid System

960 Grid System 是一个CSS的页面布局框架 demo: http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem install compass-960-plugin 步骤2:创建my_project项目: compass create -r ninesixty my_project --using 960 在页面中引用该css <head> <link href="/stylesheet…

与960 Grid System相关的那些问题

为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息. 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案.一方面,需要做一个能适应各个宽度的设计,从背景图片,到每个栏目标题的文字长度,都需要考虑到适应多变的宽度:另一方面,也是最致命的一点,相比英文单词,中文方块字是没有起伏的,用户对文字位置记忆的依赖性更大.自适应宽度也就意味着一行显示的文字数是不定的,阅读中文文字块时很可能很难一下找到刚才读到的那个地方现在到哪去了.…

使用Photoshop+960 Grid System模板进行网页设计

前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图. 网格设计呢,通常显得很整齐规范,有时看上去也比较专业.但网格设计相对来说也是比较复杂的,往往需要精准的测量和栏目划分.960 Grid System/960网格系统,这是一套可以让你快速创建网格设计的工具,之所以叫960,就是说模板的宽度是960像素.而之所以用960…

Web工程师的工具箱

RequestBin:允许你创建一个URL,利用这款工具进行收集请求,然后通过个性化方式进行检查. Hurl:发出HTTP请求,输入URL,设置标题,查看响应,最后分享给其他人.类似的工具有:REST test test, Apigee console.. Httpbin:HTTP请求&响应服务,涵盖所有的HTTP方案(例如不同的HTTP verbs.状态代码和重定向).类似工具:UrlEcho. REDbot:这是一个机器人工具,帮助用户检查HTTP资源,可查看它的操作情况,指出常见的问题并提…

Web工程师的工具箱 | 酷壳 - CoolShell.cn

Web工程师的工具箱 | 酷壳 - CoolShell.cn Web工程师的工具箱 2012年12月19日陈皓发表评论阅读评论 30,168 人阅读本文出自Ivan Zuzak 的<The Web engineer’s online toolbox>,作者给了一个各种可以用来进行开发.测试.调试以及文档编排的在线工具集.(注:我发现CSDN上已经有了这篇文章<Web工程师必备的18款工具>,但可惜的是这篇文章并不全(原文后来被更新到了33个工具),而且其中并没有包括…

面向移动设备的html5开发框架

很久以前整理了篇将手机网站做成手机应用的JS框架.时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的. 1.jQuery Mobile jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋.移动Web太需要一个跨浏览器的框架,让开…

学习 CSS 样式

1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行): 如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐. (2)对于CSS的清除浮…

Web前端框架汇总

在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本. 需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本. Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动.开发者可以通过贡献代码,来帮助改进Flex,如…