Category: Front-end
20段Web开发不容错过的CSS代码
Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。 本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。 1. CSS Resets 网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,…
How to fix position absolute z-index bug in IE7
正常的我们做下拉菜单 和 幻灯片重叠在一起的时候，使用 z-index 就可以解决问题，正常的效果应该是这样： 但是天杀的 IE7 却是这样： 这时候任凭你怎么使用 position 和 z-index 都不会起作用！ 可以到google搜索 ie7 position absolute z-index 一大堆解决方案。经常我几番研究，下面示范一个通俗易懂的解决方法： 先看一下我的代码结构： 这两个层的 z-index 的值大设置并没有多大关系，只要按照显示在上面的数字越大就可以了。 下面我们找到 mega menu 的根层 #header，给她家上两个css属性 {position: relative;z-index: 10;} 在找到 幻灯片 所在层的根层 #page ，加上 css 属性 {position: relative;z-index: 1;} 保存，测试，看看是不是在IE7 里也正常了。 无聊的可以拿下面的代码中各个浏览器里面试试，定能发现其中的奥妙，至于这是IE7 的什么bug，那就不管了～ <style><!– .parent{width:200px; height:200px; padding:10px;} .sub{text-align:right; font:15px Verdana;width:100px; height:100px;} .lt50{left:50px;top:50px;} –></style> <div…
Backstretch Errot: has no method ‘backstretch’
a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method ‘backstretch’ maybe many guys got this error Maybe the issue is ’cause you put $.backstretch([“bg.jpg”]); ahead of jquery.backstretch.js plugin, try switch the postion.
jQuery 向上弹出式菜单
Slide Up Menu / jQuery 向上弹出式菜单 The jQuery Slide Up Menu it’s a good alternative to other existing menus giving the possibility to position the menu on the bottom of your header image or at the bottom of the window, acting like Windows Start Menu. You can let it behave like a normal menu or…
Simple jquery horizontal accordion
有时候需要的功能很简单，不需要动不动就几千行的插件，就像这个水平手风琴效果。 html code Freebies Download free files to make your job easier. Tutorials Tips and tricks to help you keep up with the latest technology. Inspiration Get inspired by what other designers are doing. Inspiration Get inspired by what other designers are doing. css dode #horizontal_accordion{ list-style: none; margin: 0 0 0 -2px; padding: 0;…
jquery select option 操作
jQuery 是一个非常强大的JS类库，现在越用觉得越好用了。 使用jquery如何操作select(下拉框)呢？主要讲下怎么动态添加option 动态选择option，假如我们的select 控件的 id 属性为 sel
CSS Flow Chart and Jquery Tips
Sigenics Managing Director 1 Managing Director 2 Managing Director 3 Managing Director 4 Managing Director 5 Managing Director 7 Managing Director 7 Managing Director 8 Managing Director 9 Managing Director 10 Managing Director 11 Managing Director 12 Managing Director 13 Sigenics Managing Director 1 Managing Director 2 Managing Director 3 Managing Director 4 Managing Director…
Jquery addClass siblings removeClass
开始，第一个元素默认被选择，鼠标经过改变被选择的元素，当鼠标离开，又恢复第一个被选择。 澳星移民 澳星留学 海外房产 澳星之友 澳星知道 关于我们 澳星移民 澳星留学 海外房产 澳星之友 澳星知道 关于我们
jScrollPane – 跨浏览器可样式滚动条
http://jscrollpane.kelvinluck.com/index.html jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane 是一个跨浏览器的 jQuery 插件，作者 Kelvin Luck，他把一个浏览器默认的滚动条（一个与内容溢出属性相关的元素）转换成 HTML 结构，这样可以跟容易的使用CSS编写他的样式。 jScrollPane is designed to be flexible but very easy to use. After you…
Kissy – 淘宝网的 UI 类库
这不是蜜雪薇琪的专辑，他是一个很成熟的 javascript 类库，你可以不知道他，但是你不可以不知道淘宝网，查看淘宝网的网页源码就可以发现他的身影。 http://kissyteam.github.com/docs/html/quickstart/
阿里妈妈里的广告牌DIY
随便捣鼓了一下，挺有意思的，看很多人做出来很多漂亮的Banner，自己也很少羡慕。 阿里广告在线生成 基本上不需要什么很技术的东西，也内置了许多特效，拖拖拽拽进成了，当然，做出来美不美还是看个人的。
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 will fond, it’s not working, is there something wrong? yes, it is. Cause another function…
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 里中英文字体高度不一的问题。 所以也就只能这样了，在windows 下，将中文字体设置在第一位，但是不能直接写字体中文名,比如“宋体”，“黑体”，应该写成 “simsun”，或“simhei”，正对linux 系统，需要将中文字体写在最后一个，这儿可以写成“宋体”，“黑体”，因为这儿不会有 IE 浏览器。