CSS display:none和visibility:hidden区别

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函 数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如SafariChrome这 类基于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立方体上的透视感极强的文字。

Continue reading →

IE6下的CSS BUG枚举

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;} –>

3、PNG半透明图片的问题

虽然可以通过JS等方式解决,但依然存在载入速度等问题,所以,这个在设计上能避免还是尽量避免为好。以达到网站最大优化。

Continue reading →

一款经典简洁的javascript+css Tab转换特效代码

<!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   { background-image:url(‘http://websky18.com/d/file/mimg/tabs2.gif’); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url(‘http://websky18.com/d/file/mimg/tabs3.gif’); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
–>
</style>
<script type=”text/javascript” language=”javascript”>
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如 果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g(‘tb_’+i).className=’normaltab’;g(‘tbc_0’+i).className=’undis’;}g(‘tbc_0’+n).className=’dis’;g(‘tb_’+n).className=’hovertab’;
}
// 如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div >
<div id=”tb_”>
<ul>
<li id=”tb_1″ onmouseover=”x:HoverLi(1);”>
ASP.NET</li>
<li id=”tb_2″ onmouseover=”i:HoverLi(2);”>
MYSQL</li>
<li id=”tb_3″ onmouseover=”a:HoverLi(3);”>
DELPHI</li>
<li id=”tb_4″ onmouseover=”o:HoverLi(4);”>
VB.NET</li>
<li id=”tb_5″ onmouseover=”g:HoverLi(5);”>
JAVA</li>
<li id=”tb_6″ onmouseover=”z:HoverLi(6);”>
PHP5</li>
</ul>
</div>
<div >
<div id=”tbc_01″>这里是ASP.NET的相关内容</div>
<div id=”tbc_02″>这里是MYSQL的相关内容</div>
<div id=”tbc_03″>这里是DELPHI的相关内容</div>
<div id=”tbc_04″>这里是VB.NET的相关内容</div>
<div id=”tbc_05″>这里是JAVA的相关内容</div>
<div id=”tbc_06″>这里是PHP5的相关内容</b>
</div>
</div>
</div>
</body>
</html>