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 里发现的,感觉非常好,在这儿要非常感谢这位网友,以后我会经常使用这个方法。 CSS清除浮动 Left Right CSS清除浮动 Left Right 在父层里加了这2个属性 overflow:auto;zoom:1;,前一个将层撑开,后一个是解决IE6 里层边框断裂的问题。

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 里中英文字体高度不一样

很多时候会设置字体为“宋体”,就像下图中一开始设置的一样,这样的设置在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;     …

Javascript 获取 URL 参数

function getArgs( ) { var args = new Object( ); var query = location.search.substring(1); // Get query string var pairs = query.split(“&”); // Break at ampersand for(var i = 0; …

Jquery 表格上色插件

http://franca.exofire.net/jq/colorize Coloriza 是一个Jquery 插件,可以为表格的行添加背景颜色,鼠标动作后为行、列增加高亮效果。你可以为很多行、列填色,只要你愿意。再从点击已经填色的行、列就可以还原表格本色。 怎么使用? 使用默认设置(colorizes a row) $(‘#yourTableId’).colorize() ; 其他设置和参数: altColor : alternate row background color. The default is ‘#ECF6FC’, ‘none’ can be used for no alternate background color.交替行的背景颜色。默认值为’#ECF6FC’,’none’ …