UDE - 文章分类(第8页) - analyzer

转：图形化按钮

摘要：图形化按钮，就类似这个样子的：当然，它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮，而是怎么在网页里把它做出来。这里要提几个要求： A. 语义化。如果这个按钮叫“完成注册”，就要在HTML中写出这四个字，以保证只读HTML的情况下也知道这个按钮是什么文字。 B. display:inline。用display:block可以很容易的调整大小。但是如果一横排并列两... 阅读全文

posted @ 2009-01-14 14:03 analyzer 阅读(327) 评论(0) 推荐(0)

CSS选择符命名原则 * 懒得分类 20

摘要：坦率的说，我写CSS时，有至少1/4的时间是在纠结选择符该如何命名。随意的命名，会让你陷入尴尬。举个例子，我们需要在一段文字里将某些词标红。所以为此建了一个.red { color: red; }。结果产品经理觉得，红色太刺眼了，改成橘色比较好吧。这下头大啦，难道写成.red { color: orange; }么？要不然就是把HTML里的每个class="red"改成class="orang... 阅读全文

posted @ 2009-01-14 13:58 analyzer 阅读(211) 评论(0) 推荐(0)

Best CSS web design

摘要：http://www.cssremix.com/ http://bestwebgallery.com/ http://www.stylecrunch.com/ 阅读全文

posted @ 2009-01-14 13:51 analyzer 阅读(135) 评论(0) 推荐(0)

转：样式的优先原则

摘要：转自：http://www.aliued.cn/?p=1455 样式的优先级在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !important’，这类特殊符号是针对不同浏览器识别的。打个比方，就象家长去幼儿园认领孩子，看到头上贴着’+’这个符号的，哦，这是ie家的孩子，firefox和opear家长是不认得的，当然符号不止3个，但有这3个就能满足大部分的需要了。 ‘+’ 加上该符号的... 阅读全文

posted @ 2009-01-14 13:29 analyzer 阅读(281) 评论(0) 推荐(0)

转：实现的一种非常简洁的方法(回应f-dev的title比赛)

摘要：http://algo.net.cn/tmp/titles/ 这种方法采用主体CSS渲染，并使用JS渲染细节。最大限度确保浏览的一致性。阅读全文

posted @ 2009-01-14 13:18 analyzer 阅读(98) 评论(0) 推荐(0)

网页的栅格系统设计

摘要：转自：http://ued.taobao.com/blog/2008/09/17/grid_systems/ 栅格系统的形成 1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，... 阅读全文

posted @ 2009-01-14 13:05 analyzer 阅读(276) 评论(1) 推荐(0)

转：谈谈淘宝上常用JS组件的实现

摘要：转自：http://lifesinger.org/blog/?p=143 这是淘宝懒懒交流会第五期的内容，大纲为：淘宝上常用的JS组件（Widgets） Tbra的实现与优缺点分析再思考，我的尝试 LiquidView实战花花世界，原样的蝴蝶下载：talk_on_tb_js_widgets.zip (2.9M) 所有相关的js代码请用SVN下... 阅读全文

posted @ 2009-01-14 12:19 analyzer 阅读(371) 评论(0) 推荐(0)

转：含中文字符的字符串长度校验

摘要：转自：http://lifesinger.org/blog/?p=461 网上有不少解决方案，贡献下我使用的两个函数： /** * 得到字符串的字符长度（一个汉字占两个字符长） */ function getBytesLength(str) { // 在GBK编码里，除了ASCII字符，其它都占两个字符宽 return str.replace(/[^"x00-"xff]/g, 'xx').l... 阅读全文

posted @ 2009-01-14 12:18 analyzer 阅读(730) 评论(0) 推荐(0)

转：网页栅格系统研究（2）：蛋糕的切法

摘要：转自：http://lifesinger.org/blog/?p=400 首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自... 阅读全文

posted @ 2009-01-14 12:13 analyzer 阅读(189) 评论(0) 推荐(0)

转：百度有啊前端技术初窥

摘要：转自：http://lifesinger.org/blog/?p=600 百度有啊开了，作为淘宝的一名深情前端开发工程师，打开百度有啊的第一件事是F12: 很典型的24列960栅格系统的两栏布局，很明显的YUI风格。注意主体的两栏布局又分成了两部分，两部分的结构是一样的。来看一下base.css: /* Copyright (c) 2008, Baidu Inc. All rights res... 阅读全文

posted @ 2009-01-14 12:11 analyzer 阅读(272) 评论(0) 推荐(0)

转：网页栅格系统研究（3）：粒度问题

摘要：转自：http://lifesinger.org/blog/?p=446 研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：（图1）纷乱的高度世界我们来看下图1左上角。左上... 阅读全文

posted @ 2009-01-14 12:09 analyzer 阅读(198) 评论(0) 推荐(0)

转：浮动门Bug探析

摘要：转自：http://lifesinger.org/blog/?p=614 直接借用PPK的演示代码： div.container { border: 1px solid #000000 } div.left { width: 45%; float: left } div.right { width: 45%; float: right } 浮动门Bug就这样粉墨登场了： div.cont... 阅读全文

posted @ 2009-01-14 12:08 analyzer 阅读(278) 评论(0) 推荐(0)

转：Float容易引发的Bugs

摘要：转自：http://lifesinger.org/blog/?p=678 IE6 Text Indent Bug, IE6 Doubled Float-Margin Bug. 这两个bug的解决办法是display: inline; IE6 Expanding Box Problem. 连续英文字符（包括URL等）、过大的图片会导致浮动布局换行。解决办法是：word... 阅读全文

posted @ 2009-01-14 12:07 analyzer 阅读(206) 评论(0) 推荐(0)

转：渐进增强式布局探讨（下）

摘要：转自：http://lifesinger.org/blog/?p=659 上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方... 阅读全文

posted @ 2009-01-14 12:06 analyzer 阅读(177) 评论(0) 推荐(0)

转：渐进增强式布局探讨（上）

摘要：转自：http://lifesinger.org/blog/?p=631 来看一个经典的三栏布局：从内容出发（渐进增强的核心思想），一份合理的HTML结构如下： main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，... 阅读全文

posted @ 2009-01-14 12:05 analyzer 阅读(178) 评论(0) 推荐(0)

转：网页栅格系统研究（4）：技术实现

摘要：转自：http://lifesinger.org/blog/?p=448 前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。 Blueprint的实现 Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：以上三栏布局的代码为：上面是基本功能，Blueprint还支持append-n, pre... 阅读全文

posted @ 2009-01-14 12:04 analyzer 阅读(228) 评论(0) 推荐(0)

转：说说掌握JavaScript语言的思想前提

摘要：本文转自：http://lifesinger.org/blog/?p=818 说明：这是今年三月份发在原Blog上的文章。来淘宝后，原Blog所在服务器出了故障，数据丢了不少。现在这个Blog是全新搭建的，数据也就懒懒地一直没转移过来。今天为了程序员杂志的稿子头疼，于是在Google上瞎逛，无意搜索到这篇老文章，欣然释然，小豆腐块用这种话题最适合不过了^o^ 图1. 可怜的JavaSc... 阅读全文

posted @ 2009-01-14 11:52 analyzer 阅读(163) 评论(0) 推荐(0)

转：JavaScript渐进增强

摘要：原文：Progressive Enhancement with JavaScript 作者： Aaron Gustafson 翻译：射雕 & 安吉如果你阅读了本系列的第一篇和第二篇文章，现在应当开始进入渐进增强的思维模式了。本文讨论如何将渐进增强的哲学应用到客户端脚本。你将很快看到，这涉及两个方面：约束与规划。聪明地支配能力也许你已经听说过“权力腐败”。这个词能引发很多联想，不过根据我们... 阅读全文

posted @ 2009-01-14 11:50 analyzer 阅读(302) 评论(0) 推荐(0)

转：理解渐进增强（Progressive Enhancement）

摘要：本文转自：http://lifesinger.org/blog/?p=298 原文：Understanding Progressive Enhancement 作者：Aaron Gustafson 翻译：http://lifesinger.org/ 从1994年开始，Web开发社区就敲响了优雅降级（Graceful Degradation）的鼓声。这个概念来自工程世界，其核心理念是给最新最... 阅读全文

posted @ 2009-01-14 11:49 analyzer 阅读(279) 评论(0) 推荐(0)

转：CSS渐进增强

摘要：原文：Progressive Enhancement with CSS 作者： Aaron Gustafson 翻译：lifesinger 本系列上一篇涵盖了渐进增强的基本概念，现在我们来讨论如何应用。有多种方式可以将渐进增强融入到层叠样式表（Cascading Style Sheets, 简称CSS）的工作中，本文将讨论其中比较成功的一些，并考虑采用其它方式来逐步增强你的站点。样式表的组织... 阅读全文

posted @ 2009-01-14 11:47 analyzer 阅读(220) 评论(0) 推荐(0)

Lee's 程序人生

公告

文章分类 - UDE