目前全兼容的纯CSS选项卡式菜单
作者:dangbao 日期:2010-04-27
包头信息门户导航菜单
作者:dangbao 日期:2009-05-31
WY纵向循环切换焦点区域
作者:dangbao 日期:2009-04-28
IE和FF背景图片居中的偏移差异
作者:dangbao 日期:2009-04-21
今天在做公司的一个企业站，用的是一个左右有固定宽度阴影的图片做大背景。让中间的内容部分看起来很充实很有质感，这也是企业站常用的设计方法。记得在刚学网页用TABLE布局的时候就弄过这样的页面。过去基本不会考虑浏览器尺寸和兼容性的问题，所以几乎很快就做好了。在考虑浏览器兼容和分辨率大小的情况下，用XHMTL布局就发现了这样的差异：IE和FF对大背景图片居中的解释居然不同,其它浏览器则和IE的显示相同。在消除了hmtl、body、div等的默认属性后，我开始这样写：按照这样的描述，背景图片是随分辨率和窗口的大小的改变后居中显示。可是我发现在IE中是正常的，FF下却明显的偏移了2px。开始我以为是IE和FF解释的容器宽度不同导致的，但无论我如何更改容器宽度，在FF下，容器的边和背景始终贴不到一起。
Code
body{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
仿Facebook自动圆角头像
作者:dangbao 日期:2009-03-25
Facebook最近改版了，突然发现在朋友的头像列表里都是圆角的图片。保存后看到的却是一张直角的图。而最近有朋友也翻译了一篇老外的关于PNG透明背景的文章。于是摘出来效果以供学习。查看了一下它的源文件，结构嵌套达10多层，怪吓人的哦。也看到了这种所谓的圆角效果，其原理就是在图片上用span绝对定位一个圆角效果的透明PNG图片，遮罩后恰恰是我们可以看到的圆角效果了。当然只要修改PNG图片，可是加各种印花效果了。当然不要忘记了老朋友IE6下PNG的不透明问题，如果浏览器低于IE7,则使用一个HTC来修正吧。
Code
<!--[if lt IE 7]>
<style type="text/css">
.photo span{behavior:url(iepngfix.htc);}
</style>
<![endif]-->
<style type="text/css">
.photo span{behavior:url(iepngfix.htc);}
</style>
<![endif]-->
Tags: 圆角
自动循环切换Tab选项卡
作者:dangbao 日期:2009-03-23
cookie记忆-防刷新菜单
作者:dangbao 日期:2009-03-10
本人收集的一个效果，通过cookie记忆最后一个点击菜单的class，从而实现菜单当前选中的状态。在点链接的时候会出现难看的虚框，所以我更改了代码，使之看起来更加美观。当然这个效果并不适用于大型交互网站，因为它只是记忆上次点击来显示。如果本页内有其它菜单下的内容，那么它依旧会显示选中的是上次点击后的菜单。因此此效果用在交互性不是很强的网站，如展示型企业站和个人站。不想为每一个页面都新建一个头部，每个头部只是在被选中的菜单上加一个class。那么就用这个防刷新菜单吧。
查看完整"cookie记忆-防刷新菜单"效果
查看完整"cookie记忆-防刷新菜单"效果
Tags: cookie-menu
