CSSÖÐexpressionʹÓüò½é
¡¡¡¡IE5¼°ÆäÒÔºó°æ±¾Ö§³ÖÔÚCSSÖÐʹÓÃexpression£¬ÓÃÀ´°ÑCSSÊôÐÔºÍJavas cript±í´ïʽ¹ØÁªÆðÀ´£¬ÕâÀïµÄCSSÊôÐÔ¿ÉÒÔÊÇÔªËØ¹ÌÓеÄÊôÐÔ£¬Ò²¿ÉÒÔÊÇ×Ô¶¨ÒåÊôÐÔ¡£¾ÍÊÇ˵CSSÊôÐÔºóÃæ¿ÉÒÔÊÇÒ»¶ÎJavas cript±í´ïʽ£¬CSSÊôÐÔµÄÖµµÈÓÚJavas cript±í´ïʽ¼ÆËãµÄ½á¹û¡£ ÔÚ±í´ïʽÖпÉÒÔÖ±½ÓÒýÓÃÔªËØ×ÔÉíµÄÊôÐԺͷ½·¨£¬Ò²¿ÉÒÔʹÓÃÆäËûä¯ÀÀÆ÷¶ÔÏó¡£Õâ¸ö±í´ïʽ¾ÍºÃÏñÊÇÔÚÕâ¸öÔªËØµÄÒ»¸ö³ÉÔ±º¯ÊýÖÐÒ»Ñù¡£
¡¡¡¡¸øÔªËعÌÓÐÊôÐÔ¸³Öµ
¡¡¡¡ÀýÈ磬Äã¿ÉÒÔÒÀÕÕä¯ÀÀÆ÷µÄ´óСÀ´°²ÖÃÒ»¸öÔªËØµÄλÖá£
#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}
¡¡¡¡¸øÔªËØ×Ô¶¨ÒåÊôÐÔ¸³Öµ
¡¡¡¡ÀýÈ磬Ïû³ýÒ³ÃæÉϵÄÁ´½ÓÐéÏß¿ò¡£ ͨ³£µÄ×ö·¨ÊÇ£º
<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>
¡¡¡¡´Ö¿´»òÐí»¹ÌåÏÖ²»³ö²ÉÓÃexpressionµÄÓÅÊÆ£¬µ«Èç¹ûÄãµÄÒ³ÃæÉÏÓм¸Ê®ÉõÖÁÉϰٸöÁ´½Ó£¬ÕâʱµÄÄãÄѵÀ»¹»á»úеʽµØCtrl+C£¬Ctrl+Vô£¬ºÎ¿öÁ½ÕßÒ»±È½Ï£¬Äĸö²úÉúµÄÈßÓà´úÂë¸ü¶àÄØ£¿
¡¡¡¡²ÉÓÃexpressionµÄ×ö·¨ÈçÏ£º
<style type="text/css">
a {star : expression(onfocus=this.blur)}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>
¡¡¡¡ËµÃ÷£ºÀïÃæµÄstar¾ÍÊÇ×Ô¼ºÈÎÒⶨÒåµÄÊôÐÔ£¬Äã¿ÉÒÔËæ×Ô¼ºÏ²ºÃÁíÍⶨÒ壬½Ó×Űüº¬ÔÚexpression()ÀïµÄÓï¾ä¾ÍÊÇJS½Å±¾£¬ÔÚ×Ô¶¨ÒåÊôÐÔÓëexpressionÖ®¼ä¿É±ðÍüÁË»¹ÓÐÒ»¸öÒýºÅ£¬ÒòΪʵÖÊ»¹ÊÇCSS£¬ËùÒÔ·ÅÔÚstyle±êÇ©ÄÚ£¬¶ø·Çs criptÄÚ¡£OK£¬ÕâÑù¾ÍºÜÈÝÒ×µØÓÃÒ»¾ä»°ÊµÏÖÁËÒ³ÃæÖеÄÁ´½ÓÐéÏß¿òµÄÏû³ý¡£²»¹ýÄãÏȱðµÃÒ⣬Èç¹û´¥·¢µÄÌØÐ§ÊÇCSSµÄÊôÐԱ仯£¬ÄÇô³öÀ´µÄ½á¹û»á¸úÄãµÄ±¾ÒâÓвî±ð¡£ÀýÈçÄãÏëËæÊó±êµÄÒÆ½øÒƳö¶ø¸Ä±äÒ³ÃæÖеÄÎı¾¿òÑÕÉ«¸ü¸Ä£¬Äã¿ÉÄÜÏ뵱ȻµÄ»áÈÏΪӦ¸ÃдΪ
<style type="text/css">
inpu
Ïà¹ØÎĵµ£º
Eric Meyer’s CSS Reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, fo ......
ºÐÄ£ÐÍ£¬ÊÇXHTML
+CSS
²¼¾Ö
Ò³ÃæÖеÄ
ºËÐÄ£¡ÊǹØÏµµ½Éè¼ÆÖÐÅŰ涨λµÄ¹Ø¼ü£¬¶¼×ñѺÐÄ£Ð͹淶£¬ÀýÈç<div>¡¢<p>¡¢<a>……ºÐÄ£ÐͰüº¬
(Íâ
±ß¾à)margin£¬(Äڱ߾à)padding £¬(ÄÚÈÝ)content£¬(±ß¿ò)border¡£
ÏÂͼÊÇCSSºÐÄ£Ð͵ÄʾÒâͼ
ÕâЩÊôÐÔÎÒÃÇ¿ÉÒÔ°ÑËü×ªÒÆµ½ÎÒÃÇÈÕ³£Éú» ......
<html>
<head>
<mce:style type="text/css"><!--
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div. ......
¡¡CSSѧÆðÀ´²¢²»ÄÑ£¬µ«ÔÚ´óÐÍÏîÄ¿ÖУ¬¾Í±äµÃÄÑÒÔ¹ÜÀí£¬ÌØ±ðÊDz»Í¬µÄÈËÔÚCSSÊéд·ç¸ñÉÏÉÔÓв»Í¬£¬ÍŶÓÉϾ͸ü¼ÓÄÑÒÔ¹µÍ¨£¬Îª´Ë×ܽá
ÁËһЩÈçºÎʵÏÖ¸ßЧÕû½àµÄCSS´úÂëÔÔò£º
1
. ʹÓÃResetµ«²¢·ÇÈ«¾ÖReset
¡¡¡¡²»Í¬ä¯ÀÀÆ÷ÔªËØµÄĬÈÏÊôÐÔÓÐËù²»Í¬£¬Ê¹ÓÃReset¿ÉÖØÖÃä¯ÀÀÆ÷ÔªËØµÄһЩĬÈÏÊôÐÔ£¬ÒÔ´ïµ½ä¯ÀÀÆ÷µÄ¼æÈÝ¡£µ«ÐèÒª×¢Ò ......
YUI Compressor ÊÇÒ»¸öÓÃÀ´Ñ¹Ëõ JS ºÍ CSS ÎļþµÄ¹¤¾ß£¬²ÉÓÃJava¿ª·¢¡£
ʹÓ÷½·¨£º
//ѹËõJS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//ѹËõCSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css ......