分类目录归档：前端技术
WordPress is_home() Not Working
is_home() is a very usefull functions in wordpress. just like his name, there use to judge if the page is home page or not, so people can do something special setting in home page from this judge, but sometime, you … 继续阅读
CSS 学习心得
最近想写一些关于学习CSS 的文章，但是一直不知道如何入手，提纲把，google 一下到处都是，而且都差不多，我想整个别具一格的，但是到最后还是落入俗套，算了吧，俗就俗把，但求内容不俗。 这是作者编写的一个关于 CSS 的学习指南，作者将他多年在CSS工作实践中得到的经验在这儿分享给每一位读者。文章所写的都是作者在CSS编写过程中的真切感受和折中解决方案，希望读 者们能够喜欢。 一方面来说，作者认为自己的CSS编程已经上升到一定的高度了，当然可能在一些大虾面前只是班门弄斧，但是作者还是将它写了出来，作者自己认为这些 都是一下很好的理解和观点，希望能对大家有所帮助，从而少走弯路。 另一面，作者希望这儿能成为一个交流的媒介，高手可以留些你们更高深的见解，新手也可以留下你们的疑惑。当然我也可以从中得到学习。 地址是：http://learncss.lunarvill.com/ 不断更新中。
网页开发必备的 firefox 插件
1，首先是 firebug，我想再熟悉不过了，用它来调试 CSS，JavaScript 真的是说不出来的方便。我想我CSS 的成就多数是多亏了这个插件。 2，colorzilla 可以直接从网页里吸取颜色，敢接很方便。至少我这样觉得。 3，measureid，激活后可以尺量页面里盒子的大小，对于页面布局时尺量大小很好用。 这是这么多年来我锲而不舍的3个插件，也是我经常推荐给朋友。
CSS清除浮动的方法
网页设计中常常碰到层高度无法撑开，只显示一条直线的情况，这主要是该层内部使用了 float 属性。 通常解决方法是在该层内部加一个 <div style=”clear:both;”></div> 清除一下浮动即可，这也是我用的最多的方法。这儿是用的 DIV，wordpress 模板里很多人用的 HR。个人认为没有什么区别，可能就是少几个字母吧。 另一个方法是我刚刚从google 里发现的，感觉非常好，在这儿要非常感谢这位网友，以后我会经常使用这个方法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS清除浮动</title> <style type="text/css"> *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} … 继续阅读
Font-family 兼容设置
google 里看到了很多人关于font-family 字体顺序的兼容性设置。都是有心人，在此也收录一下别人的研究成果 font-family: Tahoma, Helvetica, Arial, sans-serif; Tahoma 系的中性字体。推荐使用在13px以上的环境。 font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif; Verdana 系的宽扁字体。推荐在11px以下环境使用。 正对 linux 桌面系统，font-family 的属性设置： 而这儿我想说的是，一般中文网站，大家都会吧 中文字体 放在font-family 属性的第一个，然后紧接着写英文字体，我几次测试后发现中文字体放第一位，在linux 下，英文字不能被渲染，即使你所这只的那些字体linux 里都用，后来我吧中文字体写在最后一个，就没有问题了，但是windows下又不正常，windows 需要把中文字体放在第一位，不然就会出现 IE8 里中英文字体高度不一的问题。 所以也就只能这样了，在windows 下，将中文字体设置在第一位，但是不能直接写字体中文名,比如“宋体”，“黑体”，应该写成 “simsun”，或“simhei”，正对linux 系统，需要将中文字体写在最后一个，这儿可以写成“宋体”，“黑体”，因为这儿不会有 IE 浏览器。
CSS 层最小高度的全兼容写法
min-height:50px; _height:expression(this.height < 50? "auto" : "50px");
JavaScript Runcode
代码预览器 <html> <head> <title>代码预览器</title> <meta http-equiv=Content-Type content="text/html; charset=gb2312"> <script language=JavaScript> var currentpos,timer; function initialize() { timer=setInterval("scrollwindow()",50); } function sc() { clearInterval(timer); } function scrollwindow() { currentpos=document.body.scrollTop; window.scroll(0,++currentpos); if (currentpos != document.body.scrollTop) sc(); } document.onmousedown=sc document.ondblclick=initialize </script> </head> <body> … 继续阅读
IE8 里中英文字体高度不一样
很多时候会设置字体为“宋体”，就像下图中一开始设置的一样，这样的设置在ie8之前的浏览器都没有问题，在其他浏览器（Firefox，opera…）也都没有问题，但是在IE8里就怪了，出现下面的情况，数字，非中文字符，英文都会比中文高出一点，而且字体越大，差异越明显。我想，这或许是IE8的一个bug。 网上查了有人说可以吧中文的“宋体”写成“simsun”，我试过了，可以的。 font-family:”simsun”,serif; 后来我看了网易得做法： font-family:\5B8B\4F53,Arial Narrow,arial,serif; 这样挺好，正常了。到底是大网站 head里竟然还用这个“<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />” 学习的同时顺便鄙视一下。
针对IE6,IE7,IE8和firefox浏览器css hack
针对样式名 如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000;} 如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效 如果只是不让ff、IE8看见用*body .head{color:#000;} 即对ff、IE8无效 针对具体属性 如果只让ie6看见用_ .head{_color:#000;} 如果只让ie7看见用+与_结合的方法: .head{+color:#f00;!;_color:#000;} IE8正式版hack \9″ 例:”margin:0px auto\9;”.这里的”\9″可以区别所有IE8和FireFox. “*” IE6、IE7可以识别.IE8、FireFox不能. “_” IE6可以识别”_”,IE7、IE8、FireFox不能. 如： .a {color:#f00; color:#f60\9; +color:#00FF00; _color:#0000FF; } 从左到右分别对应 FF,IE8 IE7 IE6
JQUERY 隐藏页面无连接图片
列遍检查网页所有 ，发现SRC属性为空的，将该图片隐藏。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN"> <head> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>No display images without src value</title> </head> <body> <script type="text/javascript"> $(function() { var pic_len = $("img").length; … 继续阅读