摘要： 再探@font-face及webIcon制作@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face 是个什么东西，本文不做过多说明，不太清楚的童鞋可以看这里 http://www.w3schools.com/css/css3_fonts.asp。需要强调的是他的书写格式：@font-face { font-family: ; src: [][... 阅读全文

摘要： 响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面，不仅仅是针对于物理尺寸，而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下，都是通过内联块元素标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites，并将其保存为.gif或.png文件。然而，更糟糕的是图片根据响应式内容不断的放大，对于位图图像会产生锯齿，而且会越明显。更糟糕的是，CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。在固定尺寸之时，图标看起来很好，但放大，哪怕稍为放大一点点，边缘都会有锯齿，而且看起来模糊。我想这也是很多设计师和开发人员尽量避免在设计中使用图标的原因，尽管在 阅读全文

摘要： 技巧1：绝对定位的元素第一种方法，使用页面上的HTML元素的绝对定位来创建浮层叠加效果。在模板中使用一个空的div标记，使用CSS的绝对定位给这个div指定一个高的z-index值，确保这个空的div保持在页面其他元素的顶部，除了叠加在这个层上面的弹出窗口，需要设置一个更高的z-index值。 假如我们给一个空的div标签添加一个.overlay类名，使用CSS定位，将这个层叠加在页面上面：html, body{ min-height: 100%;}body{ position: relative;}.overlay{ position: a... 阅读全文

摘要： CSS3实现11种经典的CSS技术一、透明元素(opacity)：如果你最近有访问Envato website，你就会发现，这个网站上使用了大量的透明属性——CSS3 Opacity。这个属性使用有一段时间了，在IE下我样要配合IE的滤镜一起来使用，只是有一点需要注意的，使用opacity制作透明效果会影响其所有后代元素的透明度。CSS经典方法 CSS3方法 用CSS3属性，我们可以不考虑IE下的效果，所以可以直接把IE下的滤镜去掉。具体效果DEMO。如果你想了解其使用方法，可以参阅本站的《CSS3 RGBA》一文... 阅读全文

摘要： background-size:background-size: auto || || || cover || contain取值说明：1、auto:此值为默认值，保持背景图片的原始高度和宽度；2、此值设置具体的值，可以改变背景图片的大小；3、此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用.. 阅读全文

摘要： 图标字体http://icomoon.io2013-03-15 15:55:47最近在做PC客户端里面的内嵌网页，内核终于在二期使用了Webkit，↖(^ω^)↗对CSS的支持更好了。前端GG特别兴奋的跑来和我说：你把图标做成字体吧，这样就不用切图啦~然后发给了我好多资料……( ⊙ o ⊙ )啊！原来还可以这样，世界真奇妙~CSS3可以利用@font-face来自定义字体，将你的一整套图标变成字体，通过这种方法会减少使用图片，文件非常小，同时也增强了可扩展性。比如如果需要将图标放在不同的背景中，以前设计时需要做几套方案，现在就像变换字体颜色一样方便使用css进行调整。（以后妈妈再也不用担心我要 阅读全文

摘要： HTML结构 Home About Contact F.A.Q s CSS 代码a {text-decoration:none !important;outline:none !important;}body {background:rgb(245,245,245);}.nav { margin:50px auto; text-align: center; width:591px; height:41px; border:1px solid; border-color:rgb(181,181,181) rgb(235,235,235) rgb(236,236,23... 阅读全文

摘要： this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如， function test(){ this.x = 1; }随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。下面分四种情况，详细讨论this的用法。情况一：纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。请看下面这段代码，它的运行结果是1。 function test(){ this.x = 1; alert(this.x); } test();... 阅读全文

摘要： 无标题文档此代码按照ie 5的模式解析若按照ie 7的模式解析 可设置compatible = ie 7 阅读全文

摘要： js判断浏览器是否支持css3属性作者：结一 日期：2013-12-10 点击：52var cssSupports = (function() { var div = document.createElement('div'), vendors = 'Khtml O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; if ('-ms-' + prop in div. 阅读全文