帮朋友的推广
Category Archives: CSS
显示一些如title/meta之类的特殊元素
title代表的是页面的标题，很多时候跟h1的内容是一样的。 我在写页面的时候感觉总是重复一次很麻烦， 于是就索性把h1给删了，把title给显示出来参与页面布局， 这样整个页面就有趣多了 代码很简单 head,title{display:block;} 是的，只有一句话，让head和title都显示。 此外如果还对其他有兴趣，可以把meta、script还有style等都显示出来 另外，下面这句也会很有趣 body style, body script{ display:block; white-space: pre; } 可以让body中的script何style都原样显示出来， 怎么用好就靠大家自己发挥了。 当然，我们亲爱的IE6是不支持上面两个小功能的。 Firefox 3.6.6 和 Chrome 6.0.458.1 测试通过。
Posted in CSS
2 Comments
从模块化CSS到面向对象的CSS
最近做了一个项目，尝试了一些以前未曾上尝试过的方法——基于模块设计整个网站的内容。做到后期才发觉如果初期的时候设计的更好一些，能做到面向对象的CSS来设计，那整体开发效率以及代码复用方面会做比现在好。现在的代码还是有点不干净的地方，有些地方有点乱。这可能是这行当的“完美主义”情结吧 :) 希望下次可以做的更好。 1.模块化问题 首先，什么是模块化？我这里指的模块化并非仅仅指CSS模块化，还指的是HTML的模块化。那为什么要模块化？最主要特点是使各个部分相对独立，同时增加代码复用，最终目的是为了降低开发成本提升开发效率。 举个例子，当拿到一个项目的时候，扫一遍所有设计，就可以发现： 哦，一共有10种侧边栏设计，设计师就是把这10种侧边栏翻来覆去放在不同的页面中。那就很简单了，只要完成了这10种侧边栏，那么就算100个1000个页面也都是一样的，只要把HTML复制，粘贴就可以了。最大化的实现的代码复用。 鬼哥写过一篇文章来阐述这个问题： http://www.cssforest.org/blog/index.php?id=134 2.面向对象的CSS 当进一步观察，很容易发现，有侧边栏都是有一个标题，再下面是是主面板，再有一类侧边栏是标签页的，下面展示的是新闻之类的内容。这个时候就完全可以抽象出两个类，一个是带标题的侧边栏（title_box），另一个是带标签的侧边栏(tab_box)。这样的好处是可以进一步抽象出代码，提高复用率。增加开发速度。 比如前者的HTML可以是这样的： <div class="title_box"> <span class="act"><a href="#">更多</a></span> <h3>标题</h3> <div class="panel"> <ul> <li><a href="#">新闻</a></li> … Continue reading
Posted in CSS
20 Comments
打造自己的reset.css
0，引言 每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。reset.css本意就是重置样式，我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 具体如何规划网站CSS结构，不在文本讨论之列，可以参考Smashing Magazine上的文章，国内有差强人意的中文译版。注意，本文把reset分成了两个部分，一个是纯reset.css，可以用于任何项目。另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。 1，基础 牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。 请永远不要使用 * { margin: 0; padding: 0; } 这问题太多了，在此不多加表述。 目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时，糟糕的是，网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric专门为有一个reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里，比上面的页面中还多一些东西。此外，我们还可以基于一些常见的框架，比较著名的比如Blueprint或者Elements CSS Framework（这个的reset也是源自于Eric Meyer的）。OK，准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI，兼带Eric的reset。 2，默认色彩 对于页面是不是有默认背景色和前景色，YUI和Eric有着不同的看法。 YUI重置背景色为白色而文字颜色为黑色。 html { color: #000; background: #FFF; } 而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出具体理由。 这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的Firefox扩展来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。 所以，简单说来，NO，不要在reset中设置背景色。 那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。 … Continue reading
Posted in CSS
45 Comments
jQuery 1.3 正式版发布公告
http://docs.jquery.com/Release:jQuery_1.3 jQuery 1.3终于发布了。 min版(gzip后18kb) 源码(114kb) 另外可以用google的代码托管： http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js 下面这个是我自己用Packer压缩的pack版 http://shawphy.com/down/jquery-1.3.pack.js(37kb) 简要来说： 更新了Sizzle选择器引擎，这个之前也提到过。可以查看他的性能： 此外据声称，把代码给了dojo基金会。这回Sizzle的野心在于能够让其他各种JS库都能用，包括Prototype, Dojo, Yahoo UI, MochiKit, 和 TinyMCE等等其他库。 live 事件 这也是jQuery 1.3这次更新的第二个重大更新。 可以看下面iframe中的效果以及源码 性能比较： 这样，我以前写的关于重复绑定的文章就差不多可以抛弃了 Event 对象 新增了一个jQuery.Event对象，他根据w3c文档，做了一个完整的，兼容所有浏览器的一个对象。具体还得看文档。 append, prepend, before, 和 after 方法重写 据声称，这些方法的效率提升了6倍 重写了offset方法 这回更快了 取消了浏览器侦测，全面改用jQuery.support 具体还得看文档了。 变化： … Continue reading
我的卓越亚马逊和当当购书经历
Story 这两家在国内可以说是走在风口浪尖上的两家B2C公司，也都逐步从之卖书到了什么都卖的大百货转型。 这回我从我前几天想买的一本《精通正则表达式：第3版》。不要问我为什么不从china-pub买，只因为我对价格比较敏感。而不在乎书谁先出来。 各位也都可以从上面豆瓣链结里看到两个店的价格是一样的，都是55.9，蔚蓝在豆瓣页面里写是55.5，实际点进去是37.5 见：这里 。（我才发现……书已经到手……不退了……其他同学有兴趣的赶紧下手……机会难得……不过最好先问清版本。） 事情是这样的，很早就眼馋这本超越语言界限的圣经级别的《精通正则表达式》了，年初的时候想买，但看到了勘误表之后慌了，这么多错误，我买回来自己一个一个对着勘误表现改一通可就累了，而且我也没有在书上写字习惯。所以就忍了。这几天看到了说第三版已经在卖了，就盘算着买了。 好了，罗嗦了这么久，正式开场 Act 1 跑到卓越当当上，都没有看到关于印次。而底下评论问第几次印刷的版本的，也不见有客服来回答。所以打算直接问客服了。 这局打平，两家都做的不好，当当上有“印次”和“印刷时间”的栏目，但没写，卓越压根就没有，只有“版本”这个栏目。 Act 2 先说卓越，在页面最下面“如您需要帮助或对我们的客服有疑问，请联系我们。”。OK，点进去后就有了一个界面，填写信息后，等回音了。 接着是当当，在页面里死活找不到售前服务的地方（除了那个没用的提问部分），只在页面最底下找到了"常见热点问题/找回密码/顾客建议/顾客投诉" 点哪个呢？肯定不是找回密码（这东西怎么放这里？放登录窗边上不就够了？），我也不想投诉也没有建议阿，想了半天，还是“常见热点问题”吧。进去，找了半天，什么新手指南，什么退款换货保修一应俱全，就是没有售前服务，只有一个“联系客服”，得这算是我要的了吧。进去一看，邮箱和400电话。OK，打开GMAIL，寄了邮件过去。 给卓越的客服留言： 这本《精通正则表达式（第三版）》 http://www.amazon.cn/dp/bkbk728354 我想确认一下是第几次印刷的版本。并且如果可以的话，请客服能顺便修改一下页面上的资料以方便其他读者。 给当当的邮件： 当当网的客服： 你好 我想买《精通正则表达式（第三版）》 http://product.dangdang.com/product.aspx?product_id=20028613 但我不能确定这是第几次印刷的（以及印刷时间）。所以发信来询问一下。并希望能够顺便更新一下页面资料，以方便其他读者。 谢谢 by Shawphy 这局，当当大败，浪费了我很多时间。到最后都要我用自己的邮箱给他们写信。 Act 3 2008年12月19号当天（周五），在我发邮件一两个小时后，卓越的客服先给我的邮件。下午两点就给我回信了。 而当当我晚上8点发的邮件，第二天凌晨2点给我邮件…… 卓越我是白天发的邮件，当当我是半夜2点发的邮件。卓越我看不出来邮件服务是不是24小时的，至少当当是24小时的。 当当小胜，当然也因为我的实验产生了一定的误差，所以本次实验信度不是很高，各位看官酌情取舍。 Act 4 以下给出邮件主要部分（客套话就省了，虽然我不看，但他们得写）。 … Continue reading
Posted in CSS, jQuery
9 Comments
一个有趣的布局
尝试一下，不用定位，只用浮动，就把这个排版排出来看看。 不要被她迷惑了，其实没你想的那么难 实在想不出来，可以看这里。 <div id="wrap"> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> </div>
位于p最开始的span设置text-indent影响p的整个第一行，反继承
今天遇到这个问题 描述起来也蛮麻烦的 搜也搜不到，所以问了群里的朋友， 感谢Robin还有$一揪就出来， 他俩对此问题进行了深入的讨论， 感谢他们细心解答，真相才得以水落石出。 最后本文采用了$一揪就出来的方法： 如下代码 <style> span.imgblock{ height:16px; width:16px; display:inline-block; background:#0099FF; text-indent:5em; overflow:hidden; } </style> <p><span class="imgblock">这里看不见，确可以复制到</span>选中前边的框子，然后复制吧。<br />你可以复制所有本文<p> 给最开始的span设置了text-indent属性之后，导致了整个父元素p的text-indent属性 IE6/7都确认有这个bug，可以说是一种反继承。 解决的方法是多一个标签,避开问题多多的text-indent， 设置内层标签的行高,以及padding-left。就能够大致解决问题了。 即保证了效果，也保证了文本的不丢失，为残障人士，搜索引擎，以及想要复制文章的人给予方便。 至少可以不用空格了，使用空格虽然可以轻松达到效果，无需使用text-indent了，但这显然不好。 <style> span.imgblock{ … Continue reading
Posted in CSS
3 Comments
button 背景图片IE下不认
今日出现个离奇的问题 IE下设置了button 如下css button{border: none;background-image: url(button_gray_4.gif);} 结果发现IE下按钮始终是系统默认样式，并非我设定的样式。 捣鼓了半天，发现如果这样设 button{border: none;background: url(button_gray_4.gif);} 就又离奇的行了。真是莫名的…… 同时也发现，这个跟最开始的dtd声明有关，如果去除了顶部的 ，也就有效了。。。无语啊。。。 而如果对button 的border先设一个的话，也会有效：比如 border: 1px;border:none;background-image: url(button_gray_4.gif); 但如果图片不存早的话，表现效果也不相同…… <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" > … Continue reading
Posted in CSS
Leave a comment
