用CSS3制作50个超棒动画效果教程
Posted in 网页重构 by 吖吖 - 六 11, 2010
CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函 数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这 类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~) 1.CSS3实现钟表效果(基于jQuery) 使用CSS3的基本变形特性:rotate，并结合了jQuery这类javaScript框架制作的CSS3时钟效果。 2.模拟时钟 模拟时钟基于过渡webkit和CSS3变形，javascript用于将其按当前时间转动。 3.可使用箭头键旋转的3D立方体. 你可以使用上、下、左、右方向键控制这个3D立方体，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。 4.多种3D立方体(淡入淡出) 多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’ ，我个人觉得效果很震撼，你能看到写在3D立方体上的透视感极强的文字。
COMMENTSIE6下的CSS BUG枚举
Posted in 网页重构 by 吖吖 - 六 09, 2010
1、终极方法：条件注释 <!–[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]–> <!–[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]–> <!–[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]–> <!–[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]–> <!–在 IE6及IE6以下版本中加载css–> <!–[if lte IE 6]> <link type=”text/css” rel=”stylesheet” href=”css/ie6.css” mce_href=”css/ie6.css” /><![endif]–> 缺点是在IE浏览器下可能会增加额外的HTTP请求数。 2、CSS选择器区分 IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。 /* IE6 专用 */ .content {color:red;} /* 其他浏览器 */ div>p .content {color:blue;} [...]
COMMENTS<!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=gb2312″ /> <title> 滑动门</title> <style media=”screen” type=”text/css”> <!– *{font-size:12px;} html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} /* 标准盒模型 */ .ttl{height:18px;} .ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;} .w936{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/} /* TAB 切换效果 */ .tb_{background-image: url(‘http://websky18.com/d/file/mimg/tabs1.gif’); background-repeat: repeat-x;background-color: #E6F2FF;} .tb_ ul{height:24px;} .tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;} /* 控制显示与隐藏css类 */ .normaltab { [...]
COMMENTS如何快速定位页面中复杂 CSS BUG 问题
Posted in 网页重构 by 吖吖 - 五 11, 2010
相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。 对于快速定位，个人的经验处理一般如下（基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题）： 1、检查页面的标签是否闭合 不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。 快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。 2、样式排除法 有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。 对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。 3、模块确认法 有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML [...]
COMMENTS