CSS ExpressionÓ÷¨×ܽá
CSS ExpressionÓ÷¨×ܽá
ת×Ôhttp://www.chencheng.org/demo/css-expression.php
CSS Expression£¬¶¯Ì¬ CSS ÊôÐÔ£¬IE ˽ÓУ¬×Ô 5.0 ¿ªÊ¼ÒýÈ루IE8 ½«²»ÔÙÖ§³Ö£©£¬²Î¿¼ MSDN£¬²»¹ýÓÐʱÓÃjavascript¶¯Ì¬Éú³ÉËü×÷ΪIE6µÄhack»¹ÊDz»´íµÄ£¡
Õâ¶«Î÷µÄÓŵ㣺
ʹ CSS ÊôÐÔ¶¯Ì¬Éú³É£¬ËùÒÔ»ù±¾ js ÄܸɵÄËü¶¼ÄܸÉ
ʹÓà CSS Ñ¡Ôñ·û£¬±È js ±éÀúµ½Ä³¸öÌØ¶¨ÔªËØÒª·½±ãµÃ¶à
Õâ¶«Î÷µÄȱµã£º
expression »á·´¸´Ö´ÐУ¬ÓÐÑÏÖØµÄЧÂÊÎÊÌâ¡£ËüµÄ´¥·¢Ëƺõ²»ÊÇͨ¹ýʼþ£¬¶øÊÇͨ¹ý interval Ò»ÀàµÄ»úÖÆ¡£
±ðµÄä¯ÀÀÆ÷²»Ö§³Ö£¬IE8 Ò²½«²»ÔÙÖ§³Ö
IE6 µÄ±³¾°ÉÁ˸ Bug Fix
1.body {
2. zoom: expression(function(el){
3. document.execCommand('BackgroundImageCache', false, true);
4. el.style.zoom = '1';
5. }(this));
6.}
¸ø²»Í¬ type µÄ input ¸³Ó費ͬµÄÑùʽ
1.input {
2. zoom: expression(function(el){
3. el.style.zoom = "1";
4. el.className ? el.className+=" "+el.type : el.className=el.type;
5. }(this));
6.}
¸ôÐл»É«£¨zebra lists£©
01..test {
02. unicode-bidi: expression(function(el){
03. el.style.unicodeBidi = "normal";
04. var childs = el.getElementsByTagName("li");
05. for(var i=0; i<childs.length; i++){
06. (i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
07. }
08. }(this));
09.}
Ä£Äâ :before »òÕß :after
01..test {
02. letter-spacing: expression(function(el){
03. el.style.letterSpacing = "0";
04. var newchild = document.createElement("span");
0
Ïà¹ØÎĵµ£º
CSSÑùʽµÄÖÖÀࣺ
1 £®HTML ±ê¼Ç·û£ºÓÃÓÚ¶¨ÒåHTML µÄTAGS Ñùʽ£¬ÀýÈç bodyp img µÈ¡£
ÀýStyle.cssÖж¨ÒåµÄbody\h1\p\img µÈ Àýstyle.css
2 £®ÀàÑ¡ÔñÆ÷£ºÒÔ . ¿ªÍ·£¬Ñùʽһµ©¶¨Ò壬¿É¾ÍÓÃÓÚÈκÎHTML ÔªËØ ¡£
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Trans
CSSÑùʽµÄÖÖÀࣺ
1
£®HTML
±ê¼Ç·û£ºÓÃÓÚ¶¨ÒåHTML
µ ......
overflow´Ó×ÖÃæÒâÒåÉÏÀ´½²¾ÍÊÇÒç³öµÄÒâ˼£¬»»¾ä»°Ëµ£¬ÄãÓиö²ã£¬µ«ÊÇÀïÃæµÄÄÚÈÝ£¬Í¼Æ¬»òÕßÎÄ×ÖÒª±È²ã´ó£¬overflow¾ÍÊÇÕë¶ÔÕâÖÖÇé¿ö½øÐд¦ÀíµÄ¡£
°üº¬4¸öÊôÐÔÖµ£¬visible,hidden,auto,scroll
visible¾ÍÊdz¬³öµÄÄÚÈÝÈÔÈ»Õý³£±»ÏÔʾ³öÀ´¡£
hidden¾ÍÊdz¬³öµÄÄÚÈݱ»Òþ²Ø¡£ &nbs ......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ÎÞ±êÌâÎĵµ</title>
<style type="text/css">
#wai{
width:500px;
height:500px;
background-color: #990;
}
#nei {
float:left;
width:200p ......
±¾ÈËÒ»°ãÓÃeditplusдһЩСµÄ²âÊÔ´úÂë»òÕßÀ´Ñо¿Ñ§Ï°±ðÈ˵ĴúÂ룬µ«¾³£»áÓöµ½ÕâЩÎÊÌ⣺ÏÂÔØ¹ýÀ´µÄHTML/CSS´úÂë»ìÂÒ£¬JS´úÂ뱻ѹËõ£¬»òÕßÊÇÎÒÃÇÏë°ÑÎÒÃǵĴúÂë×öÒ»ÏÂѹËõ»ìÏýÒÔ¹©·¢²¼Ê±Ê¹Óᣵ±È»£¬¶ÔÓÚ´úÂëµÄ¸ñʽ»¯ºÍ´úÂëѹËõµÈ£¬ÎÒÃǶ¼¿ÉÒÔʹÓÃרÓеŤ¾ß£¬»òÕßʹÓÃһЩÔÚÏߵŤ×÷À´×ö£¬¼ÈÈ»E ......
ÎÒÃÇ¿ÉÒÔͨ¹ýCSSÊôÐÔfloatÁîÔªËØÏò×ó»òÏòÓÒ¸¡¶¯¡£Ò²¾ÍÊÇ˵£¬ÁîºÐ×Ó¼°ÆäÖеÄÄÚÈݸ¡¶¯µ½Îĵµ£¨»òÕßÊÇÉϲãºÐ×Ó£©µÄÓұ߻òÕß×ó±ß£¨²Î¼ûµÚ9¿Î¹ØÓÚºÐ×´Ä£Ð͵ÄÃèÊö£©¡£ÏÂͼ²ûÃ÷ÁËÆäÔÀí£º
¾Ù¸öÀý×Ó£¬¼ÙÈçÎÒÃÇÏëÈÃÒ»ÕÅͼƬ±»Ò»¶ÎÎÄ×ÖÎ§ÈÆ×Å£¬ÄÇôÆäÏÔʾЧ¹û½«ÈçÏÂËùʾ£º
ÈçºÎʵÏÖÕâ¸öЧ¹û£¿
ÉÏÀýµÄHTML´úÂëÈçÏÂËùʾ£º
<div i ......