10 2011 档案
摘要：一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的section等价于div具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这…
阅读全文
摘要：自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。)作者已经把js文件放在Google code project上并允许大家直接调用，当然，前提是你不在意调用额外的文件。http://html5shiv.googlecode.com/svn/trunk/html5.js你可以使用IE条件注释来调用这
阅读全文
摘要：这是王子墨写的一篇关于前端开发的思考文章，我觉得写得非常好，将它摘录下来。一直想写点关于前端开发职位本身的文字，但写了好几次都没发。最近和朋友聊起这个话题，对工作有些感想，零散的写多少算多少吧。关于“前端开发工程师”这个职位当一个词开始泛滥，就会被人忘记它的本意。我只讲我认为的解释。首先，它是“开发工程师”，也就是程序员。其工作内容的本质，就是写代码。所以，程序员应该具备的素质，比如逻辑能力，写代码的水平等等，算是它最最基础的要求。在此之上，则是另一个要求：“界面开发”。对“看得见”的东西的感觉要敏锐。这偏偏是大多数重于理性思维的普通开发工程师，所无法具备的一项能力。坦率的 说，这也是前端开发
阅读全文
摘要：网格设计呢，通常显得很整齐规范，有时看上去也比较专业。但网格设计相对来说也是比较复杂的，往往需要精准的测量和栏目划分。960 Grid System/960网格系统，这是一套可以让你快速创建网格设计的工具，之所以叫960，就是说模板的宽度是960像素。而之所以用960像素来做为标 准，是因为960像素宽具有高度的灵活性，它可以按2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320和480来进行划分。960网络系统包含一个PDF网格页面，Fireworks
阅读全文
摘要：前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：以上三栏布局的代码为：1<styletype="text/css">2.container{margin:0auto;width:950px}3.span-8{float:left;margin-right:10px}4div.last{margin-right:0}5hr{clear:both;height:0;border:none}6</style
阅读全文
摘要：网页栅格系统研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：（图1）纷乱的高度世界我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：（图2）高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化
阅读全文
摘要：首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：#page {width: 70em;}为什么Yahoo!最后选择了定宽
阅读全文
摘要：栅格系统在工作中使用很广泛，这儿收藏了几篇这方面的文章，详细介绍了栅格的由来和具体的操作过程。
阅读全文
