前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，颇有感觉，于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题，希望可以纠正css中对高度的正确认识，并依次展开列举了一些常见的有关line-height的应用，提供demo页面，希望对您的学习有所帮助。
文章关键字 ‘css相关’
css行高line-height的一些深入理解及应用
2009年11月28日，星期六CSS实现圆角六色渐变自适应按钮详解
2009年11月21日，星期六本文将要展示如何用纯css实现2个像素的真正意义上的圆角，并且按钮带有细腻圆滑的渐变效果，其色彩丰富，可支持6种过渡色，从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理，将代码形象化，提供demo，希望您可以充分了解这种技术，也希望能开阔您的思维，对您的工作与学习有所帮助。
我熟知的三种三栏网页宽度自适应布局方法
2009年11月17日，星期二目前，以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局，也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目，如果深入细节，不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀，没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。
jQuery照片图像剪裁插件Jcrop中文翻译详解
2009年11月13日，星期五
在现阶段的网络应用上，凡是涉及到头像上传的，都会对头像照片进行高宽比例固定的图片剪裁处理，方便开发维护。而为了节约开发时间与成本，有时候我们可以试着使用一些jQuery插件来实现图片剪裁，其中Jcrop就是一款很不错的图片裁剪插件，然而，目前无好的中文讲解演示页面，所以我花了一天的时间将原来的英文的项目页面以及多个demo页面全部汉化变成中文，并对部分内容进行删改，方便中文用户的使用与学习。
本文讲解了图片裁剪的些方法，优缺点，讲解了Jcrop的demo的一些情况，并附加其余几个图片剪裁插件的项目地址，demo等。
文本提供完整的中文demo演示页面以及源文件下载，希望对您有所帮助。
告别图片—使用字符实现兼容性的圆角尖角效果beta版
2009年11月6日，星期五字符既是文字又是图片，所以很多时候我们可以使用字符代替图片实现一些貌似只有图片才能实现的效果，例如，圆角，尖角等。您就可以使用字符实现这类效果。可以优化页面，提高性能。
本文以Google gmail邮箱中字符应用为引子，讨论的字符的一些特性，与图片相比的一些优缺点。而后，以字符+css的方式展示如果使用字符实现圆角效果，如何实现尖角效果。最后拿新浪微博的对话框做实际的实例，演示如何使用字符代替图片，实现几乎同样效果的优化，以展示字符的实际应用性及潜力。
本文提供详尽细致的demo页面，提供源文件打包下载，希望本文的论述能够对您有所帮助。
JavaScript实现新浪微博文字放大显示动画效果
2009年10月31日，星期六
新浪微博是全中国最主流，最具人气，当前最火爆的微博产品。用一句话随意记录生活，用手机随时随地发微博。用秒杀电视的速度发现最热最火最快最酷最新的资讯。
本文不是讲新浪微博产品的，纯粹的技术文章，用JavaScript上实现微博上一个不错的效果——信息发布后，发布条数放大显的动画效果。提供全真的demo实例页面，可以实时观察效果，提供源文件下载，希望对感兴趣的您有所帮助。
jQuery之addClasas与removeClass使用实例
2009年10月27日，星期二
上图为人人网好友分组功能模块，我用firebug对其高度进行了改动，所以这里显示的高度比实际的低。图示效果源自facebook，结构比较精细，体验上佳，图中的深色表选中状态。
本文就将演示如何使用jQuery的addClasas与removeClass轻松实现上面很赞的样式效果。本文实例效果包括两个主要部分，一是单击单个好友样式的切换，还有一个就是单击“已选”“未选”文字选项卡按钮后的样式的筛选，均使用ddClasas与removeClass实现。
提供完整的css样式以及JavaScript代码，提供demo实例演示页面和源文件下载。希望对您有所帮助。
关于Google圆角高光高宽自适应按钮及其拓展
2009年10月24日，星期六
本文以Google圆角高光高宽自适应按钮为引子，阐述此貌似平常的按钮后面的强大技术，并提供我经过我反复试验的更加优化高效的css实现方法，并对其优点进行分析。然后进一步扩展，探讨Google在css技术应用以及网页产品开发上的思想意识，强调应该有将css扩展性重用性发挥到极致的意识。并通过将虾米网图片按钮转换为效果一致的css按钮这个实例进一步验证培养css重用性可扩展性意识的重要性。本文不仅仅是讲解如何通过高效的css实现一些貌似只有图片才能实现的效果，更重要的是要传达Google在产品设计在技术运用上所体现的一种思想，传达Google是如何将产品的扩展性预见性运用到极致的，借以希望你我都能从众领悟到一些东西，然后在前端这块领域有所作为。
本文提供技术实现代码以及demo实例页面，希望对您有所帮助。
JavaScript实现图片幻灯片滚动播放动画效果
2009年10月21日，星期三在网页上用幻灯片动画效果展示图片等是常用的手段之一，有一类效果相对酷一点的是JavaScript+flash的实现，但是一般这类动画总是占据网页最重要的位置，如果用户未安装flash插件，则显然会有问题。在大型网站上，多使用纯粹的JavaScript实现这类效果。
这里我就尝试性的实现了这个效果。在本文中所展示的这个图片切换的JavaScript代码，个人觉得，还是挺精炼的，希望对有兴趣的同仁能提供一些参考。提供直观的demo实例页面，源代码可以在实例页面上右键单击查看，希望对您有所帮助。
jQuery-鼠标经过显示大图并跟随鼠标效果插件
2009年10月17日，星期六好久没有更新文章了，今天抽了点时间，写了个jQuery插件练手。实现的效果是，鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。水平有限，可能会有不完善之处，欢迎指正。
提供实例页面效果预览和源文件下载，希望对您有所帮助。
我的应用
我的应用