ͼƬ×Ô¶¯ÊÊÓ¦´óСµÄÎÊÌâÔÚÆ½Ê±ÖÆ×÷µÄʱºòÊDZȽϳ£¼ûµÄÎÊÌ⣬ÏÂÃæÌṩһ¸ö±È½Ï¼òµ¥µÄ½â¾ö·½·¨£º
div img {
max-width:600px;
//IE7¡¢FFµÈÆäËû·ÇIEä¯ÀÀÆ÷ÏÂ×î´ó¿í¶ÈΪ600px;
width:600px;
//ËùÓÐä¯ÀÀÆ÷ÖÐͼƬµÄ´óСΪ600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//µ±Í¼Æ¬´óС´óÓÚ600px£¬×Ô¶¯ËõСΪ600px;
overflow:hidden;
} ......
<style type="text/css">
<!--
input{ background:expression((this.readOnly &&this.readOnly==true)?"#CCCCCC":"")}
-->
</style>
<body>
<input type="text" name="" />
<input type="text" name="" readonly="readonly" />
expression:´¦Àí·½Ê½£º
expression(²Ù×÷ÊÖ·¨)£»
expression(?:) ......
ÕâÊÇÎÒÔÚÒ»¸öÍøÕ¾ÉÏ¿´µ½µÄ,CSS¿ØÖÆÒ»¸ö²Ëµ¥,ºÜ¾µäʵÓÃ
CssÎļþÈçÏÂ:css.css
@charset "UTF-8";
/* navigation.css
$Revision: 1.0 $
(c) 2008 Fortinet, Inc. All rights reserved.
*/
/* Navigation Styles ------------------------------------------- */
#wrapper
{
width:1000px;margin:0 auto;
}
#nav_bar {
clear: both;
background: url(./menu_bkrd.jpg) repeat-x;
height: 26px;
width: 100%;
}
#navigation {
padding: 0 0 0 10px;
}
#nav, #nav ul {
float: left;
list-style: none;
line-height: 1;
padding: 0 0 0 0; /* 0 0 0 0.5em; */
margin: 0; /* 0 0 1em 0; */
/* border: solid 1px #33FF00; /* (Green) remove this item after testing */
width:auto;
}
#nav a {
font: 11px/12px Tahoma, Arial, Helvetica, Verdana, sans-serif;
color: #6a737b;
display: block;
width: 150px; /* 6em; 3em; 10em -- 150px*/
text-decoration: none;
padding: 7px 10px 4px 6px; /* 0.5em 3.5em 0.2em ......
ÏÂÃæÕâ¸öCSSÑùʽµÄ±í¸ñ£¬¸öÈ˸оõÑÕÉ«Æðµ½Á˺ܴóµÄ×÷Óá£Èç¹û²»ÊÇÁ½ÖÖÑÕÉ«µÄ¶Ô±ÈЧ¹ûºÃ£¬¿ÉÄÜÒ²¾ÍÊÇÒ»°ãµÄ±í¸ñ£º
ÏÈÀ´¿´HTML£º
<table width="590" cellspacing="1">
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
ÉÏÃæµÄ±í¸ñûÓÐʲôҪ½âÊ͵쬽¨Òé´ó¼ÒÓÃthead,tbody,tfootÕâЩ¾ßÓÐÓïÒåµÄ±êÇ©¡£
body{
......
¼õÉÙÍøÕ¾HTTPÇëÇóÕâÊǼӿìÍøÕ¾·ÃÎÊËٶȵĹؼü£¬¶øCSS sprites¼¼ÊõÊǰѶàÕÅͼÏñ×éºÏ³ÉÒ»ÕÅͼÏñ£¬ÕâÑùÓû§ÔÚ·ÃÎÊÍøÕ¾Ê±Ò»´ÎÐ԰ѶàÕÅͼƬ¼ÓÔØÍ꣬¶ø²»ÐèÒªÒ»ÕÅÕÅͼƬµÄ¼ÓÔØ£¬ÕâÑù¼õÉÙÁË×é¼þµÄÒ³Â룬½¨Á¢¸ü·á¸»µÄÄÚÈݵÄÍøÕ¾£¬Í¬Ê±Ò²È¡µÃÁË¿ìËٵķ´Ó¦
ʱ¼ä¡£
ÒÔ25ÒÚÆóÒµÍøÕ¾¹ÜÀíϵͳÖеÄÔ´Âë×÷ΪʵÀýÉî¿Ì½²½âCSS sprites¼¼ÊõÀ´¼Ó¿ìÄúµÄÍøÕ¾(¼õÉÙÍøÕ¾HTTPÇëÇó)¡£
ÏȲåÈë˵һ¸öSEOÖжÔÍøÕ¾ÆÀ·ÖµÄ¹¤¾ß:YSLOW,YSLOWµÄµÚÒ»¸öÆÀ·ÖÒªÇó¾ÍÊǼõÉÙÒ³ÃæÉϵÄHTTPÇëÇ󣬯äÖÐÓÐÒ»¶ÎÃèÊö£º
ÖÕ¶ËÓû§ÏìÓ¦µÄʱ¼äÖУ¬ÓÐ80%ÓÃÓÚÏÂÔØ¸÷ÏîÄÚÈÝ¡£Õⲿ·Öʱ¼ä°üÀ¨ÏÂÔØÒ³ÃæÖеÄͼÏñ¡¢Ñùʽ±í¡¢½Å±¾¡¢FlashµÈ¡£Í¨¹ý¼õÉÙÒ³ÃæÖеÄÔªËØ¿ÉÒÔ¼õÉÙHTTP ÇëÇóµÄ´ÎÊý¡£ÕâÊÇÌá¸ßÍøÒ³ËٶȵĹؼü²½Öè¡£¼õÉÙHTTPÇëÇóµÄ·½·¨°üÀ¨£ººÏ²¢Javascript/CSSÎļþ¡¢Ê¹ÓÃCSS Sprites¡£
²ÉÓÃÁËÍøÕ¾ÓÅ»¯µÄ×ÛºÏÊֶΣ¬25ÒÚÆóÒµÍøÕ¾¹ÜÀíϵͳµÄ¹Ù·½Õ¾µÄÍøÒ³ÆÀ¼¶ÎªA£¬ÐÔÄÜÆÀ·Ö´ïµ½ÁË96(°´ÆÀ²â¹æÔò¼¯ÎªÐ¡ÐÍÍøÕ¾»òBLOG)¡£
25ÒÚÆ ......
¾ø¶Ô¶¨Î»µÄÔªËØµÄλÖÃÏà¶ÔÓÚ×î½üµÄÒѶ¨Î»×æÏÈÔªËØ£¬Èç¹ûÔªËØÃ»ÓÐÒѶ¨Î»µÄ׿ÏÈÔªËØ£¬ÄÇôËüµÄλÖÃÏà¶ÔÓÚ×î³õµÄ°üº¬¿é¡£
¶ÔÓÚ¶¨Î»µÄÖ÷ÒªÎÊÌâÊÇÒª¼ÇסÿÖÖ¶¨Î»µÄÒâÒå¡£ËùÒÔ£¬ÏÖÔÚÈÃÎÒÃǸ´Ï°Ò»ÏÂѧ¹ýµÄ֪ʶ°É£ºÏà¶Ô¶¨Î»ÊÇ“Ïà¶ÔÓÚ”ÔªËØÔÚÎĵµÖеijõʼλÖ㬶ø¾ø¶Ô¶¨Î»ÊÇ“Ïà¶ÔÓÚ”×î½üµÄÒѶ¨Î»×æÏÈÔªËØ£¬Èç¹û²»´æÔÚÒѶ¨Î»µÄ׿ÏÈÔªËØ£¬ÄÇô“Ïà¶ÔÓÚ”×î³õµÄ°üº¬¿é¡£
×¢ÊÍ£º¸ù¾ÝÓû§´úÀíµÄ²»Í¬£¬×î³õµÄ°üº¬¿é¿ÉÄÜÊÇ»²¼»ò HTML ÔªËØ¡£
Ìáʾ£ºÒòΪ¾ø¶Ô¶¨Î»µÄ¿òÓëÎĵµÁ÷Î޹أ¬ËùÒÔËüÃÇ¿ÉÒÔ¸²¸ÇÒ³ÃæÉÏµÄÆäËüÔªËØ¡£¿ÉÒÔͨ¹ýÉèÖà z-index ÊôÐÔÀ´¿ØÖÆÕâЩ¿òµÄ¶Ñ·Å´ÎÐò¡£
ÅÉÉúÑ¡ÔñÆ÷
li strong {
font-style: italic;
font-weight: normal;
}
idÑ¡ÔñÆ÷
#red {color:red;}
#green {color:green;}
ÀàÑ¡ÔñÆ÷
.center {text-align: center} ......