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
Ïà¹ØÎĵµ£º
ÔÎÄ´«ËÍÃÅ£ºhttp://blog.csdn.net/dux003/archive/2009/11/08/4786371.aspx
csdn blog css×Ô¶¨ÒåÉèÖÃ
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_conten ......
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
µ ......
<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 ......
// °´×Ö·û»»ÐÐ
style="word-break: break-all;"
// °´´Ê×é»»ÐÐ
style="word-wrap: break-word;"
==========================================================================
==========================================================================
font-family:Ari ......
Ò»¸öÍøÕ¾µÄÓÅ»¯Óкܶ๤×÷Òª×ö£¬ÆäÖжԴúÂëµÄÓÅ»¯ÊÇÒ»¸öºÜ¹Ø¼üµÄ²½Ö衣ΪÁ˸ü¼Ó·ûºÏSEOµÄ¹æ·¶£¬ÏÂÃ潫¶ÔÄ¿Ç°Á÷ÐеÄDIV+CSSµÄÃüÃû¹æÔòÕûÀíÈçÏ£º
ҳͷ£ºheader µÇ¼Ìõ£ºloginBar
±êÖ¾£ºlogo & ......