摘要：语法：position : static | absolute | fixed | relative取值：static :默认值。无特殊定位，对象遵循HTML定位规则absolute :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有... 阅读全文

摘要：最近在用jquery 2.0 才知道已不支持IE6/7/8但又不想换回jquery1.X;找了一资料发现条件注释可以解决这个问题这个也像程序中的条件判断，先来介绍几个单词lt ：Less than的简写，小于的意思。lte ：Less than or equal to的简写，小于或等于的意思。gt ... 阅读全文

摘要：jQuery BxSlider滑动滚动效果jQueryEasing动画效果扩展 阅读全文

摘要：_:-ms-fullscreen,:root input[type="date"],_:-ms-fullscreen,:root input[type="time"],_:-ms-fullscreen,:root input[type="datetime-local"],_:-ms-fullscre... 阅读全文

摘要：入门实例组件结构参数公共命令事件Events参数说明：http://my.oschina.net/shunshun/blog/204587代码示例1：var options = { currentPage: 3, totalPages: 10, itemTexts: functio... 阅读全文

摘要：CSS3 渐变效果background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00' 阅读全文

摘要：阴影效果曾让 Web 设计师既爱又恨，现在，有了 CSS3，你不再需要 Photoshop，已经有网站在使用这个功能了，如 24 Ways website. -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; 前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置：text-shadow: 2px 2px 5px #ccc; 支持的... 阅读全文

摘要：-webkit-transition -moz-transition transition可以定义动画的变化时间曲线-webkit-transition-timing-function: ease-out ,cubic-bezier(x1,y1,x2,y2);（2）-webkit-transition-property指定发生变化的属性-webkit-transition-property: opacity;（3）-webkit-transition-duration制定发生变化的时间-webkit-transition-duration: 2s;-webkit-transition-dela 阅读全文

摘要：box-sizing 的属性，它具有“content-box”和“border-box”两个值。定义 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准；定义 box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6 相同border 与 padding 都包含在 width 之内 阅读全文

摘要：本文和大家重点讨论一下DIV高度自适应及注意问题，主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况。DIV高度自适应及注意问题积累了一些经验，总结出一些关于div高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。一、DIV高度自适应（父div高度随子div的高度改变而改变）1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。代码： 父div 子div 子div 效果：IE、FF下一致2、如果父div定义height,子div均为标准流的... 阅读全文

摘要：这种类型的搜索框应该较为常见，设计元素有圆角和内阴影，在CSS2时期通常都是用图片实现的，来看下CSS3的效果，而对于IE6,7这样的悲剧浏览器，也不至于太难看:画圆通过设置一个较大的圆角值就能实现圆形，下面画了一个直径为100的圆。.circle { width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;}内阴影效果box-shadow的第一个值是阴影类型，默认是外阴影，平常我们使用它都不会设置这个值，所以就是外阴影的效果。如果要实现内阴影效果，需要手动... 阅读全文

摘要：什么是CSS Hack？简单地讲：这个针对不同的浏览器写不同的CSS code的过程，就叫CSS Hack！通俗地讲：CSS Hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。 由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS Hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。CSS Hack的原 阅读全文

摘要：这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过，也经常有朋友问我，所以今天就系统的说一下：我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。代码：div{ background:#FFF url(image) no-repeat fixed x y;}这里的background的属性值依次为：#FFF背 阅读全文

摘要：CSS实现跨浏览器的box-shadow盒阴影效果(2)by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=976一、前言我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”，本文虽然题目类似，但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜，但是使用的是shadow滤镜，这种滤镜的效果很牵强，效果过渡不自然，见下图：您可以狠狠地点击这里：IE下阴影不自然demo而本文实现的IE下的盒阴影 阅读全文

摘要：默认的属性值都是static，静态。就不用多说了。最关键的是relative（相对）以及absolute（绝对）。往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性position设置为relative就可以了。也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。例如如下A-B的嵌套结构 <div id="A& 阅读全文

摘要：CSS中的行为——expression最近对CSS中的行为比较感兴趣，虽然是不符合标准的也只有ie才能识别，但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子，因为都被转烂了，没法注明出处。IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员 阅读全文