摘要: 在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。 那种方案其实就是这种布局的变通应用。弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大，都能自动适应宽度的变化。

posted @ 2009-05-10 00:21 Biny 阅读(6974) | 编辑

弹性+固宽布局

摘要: 在当今用户的显示器越来越大的今天，之前的1024*768固宽布局有点越来越不合时宜，对大屏幕的用户而言，两侧空空的留白给人第一眼的印象是严重的屏幕浪费，作为网页设计师的你有责任给这一批用户一个良好的用户界面。 当然为了减少这种屏幕的浪费，采用弹性流体布局是最好的解决方案，它可以充分利用屏幕空间，无论你是多大分辩率的用户，都能尽情满屏展示内容。然而因为种种限制，目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者，我们只能以一种兼容的心态去适应两者的差距。所以，作为一种过渡的解决方案，有了这样一种布局：弹性+固宽布局。

posted @ 2009-05-07 10:54 Biny 阅读(10300) | 编辑

如何给博客园加上运行代码功能

摘要: 对于运行代码这个功能，我之前也写过一篇文章，这儿主要介绍一下如何在博客园中加入这个功能。博客园后台程序中是没有这个功能的，而我们又太需要这种功能来演示HTML静态页面了。而且也有朋友问过我如何加入，所以这里再啰嗦一下。 首先，在博客园中添加文章时，如果要用到代码运行功能，你需要将下面这段结构加入到文章中，你可能打开文章的HTML模式来添加这段代码... 阅读全文

posted @ 2009-05-02 22:49 Biny 阅读(5026) | 编辑

博客新皮肤上市

摘要: 有朋友说原来的博客不好看，趁着五一节放假，花了点时间重新制作了一套样式，图片借用一个外国博客的图片。 样式全部基于自定义皮肤样式改写的。 说实话，改写博客园样式是一件比较痛苦的事情，你不能随心所欲地加入样式。因为博客园的结构层已经全部定死了，你唯一能做的事情就是在原来的结构上写样式。如果想应用一个好看的样式，会显得非常的困难，因为它并没有定义一个class或ID，真让人有“英雄无用武之地”的感觉。 阅读全文

posted @ 2009-05-02 20:25 Biny 阅读(4584) | 编辑

100%全屏布局设计

摘要: 好久没有更新博客了，今天看到论坛上有位朋友问起全屏布局，有点像vc的界面。来了兴趣，就写了一个。 运用IE6的怪异模式，通过绝对定位来实现的。 相关讨论贴： 阅读全文

posted @ 2009-04-17 02:49 Biny 阅读(9428) | 编辑

div层遮盖flash(兼容浏览器)

摘要: 今天测试div层和flash的交互，发现div层总是被flash层遮盖，在百度上找了一会，说是加个< param value="transparent" />就成了，我加完后在IE下问题是解决了，但是FF下好像没有反应，后来才知道IE中和FF加的代码是不一样的，如下： IE浏览器下可用... 阅读全文

posted @ 2009-03-17 22:44 Biny 阅读(1462) | 编辑

中英文混排版行高不等问题

摘要: 淘宝采用的是第一种方法！！！！ 基本上快被这个问题搞疯了，症状如下： 症状描述：在ie下（6或7，8没有试过）当出现中英文混排，都采用默认字体时，并使用 li 列表做float时，会出现如上图的症状，文字排列上下不对齐的情况。影响了布局的美观性，造成上图情况的原因是中英文的文字基线不同，arial字体的下边缘要比宋体（同为12号）低一个象素，上边缘比宋体矮两个象素，而且英文还有i,y这种上下基线不同的情况。所以当中英文混排对齐时，就会出现明显的高度差异，使排版不均。可见放大图。 阅读全文

posted @ 2009-03-17 22:15 Biny 阅读(897) | 编辑

一个比较完美的spacer div技巧

摘要: 在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了 Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。 为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。 阅读全文

posted @ 2009-03-17 22:04 Biny 阅读(747) | 编辑

链接伪类（:hover）CSS背景图片有闪动BUG

摘要: 这个问题在开发中经常遇到，在此作个记录，以备不时之需。 IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。 常用的解决方案： 在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。 阅读全文

posted @ 2009-03-17 21:20 Biny 阅读(1922) | 编辑

手工打造极酷的分离式滑动门导航菜单

摘要: 导言：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看了本文后，也能打造出属于自己的超级漂亮的标准导航菜单。本菜单无冗余结构，利于数据动态输出，非常适合于用在平常的项目中去。本教程中讲到了基本的滑动门原理，相信对那些还在这条路上摸索的朋友会有一些帮助！当然如果有什么错误和问题，也欢迎大家提出来探讨。

posted @ 2009-03-15 13:00 Biny 阅读(7134) | 编辑

无图片山顶角

摘要: 看到论坛上有个朋友展示了一个山顶角的实例，但是这儿需要更正一下的是，哪不是圆角框，正规的名称叫做山顶角（mountaintop corner），它最早是由的作者Dan Cederholm首创的。

posted @ 2009-03-14 21:24 Biny 阅读(3410) | 编辑

原创：纯手工打造CSS像素画--笨笨熊系列图标