兼容简单的hack实现方式和原理

针对ie6,ie7,ie8,firefox,chrome显示不同效果 做网站时经常会用到.

演示简单的hack实现方式和原理。浏览器呈红色则为firefox,浏览器呈灰色则为ie6,浏览器呈黄色则为ie9,浏览器呈蓝色则为ie7

hacker

#hacker{
	color:red; 
*color:white; /*for ie6,ie7*/
*+color:blue; /*for ie7*/
_color:gray; /*for ie6*/
color:balck !important; /*for firefox*/
color:yellow \9; /*for ie9*/ }

透明兼容所有浏览器

一段兼容的css透明代码

.transparent{
	filter:alpha(opacity=50); -moz-opacity:0.5;/**Firefox 3.5即将原生支持opacity
属性,所以本条属性只在Firefox3以下版本有效 ***/ -khtml-opacity: 0.5; opacity: 0.5; 
} 

渐变兼容所有浏览器

一段兼容的css渐变代码

.gradient{
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColo
rStr=#ffffff, EndColorStr=#dedede);background: -moz-linear-gradient(top, #ffffff, #dedede);
}

高亮兼容所有浏览器

灵感来自WORD文档,文字高亮,用于文字的突出显示。高亮的文字

.highlighted {
background: none repeat scroll 0 0 #00ADEE;
color: #FFFFFF;
padding: 0 5px;
}

阴影兼容firefox

阴影更容易让人舒适,右侧是实现方式

.shadow{	
box-shadow: 0 5px 10px #cecece;;
}

圆角兼容firefox

圆角更容易让人舒适,右侧是实现方式

.radius{	
-webkit-border-radius: 4px; /*只支持webkit内核的浏览器*/
border-radius: 4px; /*只支持IE内核的浏览器(IE>=7)*/
-moz-border-radius : 4px; /*只支持Mozilla内核的浏览器*/
border:#ddd solid 1px;
padding:4px;
}

超出省略号展示兼容firefox,ie所有浏览器

纯css实现,无需繁琐的js和调兼容,经Slicycss测试有效

.ellipsis{	
white-space:nowrap;/*设置不折行*/
text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/
width:80px;
overflow:hidden;
}

旋转firefox下有效

图片旋转效果,纯css实现,在firefox下有效,来自互联网。

.rotate:hover{
transform: rotate(360deg);
transition: all 1s ease-out 0s; }

演示

首字母兼容所有浏览器

.firstletter:first-letter{ font-size:120%;}

演示

Slicy是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。你可以将他理解成一套模板,里面包含了大多数站点中所需要的那些css类。他很小,只有四个文件而已。总共不到6KB。

去除链接虚线框兼容所有浏览器

<a href="link1.htm" onfocus="this.blur()">link</a>

演示

去掉链接虚线的效果 没去掉链接虚线的效果

纯css横向纵向居中兼容所有浏览器

纯css实现,无需js,省去了很多烦恼。 主要在于css left:50%; top:50%; 的运用。

<div style="width:960px; height:200px; background:red; position:absolute; left:50%; 
margin-left:-480px; top:50%; margin-top:-100px;"></div>

演示

点击弹出

保存到桌面快捷方式一段php代码

经常有网站头部都放了一个保存到桌面,有利于网页营销,右侧是主流的实现方式。

<?php
$Shortcut = "[InternetShortcut]
URL=http://kuai.qietu.com
IDList=[{000214A0-0000-0000-C000-000000000046}]Prop3=19,2";
Header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=shortcut.url;");
echo $Shortcut;
?>

图标黑白变彩色快速实现整站黑白

如果用传统的方法将网站变成黑白色非常的麻烦,需要更换页面的文件,并且要对图片进行更改。但如果自己的网站支持CSS的话,一切变得很简单。只要是符合w3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部分过滤掉。

以下是代码片段:

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 

或者第二种方法在样式文件的最上端加上如下代码:以下是代码片段:

 body{filter:Gray;} 
img{filter:Gray;}

flash 调用js最简单的方法

来之日常工作总结,方便flash工程师与js工程师的协调工作。

代码片段

flash 调用js 最简单的方法是 :
getURL("javascript:function()"); //function 为此FLASH所在页面的JS函数名. js 传递变量给 flash 最简单的方法是:
flash.setVariable("变量名","变量值"); //flash为此FLASH的id

网页将不能被另存为<noscirpt>的用法很广,其中一条就是可以使JS广告失效。

<noscript><iframe src=*.html></iframe></noscript> 

防止被人frame

<SCRIPT LANGUAGE=javascript><!-- 
 if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

永远都会带着框架这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

<script language=javascript><!-- 
 if (window == top)top.location.href = frames.htm;// --></script>

关闭输入法

<input style=ime-mode:disabled/> 

防止复制

<body oncopy=return false; oncut=return false;> 

不准粘贴

<body onpaste=return false> 

取消选取、防止复制

<body onselectstart=return false>

将彻底屏蔽鼠标右键,无右键菜单

<body oncontextmenu=window.event.returnvalue=false>

也可以用于网页中Table框架中

<table border oncontextmenu=return(false)><td>no</table> 

弹出窗口

普通的弹出窗口

window.open ('page.html') ;

经过设置后的弹出窗口

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');

弹启一个全屏窗口

window.open('http://kuai.qietu.com','example01','fullscreen');
window.open('index.asp','','fullscreen=1');

弹启一个被F11化后的窗口

window.open('http://kuai.qietu.com','example01','channelmode');

在弹出窗口中加上一个关闭按钮

onClick='window.close()';

弹启一个带有收藏链接工具栏的窗口

window.open('http://kuai.qietu.com','example03','width=400,height=300,directories');

ENTER键可以让光标移到下一个输入框

<input onKeyDown="if(event.keyCode==13)event.keyCode=9" >

IE地址栏前换成自己的图标

<link rel=Shortcut Icon href=favicon.ico> 

可以在收藏夹中显示出你的图标

<link rel=Bookmark href=favicon.ico> 

自动跳转content=3 表示3秒刷新到URL

<meta http-equiv=refreshcontent=3;URL=http://kuai.qietu.com; charset=gb2312>

IE自带的网页过渡特效

<
<meta  http-equiv="Page-Enter"  content="blendTrans(Duration=1.0)">
混合  
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"> 盒状收缩
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"> 盒状展开
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)"> 圆形收缩
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)"> 圆形放射
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> 向上擦除
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=5)"> 向下擦除
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)"> 向右擦除
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)"> 向左擦除
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)"> 垂直遮蔽
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)"> 水平遮蔽
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)"> 横向棋盘式
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)"> 纵向棋盘式
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)"> 随机溶解
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)"> 左右向中央缩进
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)"> 中央向左右扩展
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=15)"> 上下向中央缩进
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)"> 中央向上下扩展
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)"> 从左下抽出
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)"> 从左上抽出
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)"> 从右下抽出
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)"> 从右上抽出
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)"> 随机水平线条
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)"> 随机垂直线条
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)"> 随机

跑马灯参数以上几个例子都是<marquee>标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,<marquee>标签只被IE所支持,使用Netscape浏览器是看不到的噢。

演示

Slicy是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。你可以将他理解成一套模板,里面包含了大多数站点中所需要的那些css类。他很小,只有四个文件而已。总共不到6KB。

代码片段

behavior=scroll, slide, alternate 跑马方式:循环绕行,只跑一次就停住,来回往复运动 
direction=left,right 跑马方向:从左向右,从右向左
loop=100 跑马次数:循环100次,如不写默认为一直循环
width=100%,height=200 跑马范围:宽为100%,高为200像素
scrollamount=20 跑马速度:数越大越快
scrolldelay=500 跑马延时:毫秒数,利用它可实现跃进式滚动
hspace=20,vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色

网页不会被缓存

<META HTTP-EQUIV=pragma CONTENT=no-cache>
<META HTTP-EQUIV=Cache-Control CONTENT=no-cache, must-revalidate>
<META HTTP-EQUIV=expires CONTENT=Wed, 26 Feb 1997 08:21:57 GMT>
或者<META HTTP-EQUIV=expires CONTENT=0>