CSSÑùʽ±íÔÚÍøÒ³Éè¼ÆÖеÄÌØÐÔ
¡¡¡¡Ïë³ÉΪһÃûCSSר¼Ò£¬½ö½öÊìÁ·Ê¹ÓÃCSSÑ¡Ôñ·û(selectors)ÊÇÔ¶Ô¶²»¹»µÄ¡£»¹ÔÚÓÚ¶Ô¹¤×÷µÄÕûÌ广»®£¬¹¤×÷Á÷³ÌµÄÕÆÎÕÒÔ¼°Ìá¸ßÑùʽ±íµÄ¿Éά»¤ÐÔºÍЧÂÊ¡£ÓÃCSS¿ÉÒÔ´´½¨³öÎÒÃÇÏëÒªµÄÃÀÃî¾øÂ×µÄÍøÕ¾£¬¶øÐ´CSS±¾Éí¾ÍÊÇÒ»ÖÖÏíÊÜ¡£ ÄÇôÎÒÃÇÓ¦¸ÃÈçºÎ´´½¨¸ü¾ßÎüÒýÁ¦µÄÑùʽ±í?ÄãµÄÑùʽ±íÓ¦¸Ã¾ßÓÐÄÄÐ©ÌØÐÔÄØ?ͨ¹ýѧϰ²¢½áºÏÎÒ×Ô¼ºµÄ¹¤×÷¾Ñ飬×ܽá³öÒ»Ì×ÖÆ×÷¾«ÃÀÑùʽ±íµÄºÃ·½·¨¡£
¡¡¡¡Ò»¡¢²»ÒªÈÃCSSÓйý¶àµÄ±ê¼Ç
¡¡¡¡Á´½Ó»òÕßµ¼ÈëÑùʽ±íÌýÆðÀ´ºÃÏñÊÇÒ»ÖÖÎÞÍ·Ð÷µÄ¹¤×÷¡£ÎÒ¿´¹ýºÜ¶àµÄÍøÕ¾¿ª·¢¶¼ÓÐ×ÅÕû½àµÄ¡¢×éÖ¯ÑÏÃܵÄcssÎĵµ£¬µ«ÊÇÂýÂýµÄ£¬ÓÉÓÚ¿ÉÄÜ´ï²»µ½ÔÚ¶ÌÆÚÄÚ¿ìËÙ¸üУ¬»òÕßÀÁµÃÔÙÈ¥¹ÜÀí£¬ÕâʹµÃÏÈǰ´´½¨µÄ¾«ÖµÄÑùʽ±í±ä³ÉÁËÀ¬»ø¡£Èç¹ûÎÒÃǹ¤×÷ÔÚÐèÒª·¢²¼ÉϰÙÌõÄÚÈݵÄÅÓ´óÍøÕ¾ÉÏÃæ¡£ÒòΪʱ¼äÓÐÏÞ£¬ËùÒÔÄãÐèҪͨ¹ýǶÌ×»òÕßÅÅÁÐcssÀ´½øÐпìËÙÐ޸Ļò¸üС£Ëæ×Åʱ¼äµÄÍÆÒÆ£¬ÕâÖÖϰ¹ßά³Ö×Å£¬Ö±µ½ÓÐÒ»ÌìÄã±»¸æÖªÕâ¸öÍøÕ¾ÒªÍêÈ«ÍÆ·ÖØÐÂÉè¼Æ¶øÇÒÄãÖ»ÓÐÒ»ÖܵÄʱ¼äÈ¥´´½¨¡£Ò»°ãÀ´Ëµ£¬¸üÐÂÑùʽ±í»¹ËãÊÇÒ»¸ö·Ç³£¼òµ¥µÄ·½·¨£¬³ý·ÇÄ㳤ʱ¼ä¶ÔÍøÕ¾ÁãÉ¢µÄÇøÓò×öÐ޸ģ¬Äã¾Í²»ÄܶÔÍøÕ¾Ñùʽ±í½á¹¹ÓÐÒ»¸öÕûÌåµÄ°ÑÎÕ¡£
¡¡¡¡Á´½Ó»òÕßµ¼ÈëÄãµÄÑùʽ±í²»ÊÇËæÒâµÄÊÂÇé¡£´´½¨¸É¾»Õû½àµÄÑùʽ±í²¢±£³ÖÏÂÈ¥£¬¹¤×÷¾Í»á¸ü¿ªÐÄ¡£×¢Ò⣺Èç¹ûÄãÊÔͼÔÚÿ´Î¸üлòÕßÌí¼ÓÐÂÄÚÈݵÄʱºò´´½¨ÐµÄÑùʽ±í£¬ÄÇÄã¿Ï¶¨ÊÇ×ÔÕÒÂé·³¡£¹ý¶àµÄÁ´½ÓºÍµ¼ÈëÑùʽ±í»áʹÏû³ýbug±äµÃÒì³£À§ÄÑ£¬ÈÃÑùʽ±íºÜÄÑά³Ö¡£´óÒ»µãµÄÍøÕ¾·Ö±ð½¨Á¢²»Í¬²¿·ÖµÄÑùʽ±íÕâÊÇ¿ÉÒÔÀí½âµÄ¡£¾ÍÊÇСÐIJ»Òª×ß¼«¶Ë¡£Ìí¼ÓºÜ¶àµÄÑùʽ±í£¬»áÔö¼Ó¸ü¶àµÄhttpÇëÇ󣬿ÉÄÜ»¹»áÓ°Ïìµ½ºóÃæµÄ¹¤×÷¡£
¡¡¡¡¶þ¡¢ÓïÒ嶨ÒåÃ÷È·Ò×¶®
¡¡¡¡³ýÁËÑ¡Ôñ×îºÏÊʵģ¬×îÓÐÒâÒåµÄÔªËØÀ´±íÊöÍ⣬»¹ÒªÈ·¶¨Ñ¡Ôñclass ºÍidÊôÐÔÖµ¡£¶¨ÒåÃ÷È·¿ÉÒÔÈÃά»¤±äµÃ¼òµ¥£¬Ð¡×éÀïµÄ³ÉÔ±¶¼»á¿´¶®¡£¿´Õâ¸ö¶¨Ò壺
¡¡¡¡.l10k { color: #369; } £¬.left-blue { color: #369; } £¬Èç¹ûÊÇÎÒ×öµÄÎÒ¿ÉÄÜÖªµÀÊÇɶÒâ˼£¬µ«ÊDZðÈËÈ˲»Ò»¶¨¾Í¶®ÁË¡£¼´Ê¹½ñÌìÖªµÀËüµÄÒâ˼£¬µ«ÊÇÄܱ£Ö¤ºÜ¶àÄêºó»¹ÖªµÀËüµÄÒâ˼Âð? ×îºÃ²»ÒªÔÚÀàÊôÐÔÀïÃæÈ¥¼ÓÈëÑÕÉ«»òÕß³¤¿íµÄ³ß´ç¡£¸üÇ¡µ±µÄÃüÃû¹æ·¶£º. work-description { color: #369; }
¡¡¡¡Èý¡¢ÖªµÀʲôʱºòÌí¼ÓÓÐÌõ¼þµÄ×¢ÊͺÍÔËÓü¼ÇÉ
¡¡¡¡ºÜ¶àÎÄÕÂд¹ýһЩ¹ØÓÚÎÊÌâ½â¾öµÄ¼¼ÇÉ£¬ÓÐÌõ¼þµÄ×¢ÊÍÊÇ¿ØÖÆIE·¢²¼µÄÒ»¸öºÃ·½·¨¡£ÎÒͬÒâÓÐÌõ¼þµÄ×¢ÊͱÈÔÚÄãµÄcssÎĵµÀïÂÒдҪºÃµÃ¶à£¬µ«ÊÇ×î½üÎÒ¿ªÊ¼ÂýÂýÒâʶµ½£¬ºÜ¶àÖ¤¾Ý±íÃ÷£¬Õâ²¢²»ÊÇ×îºÃµÄ½â¾ö°ì·¨¡£ÏëÔÚÒ»¸öÔªËØÖÐÉèÖÃË
Ïà¹ØÎĵµ£º
Ó¦ÓÃÑùʽµÄ·½·¨ÓÐÈýÖÖ£ºÍⲿ(external)¡¢ÄÚ²¿(internal)ºÍÄÚÁª(inline)¡£ÆäÖÐǰÁ½ÕߵĻù±¾¸ñʽΪ£º
selector { property £º value£» }
CSSÖпÉÒÔʹÓò»Í¬µÄselector(Ñ¡Ôñ·û)À´Ó¦ÓÃÑù ......
ÔÎĵØÖ·£ºhttp://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Ad ......
CSS ÖÐÓиöÖØÒªµÄ¸ÅÄ¾ÍÊǺÐ×Óģʽ(Box model)¡£
ºÐ×ÓÀïÓÉÀïÖÁÍâÒÀ´ÎÊÇ£º
content ÄÚÈÝ(±ÈÈçÎı¾¡¢Í¼Æ¬µÈ)
padding Äڱ߾à
border ±ß¿ò
margin Íâ±ß¾à
paddingÊôÐÔÓÃÀ´ÉèÖÃÔªËØÄÚÈݵ½ÔªËر߿òµÄ¾àÀë¡£
  ......
ÏñÉÏÃæµÄÒ»ÕÅͼƬÎÒÃǸÃÔõôÓÃjs ºÍcss + div ºÜºÃµÄÓ¦Óõ½ÎÒÃǵÄÏîÄ¿ÖÐÄØ£¿
<style>
.InpuRight{
height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -250px;
}
.InputError{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat 0px 0px;
}
.inputLogin{
wid ......
µ±DIV+CSSƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾Í
ÒªÖսᣬÂíÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄã¶¼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄã¶¼²»
ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬ÄãÒª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõà ......