Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

yuiѧϰ±Ê¼Ç£¨¶þ£© ʹÓÃcss¹¤¾ß±£³ÖÒ»ÖÂÐÔ

Ëĸöcss¹¤¾ß£ºfonts,grids,reset,base
Ê¹ÔªËØ±ê×¼»¯µÄreset.css
ÒÔÏÂÆÕͨ¶ø³£ÓõÄÔªËØ¶¼½«marginºÍpaddingÖµ±ê×¼»¯µ½0
the document body
div and p 
ËùÓÐlist ÔªËØ£ºdl,dt,dd,ul,ol,li
±êÌâ¼¶ÔªËØ£ºh1,h2,h3,h4,h5,h6
preºÍblockquoteÔªËØ
ijЩ±íµ¥ÔªËØ£ºform,fieldset,input,textarea
tableÔªËØ£ºth£¬td
½ÓÏÂÀ´Òª±ê×¼»¯µÄÔªËØÊÇtableÔªËØ£¬½«ÆäborderÉèΪ0£¬Í¼ÏñÔªËØµÄborderÒ²ÉèΪ0.
·ÀÖ¹ÔÚijЩä¯ÀÀÆ÷ÖÐ×ÖÌå»á±äбÌå»ò´ÖÌ壬һÏÂÔªËØ½«font-styleºÍfont-weightÉèΪnormal:
address
caption
cite
code
dfn
em
strong
th
var
½ÓÏÂÀ´µÄ¹æÔòÊǶÔÓÐÐòºÍÎÞÐòµÄhtml listÔªËØ £¬ÉèÖÃlist-styleΪ none¡£½«captionºÍthÔªËØµÄ¶ÔÆë·½Ê½¶¼ÑϸñÉèΪ×ó¶ÔÆë
ËùÓеıêÌâ¼¶ÔªËØµÄfont-sizeÉèΪ100%£¬font-weight:normal£¬ÓÐЧµØ½«ËùÓбêÌâÀàÐÍÉèΪÏàͬµÄ³ß´çºÍ´Öϸ¡£
×îºóÌṩµÄÑùʽ¹æÔòÊÇÕë¶Ô:beforeºÍ:after£¬Ëû½«Î±ÔªËØÇ°ºó²åÈëµÄÄÚÈÝÉèΪ¿Õ¡£
¹ØÓÚ:beforeÎ±ÔªËØ£¬ÔÚÔªËØÄÚÈÝ֮ǰ²åÈëÄÚÈÝ¡£Õâ¸öÎ±ÔªËØÔÊÐí´´×÷ÈËÔ±ÔÚÔªËØÄÚÈÝ×îǰ²åÈëÉú³ÉÄÚÈÝ¡£Ä¬Èϵأ¬Õâ¸öÎ±ÔªËØÊÇÐÐÄÚÔªËØ£¬²»¹ý¿ÉÒÔʹÓÃdisplay¸Ä±äÕâÒ»µã¡£
<style>
div:after{content:'Hello';}
</style>
<div>World</div>
base.css
reset.cssͳһÁ˲»Í¬ä¯ÀÀÆ÷ÖеÄĬÈÏcssÑùʽ£¬base.cssÔÚ´Ë»ù´¡ÉÏÌṩÁ˶Գ£ÓÃÔªËØµÄ»ù±¾ÑùʽÉèÖá£
±êÌâ¼¶
lists
table
Çå³ýÎÄ×ÖÑùʽµÄfonts.css
bodyÉÏ£º
*font-size:smallÒÔ¼°*font:x-small ΪÁËÔÚieÖÐÉèÖÃfont-size£¬¾ÀÕýfont-sizeÔÚcss1±ê×¼ÖеÄÌØµã¡£
tableÉÏ£º
ie hack·½·¨£¬ieÖÐ×ÜÏÔµÃÓÐЩС£¬½«×ÖÌåÉèÖÃΪ108%£¬¶øÆäËûä¯ÀÀÆ÷Ϊ100%¡£¶ÔÓÚA¼¶ä¯ÀÀÆ÷¶¼¼æÈÝ¡£
ʹÓÃgrids.css½øÐв¼¾Ö
Ò»¸öÌØµãÊÇ×Ô¶¯¾ÓÖв¼¾ÖÖеÄÄÚÈÝ¡£ÁíÒ»¸öÌØµãÊǽŲ¿£¬Èç¹ûÄãÏëʹÓÃËü£¬Ëü»á×Ô¶¯Çå³ý²¢ÇÒ¾ÓÓÚÒ³Ãæµ×²¿£¬ÎÞÂÛÄãʹÓúÎÖÖ²¼¾ÖÄ£°å¡£
<!DOCTYPE HTML PUBLIC "-//W#C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Mark-up Example</title>
<link rel="stylesheet" type="text/css" href="../build/reset-fonts-grids/reset-fonts-grids.css" mce_href="build/reset-fonts-grids/reset-fonts-grids


Ïà¹ØÎĵµ£º

div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨


div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû. 
 
CSS¼¼ÇÉ
 
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß
line- ......

iframe ×ÔÊÊÓ¦¸ß¶È ¿í¶È È«css ʵÏÖ ÎÞ javascript

<html>
<body style="margin:0;">
<div>
    <table style="width:100%;height:100%"  cellpadding='0' cellspacing='0'>
    <tr>
        <td style="width:120px;background-color:Red">
   ......

CSSÍøÒ³²¼¾Öʱ³£·¸µÄ¼¸ÖÖС´íÎó

CSSÍøÒ³²¼¾Öʱ³£·¸µÄ¼¸ÖÖС´íÎó£º
¡¡¡¡1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾­³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡2. ¼ì²éCSSÊÇ·ñÊéдÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSS ......

cssÔÚ²»Í¬ä¯ÀÀÆ÷ÖеÄд·¨

±ÈÈçÒª·Ö±æIE6ºÍfirefoxÁ½ÖÖä¯ÀÀÆ÷£¬¿ÉÒÔÕâÑùд£º
¡¡¡¡<style>
¡¡¡¡div{
¡¡¡¡background:green; /* for firefox */
¡¡¡¡*background:red; /* for IE6 */
¡¡¡¡}
¡¡¡¡</style>
¡¡¡¡ÎÒÔÚIE6Öп´µ½ÊǺìÉ«µÄ£¬ÔÚfirefoxÖп´µ½ÊÇÂÌÉ«µÄ¡£
¡¡¡¡½âÊÍһϣº
¡¡¡¡ÉÏÃæµÄcssÔÚfirefoxÖУ¬ËüÊÇÈÏʶ²»Á˺óÃæµÄÄǸö´ ......

³£ÓÃcssÃüÃû¹æÔò

    Í·£ºheader
¡¡¡¡ÄÚÈÝ£ºcontent/container
¡¡¡¡Î²£ºfooter
¡¡¡¡µ¼º½£ºnav
¡¡¡¡²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn
¡¡¡¡Ò³ÃæÍâΧ¿ØÖÆÕûÌå²¼¾Ö¿í¶È£ºwrapper
¡¡¡¡×óÓÒÖУºleft right center
¡¡¡¡µÇ¼Ìõ£ºloginbar
¡¡¡¡±êÖ¾£ºlogo
¡¡¡¡¹ã¸æ£ºbanner
¡¡¡¡Ò³ÃæÖ÷Ì壺main
¡¡¡¡Èȵ㣺hot ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ