-
WEB前端开发群
75791124(HTML+CSS,满)| 84902436(jQ满)<
67764949(满) | 62389544(满)
80215851(满) | 31584324(满)
71795209(满) | 66199085(满)
71795235(满) | 62544413(jQuery,满)|
7617538(js森林,入群条件)
71795162(HTML+CSS,开放)
84902470(js森林分群,开放)
80215721(jQuery森林,新群)
潜水者勿扰,一个月清理一次潜水 -
订阅我/收藏我/关注我
-
文章分类
-
赞助商
-
最近评论
- rain.kx 在 一个简单的用户引导效果 上的评论
- 皓 在 联系我 上的评论
- 猴子 在 前端开发博客搜索 上的评论
- jon 在 【IE6的疯狂之十三】IE6的空格bug 上的评论
- 小風子 在 border-collapse: collapse在FireFox,IE6,IE7下的小bug 上的评论
- xiaofei3 在 专属 CSS Hack 上的评论
- Ben 在 作为一名前端开发工程师居然没有IE6! 上的评论
- zipli 在 JavaScript压缩和格式化工具 上的评论
- mier 在 专属 CSS Hack 上的评论
- cheap golf 在 被恶搞的帅哥时钟 上的评论
-
最近文章
-
标签
-
文章存档
-
-
管理
点击最高的文章
- 关于前端开发工程师的地域、薪水、工龄、技能的调查 - 12,958 views
- 【IE6的疯狂系列】IE6 BUG大全(bug征集、整理中..) - 7,494 views
- 前端开发必备工具之网页调试工具篇(2009年4月6日更新发布) - 4,994 views
- web开发利器Aptana studio 1.2(下载,破解,汉化)(2008年11月3日更新) - 4,846 views
- 友情链接 - 4,685 views
- 前端开发必备工具(2009年3月23日更新) - 4,212 views
- 一个关于透明度继承的问题 - 4,134 views
- css自定义导航、按钮样式 - 4,128 views
- 《精通CSS:高级Web标准解决方案》(CSS Mastery:Advanced Web Standards Solutions)下载 - 3,828 views
- 【jQuery插件】等比例缩放图片浏览-LoadImage - 3,821 views
- Blueprint CSS栅格化框架可视化生成工具-Boks - 3,745 views
- 作为一名前端开发工程师居然没有IE6! - 3,744 views
- Flex皮肤设计制作的捷径 - 3,711 views
- 【IE6的疯狂之九】li在IE中底部空行的BUG - 3,691 views
- DW cs4的jQuery语法提示插件 - 3,394 views
- 前端调试利器DebugBar - 3,316 views
- CSS引用(link)和导入(@import)的区别(2009年4月13日更新) - 3,279 views
- 用Aptana调试JavaScript教程 - 3,167 views
- 前端开发必备工具之辅助开发工具篇 - 3,136 views
- 联系我 - 3,018 views
友情链接
blogroll
- javascript森林
- TwinsenLiang
- 关注前端jQuery
- SMbey0nd's Blog
- leeiio chaos made
- 蜗爱css
- csszhan.com
- 笑话网
- 内部参考
- isparkle
- 彩虹堂
- demox
- PHPText.Net
- 搜道空间
- putaoshu
- makerlover
- 我爱CSS-DivCSS网页布局
- CSS森林
- 百搜吧
- 丸子の部落
- 彬Go-关注前端开发
- 背光脚本
- 阿肆的个人博客
- 奇迹林
- gulu77
- foxbaty’blog(狐狸)
- 痕的blog
- 天天爱我吧
- Skiyo
- 快乐心情
- 偸米飯
- 前端观察
- 量子期货
- ImageMagick中文站
- 一路告别
- 冰剑'blog
- CSS学习网
- Clover’s Blog
- CSS9.NET
- 蝎子’s Life
- 飘飘的生活空间
- Rekey's WebSpace
- what's the RIA?
- 堂主
- 爱素材
- 走走停停看看
- 猴子
- 這才叫做畫-WAYCE BLOG
- 关注学习前端开发
- 禽兽
- 筱白—人生若只如初见
- 绣财
- IT从业者网络导航
- 卜咯米
- 追意布落格
- 幼学笔记
- 啄米鸟
- TsoLong Blog
- Y7L8′Blog
- CssRain-前端技术
- 奥想创意
- 小繁's Blog
- L 生活茶水间
- Time Machine
- Web元素
- ytzong’s blog
- 源码控件网
- 关于前端那点事儿
- OurJS.cn
- PRcss
- 流水涵清
- YoungBoy
- 一路彷徨
- 搜道
- moondy's zone
- unicac
- Crazy Web
- Beautycss
- web前端开发工程师的随记-黑妞haha
- 鹏衷铃
- .Net世界
- 壹想
- 第三据点
- 十字花匠
- じ☆ve怺狟'Blog
- 碧云轩工作室
- 布丁足迹
- weilaixu.cn
- linxz’s BLOG
- 蓝色骑兵
- website ui
- Kanoe's Blog
- 广东考试网
- stri’s blog
- 凤鸣BLOG
- xhlv
-
RSS源
专属 CSS Hack
转载:浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
一个简单的用户引导效果
差不多一年没碰jQ了,由于公司现在都用jQ,所以这几天重温了一下jQ,写了一个简单的用户引导效果,写的不好欢迎拍砖。
用户引导效果简单的谁就是将一些重要功能提示给用户,比如你注册到某个网站,第一次进入就将重要的功能或板块高亮提示给你。才疏学浅真不知用文字怎么表达,之间看简陋到不能再简陋的效果吧:
点击查看demo:http://www.css88.com/demo/UGuide/index.html
这个效果可能你也看到过,在163邮箱新注册的会员就有这个效果。
总是想着优化一下这个效果,除了table外我还想到了用border找半透明的遮罩层,这样就只用一个容器了,jq操作方便了许多
点击查看demo:http://www.css88.com/demo/UGuide/index2.html
可惜这个效果在ie8下有bug出现了横向滚动条,在ie6,ie7下更加离谱了(请看第3步和第4步),到现在还没想出解决方案,如果您知道欢迎留言告知,谢谢!
border-collapse: collapse在FireFox,IE6,IE7下的小bug
一直使用border-collapse: collapse来做1像素边框的表格,比如:
table{border-collapse:collapse;border: 1px solid #FFFFFF;}
table td,table th{border: 1px solid #FFFFFF;}
昨天css森林的飘发了一篇文章(http://www.charlesgarwood.com/blog/?p=13)才发现原来border-collapse: collapse在FireFox下有个小bug。
ie8,CH,OP,SF都没什么问题,而在FF下却又一个小BUG:table的左边会多出1个像素的边框,并且在ie7和ie6下单元格宽度没有平分,第一个比其他几个要小一点,如图:
Dom Ready和Dom Load
1、Dom Ready
真不知道这个标题该怎么取,暂时就先凑活着用了。
用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情,比如:
window.onload=function(){
//do something
}
//或者经常用到的图片,假设这个
document.getElementById("imgID").onload=function(){
//do something
}
推荐一个PNG压缩网站
推荐一个PNG压缩网站,压缩比率还是蛮高的,好工具啊!
【前端开发小工具】unicode转换工具
unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发,1994年正式公布。随着计算机工作能力的增强,unicode也在面世以来的十多年里得到普及。更多可以查看百度百科和维基百科。
unicode在我们前端开发中也会偶尔用到,比如:
- 有些js代码使用unicode加密;
- 用asv和闪客精灵等flash破解工具破解出来的中文部分也是unicode编码的;
- css中中文最好用unicode表示,比如使用宋体是{font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。
同事给我开发了一个unicode转换工具,主要功能是字符串和unicode互转,一般页面上,js,flash中用的是以”\u”开始的unicode,css中则是以”\”开始;
google chrome字体最小12px的问题
昨天发现google chrome字体小于12px的时候都以12px显示,无语,后经css森林的讨论和测试发现将google chrome的语言设置成英文就没这个问题,应该给google chrome提交这个bug啊!
目前还没找到解决方案,如果有请留言告知!万分感谢







