Xhtml/Css - Moondy’s Zone

类别‘Xhtml/Css’的存档

页面复制的完美解决方案 (2011-4-17)

类别: JS/Ajax, Xhtml/Css | 962 Views| 3条评论

之前有发过一篇有关兼容浏览器页面复制的文章，很早就有朋友反应说在某些情况下无效，当时却还没有怎么注意，后来自己要用的时候发现的确是有问题，查了一下原因，原来是FLASH版本的问题。现在的浏览器中FLASH版本基本上都升到10了，在FLASH10中，要有实际的点击动作才能触发复制，所以原来那个是就无效了。

当然，解决办法还是有的，在这里介绍一个：zeroclipboard。同样也是利用FLASH来实现的，所以浏览器的兼容性是没有问题的。

另外，现在很多项目都会用到jquery，用的时候需要注意，尽可能用$(window).load()，因为如果用$(document).ready()的话会有可能在还没被加载的情况下就运行了，会复制失效。对于用jquery框架的朋友，这里推荐一个专门针对jquery的版本：zClip。

CSS3测试之——QQ企鹅 (2010-7-20)

类别: Xhtml/Css | 3,530 Views| 32条评论

自从HTML5还有CSS3草案公布以来，国内兴起了一股学习的热潮，再包括JS2，这些都是未来WEB前端所发展的方向。做为一个WEB前端人员，必需要时刻关注前沿知识，不然等待的只有淘汰。不过，就我在公司接触的一些项目的统计来看，IE6还是浏览器占有率的大头，超过半数。所以，想迎来全面支持html5/css3的时代，恐怕还是有点遥远。

言归正传，当前关于CSS3，有个挺有名的机器猫测试页面，说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下，实很大噱头在里面，不知是有意还是无意，造成了在IE各版本下表现不一的状况，好像有点故意打压IE的嫌疑，虽然我也不喜欢IE。其实总的说来，要么就是支持，要么就是不支持，其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3，而是用各自的私有属性来支持而已。

不过看完之后，突发其想，想画一个QQ企鹅。说干就干，花了半天的时间，我承认也有参考下机器猫的代码，但是这只企鹅在不同浏览器下没有那么多的形态，只有支持与不支持两种。如下：

IE9以下的IE版本，会是左边那种情况；FF以及webkit内核的浏览器会是右边那种情况（opera下没有肚皮上的阴影），当然，版本不要太低。

虽然也没多少技术含量，但原创也辛苦。欢迎朋友们转载，但请标明出处。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 QQ企鹅</title>  <style> body {margin:0; padding:0; background:#FFF;} #qq {position:absolute; margin:50px 30%; width:500px;} #face{ position:relative; z-index:100; width:260px; height:200px; border-radius:400px 400px 280px 280px; -webkit-border-radius:400px 400px 280px 280px; -moz-border-radius:400px 400px 280px 280px; background:#000; background: -webkit-gradient(linear, right top, left bottom, from(#999) ,color-stop(0.20, #333), color-stop(0.73, #000),color-stop(0.95, #000), to(#000)); background: -moz-linear-gradient(right top, #999,#333 20%, #000 73% ,#000 95% ,#000 155%); top:-15px; } #eyes{ position:relative; top:-5px; } div.eye{ position:absolute; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; width:50px; height:70px; z-index:20; background:#fff; } div.black_eye{ position:absolute; width:15px; height:20px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#333; z-index:21; -webkit-animation-name: cate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 200; } div.black_left{ top:95px; left:90px; } div.black_right{ top:95px; left:160px; } div.eye_left{ top:70px; left:65px; } div.eye_right{ top:70px; left:140px; } .mouth_up { border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position:absolute; overflow:hidden; border-bottom:3px solid #F90; width:180px; height:22px; top:145px; left:40px; } .mouth_down { position:absolute; overflow:hidden; width:150px; height:15px; top:164px; left:55px; } .mouth_in { position:absolute; border-radius: 400px; -webkit-border-radius: 400px; -moz-border-radius: 400px; background:#F90; width:400px; height:400px; } .mouth_up div { top:0; left:-110px; } .mouth_down div { border:3px solid #000; bottom:0; left:-124px; } .scarf { position:relative; border:2px solid #000; z-index:90; width:256px; height:200px; border-radius:600px 600px 280px 280px; -webkit-border-radius:600px 600px 280px 280px; -moz-border-radius:600px 600px 280px 280px; background:#D00; top:-185px; } .main_body { position:relative; z-index:80; width:340px; height:260px; border-radius:500px 500px 400px 400px; -webkit-border-radius:500px 500px 400px 400px; -moz-border-radius:500px 500px 400px 400px; background:#000; top:-270px; left:-40px; } .hand_left { position:absolute; width:150px; height:45px; border-radius:120px 0 0 25px; -webkit-border-radius:120px 0 0 25px; -moz-border-radius:120px 0 0 25px; background:#000; transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); top:75px; left:-75px; } .hand_right { position:absolute; width:150px; height:45px; border-radius:0 120px 25px 0; -webkit-border-radius:0 120px 25px 0; -moz-border-radius:0 120px 25px 0; background:#000; transform: rotate(35deg); -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); top:75px; left:270px; } .main_body .belly { position:absolute; width:300px; height:220px; border-radius:500px 500px 400px 400px; -webkit-border-radius:500px 500px 400px 400px; -moz-border-radius:500px 500px 400px 400px; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#FFF) ,color-stop(0.50, #FEFEFE), color-stop(0.73, #F2F2F2),color-stop(0.95, #EEE), to(#BBB)); background: -moz-linear-gradient(right top, #FFF,#EEE 50%, #CCC 73% ,#999 95% ,#BBB 155%); top:30px; left:20px; } .main_body .belly .tie { position:absolute; width:35px; height:60px; border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border:2px solid #000; background:#D00; transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); left:55px; top:48px; } .main_body .belly .tie .tie_line { position:absolute; width:2px; height:40px; background:#000; left:25px; } .foot_left { position:absolute; width:120px; height:45px; border-radius:160px 40px 100px 40px; -webkit-border-radius:160px 40px 100px 40px; -moz-border-radius:160px 40px 100px 40px; background:#F90; border:2px solid #000; top:370px; left:-40px; } .foot_right { position:absolute; width:120px; height:45px; border-radius:40px 160px 40px 100px; -webkit-border-radius:40px 160px 40px 100px; -moz-border-radius:40px 160px 40px 100px; background:#F90; border:2px solid #000; top:370px; left:176px; } </style> </head> <body> <div id="qq"> <div id="face"> <div id="eyes"> <div class="eye eye_left"></div> <div class="black_eye black_left"></div> <div class="eye eye_right"></div> <div class="black_eye black_right"></div> </div> <div class="mouth_up"> <div class="mouth_in"></div> </div> <div class="mouth_down"> <div class="mouth_in"></div> </div> </div> <div class="scarf"></div> <div class="main_body"> <div class="hand_left"></div> <div class="hand_right"></div> <div class="belly"> <div class="tie"> <div class="tie_line"></div> </div> </div> </div> <div class="foot_left"></div> <div class="foot_right"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

关于图片缩放失真的解决方法 (2010-5-4)

类别: Xhtml/Css | 7,003 Views| 16条评论

首先先赞一下咱的设计师，微调了一下一点点的失真都被她发现了。

其实做前端应该经常会碰到这个问题，对图片的缩放会产生失真，主要是体现在IE上了，图片会出现锯齿。在FF、chorme等浏览器上不存在问题，天生就可以对缩放的图片进行柔化。对于这个问题，有人提出过用 -ms-interpolation-mode: bicubic; 来解决，不过这是IE7的私有属性，对于当前仍然占大头的IE6还是不能撒手不管呀。

解决的方法就是：VML。VML是一种基于XML的语言，可能有些朋友会觉得很陌生，其实当你从WORD里复制一段内容直接粘贴到HTML里的话，发现多出来的那一些所谓的WORD的样式，那就是VML。VML的全称是The Vector Markup Language(矢量可标记语言)，从这个名字我们就能理解为什么它可以处理图片缩放失真的问题了。哎，在这里也不说太多了，其实本民工也不太熟，临时了解的一些而已了，嘿嘿。

VML是IE only的，不过刚才也说过了，在FF、chorme等浏览器上是没有这个问题的（另，IE8中也已经解决这个问题），也就是说解决了IE也就解决了这个问题了。我还是直接帖DEMO吧，我也是现学现卖了，对VML有兴趣的同学可以到这里看看 http://www.infowe.com/vml/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> img {width:300px; height:300px; -ms-interpolation-mode: bicubic;} v\:image{behavior: url(#default#VML);width:300px; height:300px; display:inline-block;} </style> <title>全兼容解决图片缩放失真</title> </head> <body> <img src="http://www.moondyzone.com/wp-content/uploads/2010/05/qq.gif" /> <v:image src= "http://www.moondyzone.com/wp-content/uploads/2010/05/qq.gif"></v:image> </body> </html>

提示：你可以先修改部分代码再运行。

在这里还得说下，用IE打开的话，会看到两个图片的对比，而非IE的因为不支持VML所以只能看到一个图。而在实际应用中，应该通过后台程序判断当前的浏览器，然后选择是输出img还是v:image。

最后再说下，在不是很有必要的情况下，我觉得还是保证图片的原尺寸比较好，因为缩放的还是不及原尺寸的清晰。

斜角导航及滑动门的延伸 (2009-11-15)

类别: Xhtml/Css | 10,934 Views| 7条评论

下面的这两个例子都跟滑动门有关，应该都算滑动门的延伸。

之前有在BI上看到有朋友发过斜角导航，觉得可以有更好的解决方案。但最近都很忙，两个月没有来更新内容了，今天抽了点时间写了个DEMO发上来，自己写的，如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了，直接发例子了，方法很简单，一看就明白的。有一点要注意了，图片的透明部分需要花点时间来处理了。

提示：你可以先修改部分代码再运行。

其实当真正理解到方法之后，就可以延伸出很多效果出来。比如说下面的这个步骤导航（名字是我随便起的），是我在某个实际项目中用到的一个效果，给大家参考下，其实还能再优化一些的。

提示：你可以先修改部分代码再运行。

a:hover在IE6中的BUG (2009-8-16)

类别: Xhtml/Css | 4,013 Views| 10条评论

哎，最近工作太忙，都好久没来写点东西了。

这也是最近工作中碰到的一个问题，其实以前也经常碰到过。具体是这样的，有一个图片链接，为了有明显一些的提示效果，需要在鼠标移上去的时候把它放大。按思路来说，其实是很容易的，只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上，在IE6中，a:hover img{}里定义的内容并不生效。

IE6对伪类的支持真的很烂，除了A标签外其它标签都不支持:hover伪类，而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性：

a:hover {zoom:1;}/*这里可以换成其他很多的属性。*/
a:hover img {……}

在网上找出的答案基本上都是这样，的确这样能解决问题，但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout，但经过试验，不能触发layout的属性也能生效，比如说color、border之类的。也就是这一次，我才找到此BUG的原因所在：当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题，至于定义什么值就看具体情况了，至少可以不用zoom这个看起来有hack嫌疑的属性咯。

对CSS渲染效率的一些研究 (2009-7-21)

类别: Xhtml/Css | 2,924 Views| 7条评论

其实在平时很少注意到CSS渲染效率的问题，不过在很多时候都是细节决定成败，这也是个不容忽视的问题。之前也拜读过网上流传的一篇有关CSS渲染效率的文章，传得太多，也不知原作是谁了。不过并不是太赞同其中的一些观点，所以就本人工作中的一些经验以及看法，说说这个问题，个人观点并非权威，欢迎拍砖。

在这里我们不只是单纯地研究渲染效率的快或慢，应该从一个项目的整体来看。页面渲染的这个过程，是在用户本地进行的，也就是说用户打开页面，载入了HTML代码以及样式表、JS等等相关的文件，浏览器再跟据这些文件把页面渲染出来。关于速度方面，我们更注重的是载入的速度。而渲染速度，的确某些样式的写法会存在渲染速度的差异，但对于当前随便每秒都能运算上亿次的个人电脑来说，把一张背景图平铺100次跟平铺10000次又有多大区别呢？当然，细节，细节决定成败，但细节不等于吹毛求疵，下面说说个人对此侧重点的一些看法。

可能会有影响，但可跟据具体情况忽略的部分
比如说颜色值，color:#F00;、color:#FF0000;、color:red; 这三者都是一样的，至少用人类的感观无法区分其对渲染速度的影响，用简写可能或多或少能减少那么几个字节的体积，不过标准写法是6位大写字符的写法。

display与visibility就不详说了，这本身就是两种不同的表现属性，该用谁就用谁。

注意某些样式的保留属性，比如说：
background:url(image.jpg);这样一句，那么在渲染的时候会默认输出background-color : transparent 、background-attachment : scroll 、background-repeat : repeat 等等属性。在完美主义者的眼里这是对资源的一种浪费，但同样，人类的感观体会不到此影响。其实个人还是认为简写形式有助于减少样式表的体积，而且这也似乎是行内默认的写法了。同样的，border、list-style等也有默认属性，也不用深究了。

背景平铺的问题
对于可平铺的背景来说，很多人喜欢用1px为单位来进行平铺，前面也说了，其实平铺多少次对于个人电脑来说几乎都是一样的，关键在于图片的大小了。对于可平铺的图片，一定范围内的像素值是一样的，所以增大尺寸对于积体的影响并不大，我这里对比了单色1*1跟10*10的图片在jpg跟gif格式下的大小，相差都几有几个字节

其实本人不太建议用1px的图，至少自己在修改的时候无法一眼看出那张图片是什么。而且现在用css sprites也会把可平铺的部分也做进去，这也是对渲染效率的提升了。

再说说会有明显影响的部分
@import 的使用
不建议在页面里使用，他会在页面加载完之后才被加载，有可能使页面闪动或是裸体。如果是样式表过多为了方面管理的话，放在CSS里就好。

某些选择符的使用
渲染的过程也就是对这些选择符的匹配，所以我们可以很容易地理解到，一些比较直接的选择符比如类选择符、ID选择符等的匹配效率高，而一些条件比较繁复点的选择符比如子选择符、属性选择符等的匹配效率相对来就低一些。当所匹配的量比较多的时候，可以明显地感觉到速度的差别。（关于各种选择符，具体可查看CSS手册了）

IE的滤镜
自从标准化的兴起以来，IE滤镜的日子就不好过了，除了不兼容以外，某些滤镜真的蛮耗资源的。现在还在用的可能就是为了处理IE6下图片透明的问题了，建议能不用就不用他吧。

expression的使用
也许这个不能归为渲染的部分，不过他的确相当占资源，如果加得多的话，会让你的页面其慢如牛。

Moondy’s Zone
一位IT民工的点点滴滴…… WEB前端、网页重构、AS3

类别‘Xhtml/Css’的存档

页面复制的完美解决方案 (2011-4-17)

CSS3测试之——QQ企鹅 (2010-7-20)

关于图片缩放失真的解决方法 (2010-5-4)

斜角导航及滑动门的延伸 (2009-11-15)

a:hover在IE6中的BUG (2009-8-16)

对CSS渲染效率的一些研究 (2009-7-21)

分类目录

最近文章

标签云

最新评论

加油站

友情链接

Moondy’s Zone 一位IT民工的点点滴滴…… WEB前端、网页重构、AS3

类别‘Xhtml/Css’的存档

页面复制的完美解决方案 (2011-4-17)

CSS3测试之——QQ企鹅 (2010-7-20)

关于图片缩放失真的解决方法 (2010-5-4)

斜角导航及滑动门的延伸 (2009-11-15)

a:hover在IE6中的BUG (2009-8-16)

对CSS渲染效率的一些研究 (2009-7-21)

分类目录

最近文章

标签云

最新评论

加油站

友情链接

Moondy’s Zone
一位IT民工的点点滴滴…… WEB前端、网页重构、AS3