¡¶¾«Í¨CSS¸ß¼¶WEB±ê×¼½â¾ö·½°¸¡·µÚÆßÕ ²¼¾Ö
ÎÒÔÚwww.c09.com ·¢±íÁËÕâ¸ö±Ê¼Ç²¢ÉÏ´«ÁËÔÖøµÄPDF£¬½ñÌìÓпգ¬×ªµ½BLOGÉÏÀ´¡£
µÚÆßÕÂ ²¼¾Ö
ËùÓÐCSS²¼¾Ö¼¼Êõ¶¼ÒÀÀµÓÚÈý¸ö»ù±¾¸ÅÄ¶¨Î»¡¢¸¡¶¯ºÍ¿Õ°×±ß²Ù×Ý
7.1 ÈÃÉè¼Æ¾ÓÖÐ[code]
<body>
<div id='wrapper'>
</div>
</body>
/*×îÃ÷Á˵ľÓÖз½°¸£¬¿ÉϧIE6²»Ö§³Ö*/
#wrapper{
width:720px;
margin:0 auto;
}
/*ÀûÓÃIe¶Ôtext-alignµÄÀí½âBUG½â¾öIE6Ö§³ÖÎÊÌâ*/
body{
text-algin:center;
min-width:760px;/*Èç¹û´°¿Ú¿í¶ÈСÓÚ760px¾Í²»ÔÙ×ÔÊÊÓ¦ËõС*/
}
#wrapper{
width:720px;
margin:0 auto;
text-algin:left;
}
/*Ò²¿ÉÒÔ²ÉÓÃÕâÖÖ·½·¨,Ö»Ð趨ÒåwrapperÒ»¸öÔªËØ*/
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
[/code]7.2 ¹Ì¶¨¿í¶ÈµÄ²¼¾Ö[code]
/*ÕâÊÇÒ»¸ö·Ç³£³£¼ûµÄÁ½Áв¼¾Ö*/
<div id='wrapper'>
<div id='branding'>
...
</div>
<div id='content'>
...
</div>
<div id='mainNav'>
...
</div>
<div id='footer'>
...
</div>
</div>
/*Á½Áв¼¾ÖµÄCSSÉ趨ºÜ¼òµ¥*/
#content{
width:520px;
float:right;
}
#mainNav{
width:180px;
float:left;
}
#footer{
clear:both;
}
/*ÈÃÎÄ×ÖÓëÈÝÆ÷±ßÔµ±£³Ö¾àÀë*/
#mainNav{
padding-top:20px;
padding-bottom:20px;
}
#mainNav li{
padding-left:20px;
padding-right:20px;
}
#content h1,#content h2,#content p{
padding-right:20px;
}
/*ÈýÁв¼¾Ö£¬¿ÉÒÔÔÚÓÒ²àcontentÖÐÔÙÌí¼ÓÒ»À¸*/
<div id='content'>
<div id='mainContent'>
......
</div>
<div id='secondaryContent'>
...
</div>
</div>
/*Ö»ÒªÒ»¸ö×ó¶ÔÆë£¬ÁíÒ»¸öÓÒ¶ÔÆë¾Í¿ÉÒÔÁË*/
#mainContent{
width:320px;
float:left;
}
#secondaryContent{
width:180px;
float:right;
}
[/code]Á÷Ìå²¼¾Ö[code]
/*²¼¾Ö¿í¶È¸ù¾Ý´°¿Ú´óС×ÔÊÊÓ¦*/
#w
Ïà¹ØÎĵµ£º
Ê¹ÍøÒ³±ä»Ò£¬ÓÐÁ½ÖÖ·½·¨¿ÉʵÏÖ£º
µÚÒ»ÖÖ£¬È«²¿±ä»Ò£º
<style type="text/css">
html { FILTER: gray }
</style>
µÚ¶þÖÖ£¬¾Ö²¿±ä»Ò£¬¹ã¸æ´úÂë²»»á±ä»Ò£º
<style type="text/css">
BODY {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style> ......
ת×Ô£ºhttp://www.div-css.com/html/XHTML-CSS/hack/1136667.html
Çø±ð²»Í¬ä¯ÀÀÆ÷£¬CSS hackд·¨£º
Çø±ðIE6
ÓëFF
£º
background:orange
;*
background:blue
;
Çø±ðIE6
ÓëIE7
£º
background:green
!important
;background:blue
;
Çø±ðIE7
Ó ......
CSS¼æÈÝÐÔÒ»Ö±ÊÇ´ó¼ÒÍ·ÌÛµÄÎÊÌ⣬ÏÖÔÚ˵˵ÈçºÎÇø·ÖÕ⼸¸öä¯ÀÀÆ÷£¬IE6¡¢IE7¡¢IE8ºÍFF£¬IE8¾ùÖ¸IE8Õýʽ°æ,°æ±¾ºÅ:8.0.6001.18702¡£
ÒÔÑÕɫΪÀýÀ´ËµÈçºÎÇø·ÖÕ⼸¸öä¯ÀÀÆ÷£º
.csshack{
color:#f00; &nbs ......
jQuery, MooTools, Prototype µÈÓÅÐãµÄ
JavaScript ¿ò¼ÜÓµÓи÷ÖÖÇ¿´óµÄ¹¦ÄÜ£¬°üÀ¨»æÖÆ Web ͼ±í£¬Ê¹ÓÃÕâЩ¿ò¼ÜÒÔ¼°ÏàÓ¦²å¼þ£¬ÎÒÃÇ¿ÉÒԷdz£ÇáËɵØÊµÏÖÇúÏßͼ£¬Ô²±ýͼ£¬Öù״ͼµÈ
Web ͼ±íµÄ»æÖÆ£¬¶ø²»±ØÏóÒÔÍùÄÇÑùͨ¹ý¸´Ô Flash ¼¼ÊõʵÏÖ¡£±¾ÎĽéÉÜÁË9¸öÓÅÐãµÄ»ùÓÚ JavaScript Óë CSS& ......
¡¾¼ò ½é¡¿
Ϊ·½±ãÕ¾µã°§µ¿,ÌØÌṩcssÂ˾µ´úÂë,ÒÔ±í°§µ¿.ÒÔÏÂΪȫվCSS´úÂë
Ϊ·½±ãÕ¾µã°§µ¿,ÌØÌṩcssÂ˾µ´úÂë,ÒÔ±í°§µ¿.ÒÔÏÂΪȫվCSS´úÂë.
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
ʹÓ÷½·¨:Õâ¶Î´úÂë¿ÉÒÔ±äÍøÒ³ÎªºÚ°×,½«´úÂë¼Óµ½CSS×î¶¥¶Ë¾Í¿ÉÒÔʵÏÖËØ×°.½¨ÒéÈ«¹úÕ¾³¤¶¯ÆðÀ´.ÎªÔ ......