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
Ïà¹ØÎĵµ£º
ÌṩһÖÖÓÃCSS´úÂëʵÏÖ×Ô¶¯½ØÈ¡×Ö·û´®µÄ·½·¨£º
CSS´úÂëÈçÏ£º
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
......
XHTML
+CSS
ÓëSEO
µÄÄÚÈÝ£¬ºóÃæÕ½ڻáÏê
ϸ¸ø´ó¼Ò½éÉÜ£¬ÕâÀï¾ÍÏÈ˵һЩ£¬Èôó¼Ò¶ÔxHTML+CSSÓëSEOÓÐÒ»¶¨µÄÈÏʶ£¬ÎªºóÃæÖÆ×÷Ò³Ãæ´ò»ù´¡£¬±Ï¾¹ÎÒÃÇ×ö³öÀ´µÄÒ³Ã滹ÊÇÒª¸øËÑË÷ÒýÇæ
¿´µÄ£¬ËùÒÔ²»Äܲ»ÌáÌáxHTML+CSSÓëSEOµÄ¹Øϵ¡£
1)½«Ò³ÃæÖÐ×îÖØÒªµÄÄÚÈÝÓÃ
h1±êÇ©À¨ÆðÀ´£¬h1µÄÄÚÈݾͺÍÒ³ÃætitleºÜ×ÔÈ»µÄ°üº¬ÁËÕ¾µã»òÕßÒ³Ãæµ ......
¹æ·¶µÄÃüÃûÒ²ÊÇWeb±ê×¼
ÖеÄÖØÒªÒ»Ï±ê×¼µÄÃüÃû¿ÉÒÔ¸üºÃµÄ¿´¶®´úÂ룬ÎÒÏë´ó¼ÒÓ¦¸Ã¶¼ÓÐÕâÖÖ¾Àú£¬Ä³ÈÕ·³ö×Ô¼º¹ýȥдµÄ´úÂë
¾ÓÈ»¿´²»¶®ÁË£¬ºÇºÇ£¬ÎªÁ˱ÜÃâÕâÖÖÇé¿öÎÒÃǾÍÒª¹æ·¶»¯ÃüÃû£¬ÔÙ˵ÁË£¬ÏÖÔÚÒ»¸öÏîÄ¿²»ÊÇÒ»¸öÈ˾ͿÉÒÔÍê³ÉµÄ£¬ÊÇÐèÒª´ó¼Ò»¥ÏàºÏ×÷µÄ£¬Èç¹ûûÓй淶»¯ÃüÃû£¬±ð
È˾ÍÎÞ·¨¿´¶®ÄãµÄ´úÂ룬´ó´ó½µµÍÁ˹¤× ......
<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. ......
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 ......