Bookmark and Share

Lee's 程序人生

HTML CSS Javascript XML AJAX ATLAS C# C++ 数据结构 软件工程 设计模式 asp.net Java 数字图象处理 Sql 数据库
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

文章分类 -  UDE

上一页 1 ··· 4 5 6 7 8 9 10 11 12 ··· 17 下一页

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

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

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

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

摘要: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)

摘要: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)

摘要:转自: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)

摘要:转自: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)

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

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

摘要:转自: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)

摘要:转自: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)

摘要:转自: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)

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

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

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

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

摘要:本文转自: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)

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

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

上一页 1 ··· 4 5 6 7 8 9 10 11 12 ··· 17 下一页