分类： 技术
-
慕课网js练习一
new document
-
向日葵远程控制：PC主控端远控
向日葵远程控制是一款免费的面向企业和专业人员的远程PC管理和控制软件。在任何可链接互联网的地点，都可以通过PC主控端方式轻松控制和访问安装了向日葵被控端的远程主机。向日葵PC主控端是为便捷的批量远程主机而生，操作管理简单，具有超炫的界面效果和创新的多屏幕查看模式。1.PC主控端介绍
向日葵PC主控端具有简单易操作的特点，三种展示模式，可自由切换。1.1.向日葵PC主控端登录
向日葵主控端登录只需填写护照及密码即可。
图1.1向日葵主控端登录1.2.向日葵主控端界面介绍
登录后可直接进入向日葵主控端界面。如图所示。
向日葵主控端界面简单易操作。主要包括远程控制、远程协助、屏幕查看、远程桌面、远程文件、命令行、添加主机七个部分。
图1.2向日葵主控端界面1.3.展示模式
向日葵主控端共有三种展示模式：普通模式、迷你模式、导航模式。点击面板右下角的模式切换图标，即可切换到不同的显示模式。如下图所示。
普通模式，点击可切换到迷你模式。
图1.3.1普通模式迷你模式，点击后可切换到导航模式。
图1.3.2迷你模式导航模式，点击可切换到普通模式。
图1.3.3导航模式2.PC主控端远程控制
使用PC主控端如何实现远控控制呢？
2.1.登录远程主机
向日葵PC主控端登录远程主机提供两种验证方式：windows验证和访问密码验证。
注：访问密码是在被控端主机设置中的安全中进行设置的。
图2.1.1windows帐号登录
图2.1.2访问密码登录成功登录后，进入远程主机桌面，选择模式。如下图所示。
图2.1.3选择模式选择模式后，即可进入到远程主机桌面。
注：控制模式可进入到远程主机桌面控制台，对远程主机进行管理操作。观看模式则只用于观看，不可进行远程操作。
2.2.远程控制
在向日葵远程控制中可以看到远程主机名称、创建时间、标记、葵码、登录账户等信息。
图2.2.1远程控制右键点击远程主机，也可对远程主机进行远程桌面、远程文件、发送即时消息、屏幕查看、删除主机、查看主机属性等操作。
图2.2.2远程主机操作2.3.远程桌面
登录远程主机后即可进入到远程主机桌面，对远程主机进行管理操作。
图2.3远程桌面2.4.远程文件
通过向日葵远程文件可以方便的对远程主机文件进行传输和管理操作。支持断点续传，让远程文件和本地文件互相传输和同步。
图2.4远程文件2.5.命令行
使用向日葵远程控制的命令行功能，可以直接输入命令来查找原因，就跟在自己的电脑上进行操作一样。
图2.5命令行2.6.添加主机
向日葵远程控制支持批量添加主机，可以方便用户对远程主机进行批量监控与管理。
图2.6添加主机3.PC主控端特色功能
3.1.远程协助
向日葵远程控制也可以进行远程协作操作。只需主控端发一个链接，对方安装一个插件，待对方接受邀请后便可帮同事、朋友解决PC使用中所遇到的各类问题。具体操作步骤如下。
在向日葵PC主控端上，点击远程协助。
图3.1.1选择远程协助右键单击远程协助主机，在属性中选择远程协助，复制URL链接地址发送给对方，或者求助者通过访问8005566.com输入葵码方式即可发起远程协助。
图3.1.2复制链接发起远程协助在对方电脑上，会显示需要安装浏览器插件的提示，点击在线安装。
图3.1.3在线安装插件下载安装文件。
图3.1.4下载安装文件运行安装文件，进入安装程序。
图3.1.5运行安装文件安装完成。
图3.1.6安装完成插件安装成功后，点击“请求协助”，等待对方接受。在此也可以添加附言。
图3.1.7请求协助对方收到远程协助请求，选择接受。
图3.1.8对方收到请求对方接受请求后即可进入远程桌面，开始控制对方电脑帮忙解决问题了。在远程桌面右侧也可以和对方聊天，发送文件。
图3.1.9进入远程桌面更多向日葵详情请登录向日葵官网：http://www.oray.com/sunlogin
向日葵被控端下载地址：http://www.oray.com/sunlogin/download_sunlogin.php
向日葵主控端下载地址：http://www.oray.com/sunlogin/download_cclient_beta.php -
设计师Oliver作品：创意涂鸦插画
设计师Oliver 创作出了自己的涂鸦作品，把简单的盘子加上一些创意可爱的插画后，就变得与众不同。
-
button,submit, image的区别 点onclick后隐藏行
button,submit, image的区别 点onclick后隐藏行
Posted on 2010-02-05 13:59 wj-conquer 阅读(142) 评论(0) 编辑 收藏
<input type="button" name="Submit" value="显示表单button" onclick="showAddData()"/>
<input type="submit" name="Submit" value="显示表单submit" onclick="showAddData()"/>
<input type="image" alt="add" src="<%=request.getContextPath() %>/images/btnImg/btn_add.gif" onclick="showAddData()" />
如何让input type="image" onclick不提交
function OpenEAView(itemId) {
if (itemId.length != 0) {
var pageEA = "MonthPlanItemExamineAndApprove.aspx?SessionKey=<%=this.SessionKey %>";
var pageUrl = pageEA + "&ItemId=" + itemId + "&action=View";
//var result =
window.showModalDialog(pageUrl, null, features);
// if (result == 'Success') {
// __doPostBack("", "");
// }
}
return false;//等于false 如果是提交1仍然会提交，必须加上Return
//1 提交： <input type="image" onclick="OpenEAView('10021921')" />
//2 不提交：onclick="return OpenEAView('10021921');"
}
——————————
1. type="button" onclick=onclick="showAddData()" 不会提交页面，只对按钮有效.
2. type="submit" onclick=onclick="showAddData()" 会提交页面
3. type="image" onclick=onclick="showAddData()" 会提交页面
———————————
例：
<!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>
<script type="text/javascript">
function showform()
{
document.getElementById("lizi").style.display="block";
}
function closeform()
{
document.getElementById("lizi").style.display="none";
}
</script>
</head>
<body>
<form id="form2" name="form2" method="post" action="">
<table width="98%" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td height="68"><label>
<input type="button" name="Submit" value="显示表单" onclick="showform()"/>
<input type="button" name="Submit2" value="关闭表单" onclick="closeform()"/>
</label></td>
</tr>
<tr>
<td height="63">wwwwww</td>
</tr>
<tr id="lizi" style="display: none;">
<td height="63"><input type="text" name="test" value="aaa" /></td>
</tr>
</table>
</form>
</body>
</html>
-
实现侧边栏/分栏高度自动相等-overflow：hidden
今天群有人说，侧边栏问题。然后突然想总结。
各种搜索试验。不过还是很不明白那么大的数值正负，有知道跟分享下~布局一律是这个<div class="main">
<div class="left"></div>
<div class="right"></div></div>有5种方法可以实现侧边栏高度自适应1、采用背景图模拟2栏等高。父容器，main实现背景图垂直平铺填充模拟两栏等高。但会增加一个额外的背景图片的HTTP请求，延缓页面的加载速度；同时也只有等到背景图被完全加载以后才会在视觉上实现“等高。若是布局两栏宽度改变，图片也要进行改变。2、是采用超大的负值下外边距+下内填充的方法来实现，需要给父容器加一个overflow:hidden。不好的地方在于，如果恰巧你的2栏被设置了边框，那你会损失掉下边框。3、是采用display:table-cell的方式将需要等高的容器模拟成表格列，我们知道表格列是默认等高的。只是此属性IE7-不支持。4、在父容器里面加上overflow:hidden;此清除方法强制使 .main了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。5、使用min-height属性，IE6不支持min-height但是height会自动撑高，所以min-height + _height的组合也是常用手段之一。其中第二种和第四种做了对比，第二种若是左右两栏的颜色一致，那么只需要overflow：hidden即可。在父容器设置背景色为同一颜色。若是左右两栏颜色不一致，可加上正负边距。（这个地方我不明白为什么要加上那么大的正负边距，且要超过你的最大网页分辨率）说明：核心CSS代码部分的3000像素是个可变值，如果您的分栏高度不可能高度超过2000像素，您就可以设为2000像素，如果会超过3000像素，那么您要修改值为4000像素或是更高。
父标签的overflow:hidden属性是必须的，否则会显示溢出的内容css：body为黑色，定义父容器为白色，左栏为灰色 右栏为黄色以示区分。.main{ width:1000px; background:#fff; margin:0 auto; padding:0; }
.right{ width:700px; background:#ff0; float:left;}
.left{ width:300px; background:#ccc; }
图：好犬牙交错参差不齐啊~css：.main{ width:1000px; background:#fff; margin:0 auto; padding:0; overflow:hidden; }
.right{ width:700px; background:#ff0; float:left;}
.left{ width:300px; background:#ccc; }
图：出现了main的背景色哟~ 背景色一致的时候推荐使用。css：.main{ width:1000px; background:#fff; margin:0 auto; padding:0; overflow:hidden; }
.right{ width:700px; background:#ff0; float:left;margin-bottom:-3000px; padding-bottom:3000px;}
.left{ width:300px; background:#ccc;margin-bottom:-3000px; padding-bottom:3000px;}
图： 短的那栏也在自己的颜色基础上对齐了~ 各栏目颜色不一致的时候使用~ -
生活中那些温馨的用户体验
大家可能记得前一阵，一对情侣在海底捞吵架，收到服务员温馨的卡片和黄玫瑰。你有这样的生活中美好的用户体验么？
一、【舒肤佳的肥皂】
很久很久以前，所有的肥皂都是方的，然后演变成了圆的。
肥皂遇水之后是很滑的。洗澡的时候，一不小心就掉地上了。有些就掉到了“坑里”……
舒肤佳的肥皂，设计成了细腰状的。这种设计，很容易就能握住肥皂，不易滑脱。二、【西湖边的景观灯和音箱】
西湖边的景观灯都装在树上，草丛里。音箱主要在草丛里。
电线直接暴露在外面，很影响美观，而且又有触电的危险。于是，电线外部就包了一层皮。设计成藤蔓的形状。
音箱设计成了石头的形状。和景观融为一体。三、【杭州外婆家餐饮】
外婆家吃饭，发现用了新的叫号系统。输入手机号码用餐人数，取号码纸，就可以去闲逛了。在还有两桌就轮到时，短信会发到手机上提醒可以去等候了。（据说，短信很温馨“ **号，外婆喊你吃饭了! ”）进去之后前一桌的人刚刚走，菜点完10分钟后就上齐了。这是多么可怕的一个效率啊。科学的叫号系统，严密的服务流程，一天至少可以多做两成生意。四、【红绿灯】
以前的红绿灯都是圆的，三种颜色，红黄绿。不论红灯还是绿灯右拐都容易碰到行人，绿灯左拐弯会和对面直行的车辆交汇。现在大多数的红绿灯都改成箭头了，除了能不能走之外再多加了一个箭头表示通行方向。避免了许多交汇，提高了路口的交通安全度。 -
当你的banner平铺还是不同色设计时，怎么切？
当你所切的网页类似于这种情况的时候，左侧有投影是深绿色，右侧是另一种颜色而且还是修饰过得形状。
中间网页部分宽度固定，两侧自适应浏览器宽度。
现在有个问题是一般两侧的纹络或者颜色一致，这样能直接设置背景色或者背景图片平铺。现在是两侧图片形状不一致，应该怎么切呢？我个人的解决思路：
在整个网页容器切图按照常用规律切固定宽度（如红线显示），然后居中。头部和底部的自适应浏览器宽度用table（分为一行两列）加上绝对定位position:absoulute;用z-index为付，放在下面实现右50%是一种背景平铺，左50%为一种背景平铺。
总结：
1、利用table的百分比，分成一行两列，每个列为50%，实现在一行两列之内平铺不同背景宽度总和为100%。
2、利用定位 和z-index放置在背景下面。head html代码<div class="head">
<table width="100%" border="0" >
<tr>
<td width="50%" class="bl"></td>
<td width="50%" class="br"></td>
</tr>
</table>
<div class="header"> <a href="#"><img src="images/logo.jpg" height="107" width="199" /></a>
<div class="hright">
<p class="mt p1">置业顾问：霍云兰 联系电话：15611111111 所在门店：海淀区南小庄</p>
<p class="p2">登录次数：19 累计下载：12 暂存架：6<a href="#">去打包</a></p>
</div>
</div>
</div>
上面图片head例子css代码.head{ width:100%; height:107px; }
.head table{z-index:-1; position:absolute; top:0; height:107px; left:0;}
.head .header{ width:1001px; margin:0 auto;color:#585f02; font-size:14px;}
.br{background:url(../images/desc_06.jpg) repeat-x; }
.bl{background:url(../images/headbg.jpg) repeat-x; }
html代码
<div class="foot mt2">
<table border="0" width="100%">
<tr>
<td width="50%" class="td_l"></td>
<td width="50%" class="td_r"></td>
</tr>
</table>
<div class="footer"> <a href="#"><img src="images/logo_b.jpg" height="38" width="152" /></a>
<div class="hright">版权所有 安悦·家</div>
</div>
</div>
上面图片foot例子css
/*foot*/
.foot{ width:100%; height:38px; line-height:38px;}
.foot table{ position:absolute; z-index:-1; height:38px; left:0;}
.foot .td_l{ background:#014715;}
.foot .td_r{background:#c3d600;}
-
超过一行隐藏变省略号
今天有人问td 百分比内的内容，超出部分能变成省略号吗？她说知道div的固定宽度能隐藏变省略号。
之前我没有注意过这个问题。只记过divli什么的可以固定具体的宽度，变省略号。然后我百度了下，有用overflow:hidden; white-space:nowrap;在td百分比中隐藏的，之前我总结过一份文档里面的第79条是这个的。应该有些人在群里下载过吧，也许都没看过吧。好多都喜欢把所有人为或者别人认为好的东西装在自己的口袋里，却不加以利用，占用了口袋了，要是储存的过久坏了什么的就更不好了。
再多试一次你就会了，但是你就是不试，然后说，哎呀所有的样式都在行内的，还是麻烦，我又把他们调出来ok也是可以的。然后，举一反三。亲手尝试。行内样式，链接样式，嵌入式都ok，都试验了。
<!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>无标题文档</title>
<style type=”text/css”>
.a{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table width=”100%” border=”1″ cellspacing=”0″ cellpadding=”0″ style=”table-layout:fixed”>
<tr>
<td width=”20%”> </td>
<td width=”60%” class=”a” >brbrblfbrgtrbtrfrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrb[d[v</td>
<td width=”20%”> </td>
</tr>
</table>
</body>
</html>
overflow属性–原本是ie浏览器独自开发的属性，由于在css3中被采用，得到了其他浏览器的支持。
指定对于盒内容纳不下的内容显示的方法。
Overflow：hidden 对于超出容纳范围的文字会被隐藏。
Overflow：scroll div元素出现固定的水平滚动条与垂直滚动条
Overflow：auto 当文字超出是根据需要才会出现水平滚动条或者垂直滚动条
Overflow：visible 则显示效果与不使用overflow属性时一样
Overflow-x、Overflow-y可以单独指定水平方向上或者垂直方向上内容超出盒的容纳范围时的显示方法。出现滚动条。
Text-overflow：设置内容在水平方向出现省略号。（white-space：nowrap使得盒右端内容不能换行显示。）
.text{
width:200px;/*有宽度才有限制*/
overflow:hidden;/*多出来的隐藏*/
text-overflow:ellipsis;/*显示省略号*/
white-space:nowrap;/*不换行*/
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
}
表格也显示
<div class=”text”>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</div>
3、某些模板的控制字符，超出显示省略号“…”
<!–%
For each Item In GCMS.Channels
GCMS.ContentID = Item.ContentID
%–>
<li class=”linea”><a href=”<!–%Response.Output GCMS.Content(“Url”)%–>” title=”<!–%Response.Output GCMS.Content(“Title”)%–>”><!–%Response.Output GCMS.ContentLenWithMark(“Title”,103,”…”)%–></a><span><!–%
‘时间
Response.Output FormatDateTime(GCMS.Content(“SubmitDate”),vbShortDate)
%–></span></li>
<!–%
Next
%–> -
重新认识table
因为不了解table，就入主为先了，以为table不好用，后来发现是因为自己对于table里面的标签不熟悉的原因。特此一记。
HTML有10个表格相关标签。下面是一个带有简介的列表，但是首先，文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:
-
<caption> 定义表格标题
-
<col> 为表格的列定义属性
-
<colgroup> 定义表格列的分组
-
<table> 定义表格
-
<tbody> 定义表格主体
-
<td> 定义一个单元格
-
<tfoot> 定义表格的表注(底部)
-
<th> 定义表格的表头
-
<thead> 定义表格的表头
-
<tr> 定义表格的行
一个基本的表格结构如下:
它包含一个标题、头部、主体和底部。正确的HTML元素顺序是：
-
<table>
-
<caption>
-
<thead>
-
<tfoot>
-
<tbody>
你也可以使用<col>和<colgroup>来定义表格的列或为列分组：
-
<table>
-
<caption>
-
<colgroup>
-
<col>
-
<thead>
-
<tfoot>
-
<tbody>
<!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>重新认识table</title>
<style>
body{font-size:14px;text-align:center; line-height:24px;}
.warp_tb{ border-collapse:collapse; width:550px; border-bottom:1px dashed #ccc; }
.warp_tb tr{ border-bottom:1px dashed #ccc;width:550px;}.warp_table{ border-collapse:collapse; width:550px; border:1px solid #ddd; }
.warp_table td,.warp_table th,.warp_table tfoot,.warp_table thead,warp_table thead{border:1px solid #ddd;}</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0" class="warp_tb">
<tr>
<th scope="col">姓名</th>
<th scope="col">身高</th>
<th scope="col">体重</th>
<th scope="col">班级</th>
</tr>
<tr>
<td>1.98</td>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
<tr>
<td>1.98</td>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<td>没有特点的table</td>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<td>没有特点的table</td>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<td>没有特点的table</td>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
</table><br /><table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<th scope="row">姓名</th>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<th scope="row">性别</th>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
<tr>
<th scope="row">自我介绍</th>
<td>没有特点的table</td>
<td>没有特点的table</td>
</tr>
</table><br /><table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<th scope="col">身高</th>
<th scope="col">体重</th>
<th scope="col">班级</th>
</tr>
<tr>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
<tr>
<td>1.98</td>
<td>90kg</td>
<td>三四</td>
</tr>
</table><br /><table border="0" cellspacing="0" cellpadding="0" class="warp_table">
<tr>
<th scope="col">编号</th>
<th scope="col">姓名</th>
<th scope="col">学号</th>
</tr>
<tr>
<th scope="row">1</th>
<td>武清区</td>
<td>223</td>
</tr>
<tr>
<th scope="row">2</th>
<td>刘易阳</td>
<td>123</td>
</tr>
</table><br /><table border="0" cellspacing="0" cellpadding="0" cla
ss="warp_table">
<caption>Table caption here</caption>
<colgroup span="1" style="background:#f5f5f5;"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!– Table Header–>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<!– Table Footer–>
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<!– Table Body–>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table></body>
</html> -
-
css3中transform兼容ie
（引用QQ图片）
transform:rotate(-30deg);/*兼容性强*/
-ms-transform:rotate(-30deg);/*ie9*/
-o-tranform:rotate(-30deg);/*opera*/
-webkit-transform:rotate(-30deg);/*chrome safria*/
-moz-transform:rotate(-30deg); /*firefox*/filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) ;
笔记：Matrix 滤镜在旋转方面需要用到 M11 M12 M21 M22 四个参数，分别代表 cos(旋转的角度)、-sin(旋转的角度)、sin(旋转的角度)、cos(旋转的角度)。但这里需要注意的是 IE 中旋转的中心点会发生变化。
CSS filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Matrix ( sProperties ) "
说明：
使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
使用此滤镜可以建立下列效果：
7. 左右反转。将 M11 和 M12 的值取负。
8. 上下反转。将 M21 和 M22 的值取负。
9. 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。
使用 padding 属性能够使最终图像边角被剪切的机会降到最小。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); }
实例一 讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE浏览器CSS transform旋转属性的演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<style type="text/css">
body {
font-family: "Arial", sans-serif;
}
#ptOfRef {
border: #000 solid 3px;
background: #6FF;
width: 204px;
height: 204px;
position: absolute;
top: 100px;
left: 100px;
}
#example {
position: absolute;
top: 100px;
left: 100px;
border: #09F solid 1px;
background: #F90;
font-weight: 900;
color: #FFF;
padding: 10px;
display: block;
width: 200px;
height: 200px;
margin-top: -1px;
margin-left: -1px;
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)}
</style>
<!–[if IE]>
<style type="text/css">
#example {
top: 50px;
left: 50px;
}
</style>
<![endif]–>
</head>
<body>
<div id="ptOfRef"></div>
<div id="example">这是一个CSS旋转属性的演示</div>
</body>
</html>实例二 应用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css3属性transform兼容ie</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
body {
background:url(http://mat1.gtimg.com/edu/2012/tuipu15/top.jpg) top center repeat-x;
}
body {font-size:12px;font: 12px/1.75 "宋体" b8b4f53, sans-serif;}
* { margin:0; padding:0; }
body, button, input, select, textarea { font-family: "宋体","Microsoft YaHei",Tahoma, "SimSun",12px/1.5 tahoma,tahoma,arial ,5b8b4f53; color:#666;}
ul, ol { list-style:none; list-style-type:none }
select, input, img { vertical-align:middle; }
a:link, a:visited { text-decoration:none;color:#333;}
a:hover{color: #307F7A;text-decoration:underline;}
fieldset, img { border:0 none ; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility:hidden; }
.clearfix { display: inline-block; } /* Hides from IE-mac*/
* html .clearfix { height: 1%; }em{
font-style:normal;
}
div {display:block;}
.fl{
float:left;
}
.fr{
float:right;
}/******/
.w960-lw {
width:960px;
margin:0 auto;
}.layout1_lw {
background:url(http://mat1.gtimg.com/edu/2012/tuipu15/top.jpg) 50% 0 no-repeat;
height:785px;
margin:0 auto;
}.nav_lw {
position:relative;
z-index:9;
}
.menu_lw {
position:absolute;
top:211px;
left:-30px;
float:left;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.7660444431189777);*/
}.nav_lw li {
background:#479E13;
float:left;
width:104px;
font-size:18px;
font-weight:500;
color:#fff;
font-family:"Microsoft YaHei";
text-align:center;
/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) 9;*/
}
#nav_lw li{
position:absolute 9;
}
#nav_lw .n1 {
top:186px 9;
left:50px 9;
}
#nav_lw .n2 {
top:135px 9;
left:138px 9;
}
#nav_lw .n3 {
top:83px 9;
left:228px 9;
}
#nav_lw .n4 {
top:31px 9;
left:318px 9;
}
#nav_lw .n5 {
top:-22px 9;
left:410px 9;
}
#nav_lw .n6 {
top:-74px 9;
left:500px 9;
}
#nav_lw .n7 {
top:-126px 9;
left:590px 9;
}
#nav_lw .n8 {
top:-178px 9;
left:680px 9;
}
#nav_lw .n9{
top:-230px 9;
left:770px 9;
}.nav_lw li a {
background:#00aeef;
color:#fff;
display:block;
width:104px;
height:57px;
line-height:58px;
}
.nav_lw li a:hover{
background:#39900B;
text-decoration:underline;
}
.nav_lw li {
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) 9;
}/*ie6-ie8
*Matrix 滤镜在旋转方面需要用到 M11 M12 M21 M22 四个参数，分别代表 cos(旋转的角度)、-sin(旋转的角度)、sin(旋转的角度)、cos(旋转的角度)。但这里需要注意的是 IE 中旋转的中心点会发生变化。
*/
</style></head>
<body><div class="layout layout1_lw">
<div class="nav_lw w960-lw">
<ul class="menu_lw clearfix" id="nav_lw">
<li class="n1"><a href="#">消息</a></li>
<li class="n2"><a href="#">消息</a></li>
<li class="n4"><a href="#">消息</a></li>
<li class="n3"><a href="#">消息</a></li>
<li class="n5"><a href="#">消息</a></li>
<li class="n6"><a href="#">消息</a></li>
<li class="n7"><a href="#">消息</a></li>
<li class="n8"><a href="#">消息</a></li>
<li class="n9"><a href="#">消息</a></li>
</ul>
</div>
</div>
</body>
</html>
