css | 柴鸡的窝 | 又不是武松，哪来什么武功。。。

正在加载...

Input内容垂直居中

Posted by baljeans on 五月 26th, 2009

相信很多人都遇到过这样的问题：Input在设定了一定的高度之后，如何让内容垂直居中。

在Chrome和Opera中我们可以直接得到想要的默认居中。

在IE中我们也可以方便的使用line-height来定义，不过IE7和IE8会有一个px的差异。

Firefox下就只能使用上下padding来调节了。

以上是个人的经验总结，如果有什么疏漏欢迎指正。

标签：css, Input, 内容, 居中

CSS图像映射

Posted by baljeans on 三月 7th, 2009

在WEB标准化的今天，图像映射将表现和内容混在了一起已经风光不再。

但是我们仍然可以使用CSS创建更简单并且符合WEB的标准图像映射效果。

点击查看演示

标签：css, 图像, 映射

突显不同链接的样式

Posted by baljeans on 三月 7th, 2009

利用CSS为不同链接添加背景图片从而来让访客区分页面上的内部链接和外部链接。

原理：使用[att^=value]属性选择器寻找以文本http:开头的所有链接。

点击这里查看演示

标签：css

下拉菜单

Posted by baljeans on 一月 11th, 2009

模仿度不高。。。跟进了JQuery的superfish插件效果跟Media Temple差不多了

点击查看演示

标签：css, JQuery, 菜单

CSS定义浏览器透明效果

Posted by baljeans on 十一月 25th, 2008

IE 使用滤镜，即 filter:alpha(opacity=x) ，x 取值范围为 0 – 100 。默认值为 100 ，不透明。 0 为完全透明。

css3 半透明属性 opacity:x ，x 取值范围为 0.0 – 1.0 。

点击查看演示

PS：IE 滤镜不能通过 W3C 验证。

标签：css, 透明

CSS图像替换技术

Posted by baljeans on 十一月 24th, 2008

这里总结了Todd Fahrner和Mike Rundle两位设计师的小技巧：

第一种方法只是利用text-indent:-9999px;将文字隐藏到了左边，

并使用overflow:hidden;隐藏了Firefox下点击链接时长长的虚框;

第二种方法则使用display:none隐藏了span标签内的文字。

点击这里查看演示

标签：css, 标签, 语意化

悬浮提示框

Posted by baljeans on 十一月 12th, 2008

原理很简单大家一看代码就明白利用层的hover来控制支持IE6

点击查看演示

标签：css