¡¾×ª¡¿ÓÅ»¯CSSµÄÍøÒ³äÖȾËٶȵÄ11ÖÖ·½·¨
1¡¢Ê®Áù½øÖƵÄÑÕɫֵ¶ÔλÊýÓë´óСд
±àдʮÁù½øÖÆÑÕɫֵʱÄã¿ÉÄÜ»áÓÃСд×Öĸ»òÊ¡ÂÔ³É3λÊý£¬¹ØÓÚÕâд·¨Ã»ÕÒµ½È·ÊµµÄÊý¾ÝÖ¤Ã÷¶Ôä¯ÀÀÆ÷µÄäÖȾЧÂÊÊÇ·ñÓÐÓ°Ï죬µ«Ê®Áù½øÖƵÄÑÕɫֵĬÈϱê×¼ÊÇ´óд¼°6λÊý±ê×¢¡£ÔÚδ֪Çé¿öϲ»Ï£ÍûðÏÕ¶ø½µµÍÁËäÖȾµÄЧÂÊ¡£
* ²»ÔÞ³É - color:#f3a;
* ½¨ÒéÓà - color:#FF33AA;
2¡¢displayÓëvisibilityµÄ²îÒì
ËûÃÇÓÃÓÚÉèÖûò¼ìË÷ÊÇ·ñÏÔʾ¶ÔÏó¡£displayÒþ²Ø¶ÔÏó²»±£ÁôÎïÀí¿Õ¼ä£¬visibilityΪÒþ²Ø¶ÔÏó±£ÁôÕ¼¾ÝµÄÎïÀí¿Õ¼ä¡£µ±ä¯ÀÀÆ÷äÖȾ±»Õ¼¾ÝµÄÎïÀí¿Õ¼äʱ£¬»áÓÐËùÏûºÄ×ÊÔ´¡£
* ²»ÔÞ³É - visibility:hidden;
* ½¨ÒéÓà - display:none;
3¡¢border:none;Óëborder:0;µÄÇø±ð
ºÍdisplayÓëvisibilityµÄ¹ØÏµÀàËÆ£¬·Ö±ð²»±£ÁôÓë±£Áô¿Õ¼ä¡£¸ü¶àµÄÊÇborder:0;¾¡¹Ü¿ÉÒÔÒþ²Øµô±ß¿ò£¬µ«Ëü»áΪÄã±£Áôborder-color/border-styleµÄʹÓÃȨ¡£
* ²»ÔÞ³É - border:0;
* ½¨ÒéÓà - border:none;
4¡¢²»ÒËÓùýСµÄ±³¾°Í¼Æ¬Æ½ÆÌ
Ò»ÕÅ¿í¸ß1pxµÄ±³¾°Í¼Æ¬£¬ËäÈ»ÎļþÌå»ý·Ç³£Ö®Ð¡£¬µ«äÖȾ¿í¸ß500pxµÄ°å¿éÐèÒªÖØ¸´Æ½ÆÌ2500´Î¡£Ìá¸ß±³¾°Í¼Æ¬äÖȾЧÂʸúͼƬ³ß´ç¼°Ìå»ýÓйأ¬×î´óµÄͼƬÎļþÌå»ý±£³ÖÔ¼70KB¡£
* ²»ÔÞ³É - ¿í¸ß8pxÒÔÏÂµÄÆ½ÆÌ±³¾°Í¼Æ¬
* ½¨ÒéÓà - ºâÁ¿ÊÊÖÐÌå»ý¼°³ß´çµÄ±³¾°Í¼Æ¬
5¡¢É÷ÓÃIEÂ˾µ
IEµÄÂ˾µ³ýÁ˱ȽÏÏûºÄ×ÊÔ´ÍâÒ²ÓмæÈÝÐÔÎÊÌâ¡£µ±ÖÐÓÐÈÃPNG͸Ã÷µÄÂ˾µ£¬¿É²ÉÓÃGIF»òJPGËÆÍ¸·Ç͸µÄ°ì·¨À´±ÜÃâʹÓôËÂ˾µ¡£½¨ÒéÖ»ÔÚIE6Ó¦ÓÃGIF͸Ã÷£¬ÒòΪIE7ÒÔÉÏÒѾ֧³ÖÁËPNG͸Ã÷¡£
* ²»Ô޳ɣ¬ÀÄÓÃIEÂ˾µÒòΪÏûºÄ×ÊÔ´ÍâÒ²ÓмæÈÝÐÔÎÊÌâ¡£
* ½¨ÒéÓã¬×îºÃÑ¡ÔñÆäËü·½·¨ÄܱÜÃâʹÓÃÂ˾µ¡£
6¡¢*{ margin:0; padding:0;}±ÜÃâä¯ÀÀÆ÷Ñùʽ²îÒì
*ºÅͨÅä·û°ÑËùÓбêÇ©¶¼³õʼ»¯Ò»±é£¬ä¯ÀÀÆ÷µÄäÖȾÏûºÄÒ»¶¨µÄ×ÊÔ´¡£Óв¿·ÖÔÚ±êÇ©ÔÚ²»Í¬ä¯ÀÀÆ÷Éϼ¸ºõÎÞ²îÒ죬»òÊÇijЩÒѾ²»ÍƼöʹÓõıêÇ©(ÒòΪÄã²»»áÈ¥ÓÃËü)£¬ËüÃDz»ÐèͨÅä·ûÒªÖØÐ³õʼ»¯Ò»±éÕâÑù×öÄܽÚʡһµã×ÊÔ´¡£
* ²»Ô޳ɣ¬Ê¹ÓÃ*ºÅͨÅä·û
* ²»Ô޳ɣ¬div span button b tableµÈ±êÇ©ÄÉÈëͨÅä·û¿ØÖÆÄÚÍâÌî³äÑùʽ
* ½¨ÒéÓã¬ÓÐÑ¡ÔñÐÔµØÊ¹ÓÃͨÅä·û¿ØÖÆÄÚÍâÌî³äÑùʽ¡£
7¡¢²»ÒªÌí¼Ó¶îÍâµÄ±êÇ©À´ÃèÊöclass»òid
Èç¹ûÄãÓÐÒ»¸öÑ¡ÔñÆ÷ÊÇÒÔid×÷Ϊ¹Ø¼üÑ¡Ôñ·û£¬Çë²»ÒªÌí¼Ó¶àÓà±êÇ©ÃûÉÏÈ¥¡£ÒòΪIDÊÇΨһµÄ£¬Ä㲻ҪΪÁËÒ»¸ö²»´æÔÚµÄÀíÓɶø½µµÍÁËÆ¥ÅäµÄЧÂÊ¡£
* ²»ÔÞ³É - button#backButton { }
* ²»ÔÞ³É - .menu-left #newMenuIcon { }
* ½¨ÒéÓà - #backButton { }
* ½¨ÒéÓà - #newM
Ïà¹ØÎĵµ£º
Block element ¿é¼¶ÔªËØ
¹ËÃû˼Òå¾ÍÊÇÒÔ¿éÏÔʾµÄÔªËØ£¬¸ß¶È¿í¶È¶¼ÊÇ¿ÉÒÔÉèÖõġ£±ÈÈçÎÒÃdz£ÓõÄ<div>¡¢<p>¡¢<ul>ĬÈÏ״̬϶¼ÊÇÊôÓÚ¿é¼¶ÔªËØ¡£¿é¼¶ÔªËرȽϰԵÀ£¬Ä¬ÈÏ״̬ÏÂÿ´Î¶¼Õ¼¾ÝÒ»Õû¸öÐУ¬ºóÃæµÄÄÚÈÝÒ²±ØÐëÔÙÐÂÆðÒ»ÐÐÏÔʾ¡£µ±È»·Ç¿é¼¶ÔªËØÒ²¿ÉÒÔͨ¹ýcssµÄdisplay:block;½«Æä¸ü¸Ä³É¿é¼¶ÔªËØ¡£´ËÍâ» ......
×¢£º"elm"´ú±íij¸öDOMÔªËØ£¬"xxx"´ú±íij¸öCSSÊôÐÔ
Ò»¡¢elm.style.xxx Ö»ÄÜ»ñÈ¡ÄÚÁªÑùʽÀïµÄÖµ
ÒªÏë»ñµÃÕýÈ·µÄcssÖµ£º
IE£ºelm.currentStyle[xxx]
W3C±ê×¼£ºdocument.defaultView.getComputedStyle(elm,"")[xxx]
×¢Ò⣺ÓÃIE·½·¨·µ»ØÖµ¿ÉÄܲ»ÊÇÊý×Ö£¬¶øÊÇauto£»ÓÃw3cµÄ·½·¨×ÜÊǻ᷵»ØÊý×Ö+µ¥Î»
Èý¡¢offsetLeft
......
The Lovely CSS Framework is a simple and straight forward way to easily
deploy an XHTML/CSS site.
Based on a simple 960px wide grid system, featuring multiple column layouts,
and various pluggable add-ons.
Õâ¸öÓÉ Constantinos Demetriadis ´´½¨µÄÏîÄ¿ÊÇÒ»¸ö CSS ¿ò¼Ü£¬»ùÓÚ 960.gs£¬»¹ÓµÓÐÒ»¸ö²å¼þ ......
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£©
JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......