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

CSS ²Ëµ¥ÏµÁУºÓà UL ÖÆ×÷ºáÏòµ¼º½²Ëµ¥£­ÈëÃŰæ

Óà UL ÖÆ×÷²Ëµ¥ÏÖÔڷdz£Á÷ÐУ¬ÄÇÎÒÃÇÒ²´Õ´ÕÈÈÄÖ£¬µÚÒ»½²¾Í˵˵Óà UL ÖÆ×÷µ¼º½²Ëµ¥µÄ·½·¨£¬ÕâÒ»½²ÊÇÈëÃŰ棬ֻÊÇʵÏÖ»ù±¾¹¦ÄÜ£¬»¶Ó­¸÷λ·¢²¼×Ô¼ºµÄʵÏÖ·½Ê½¡£
ÎÒÃÇÏȶ¨Ò»Ï HTML ´úÂ룺
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="http://www.yitu.org">YITU.org</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com">Google.com</a></li>
</ul>
Óà UL ×öµ¼º½²Ëµ¥Ö®ËùÒÔ±»¹ã·º²ÉÓã¬ÓŵãºÜÃ÷ÏÔ£¬´úÂëÇåÎú£¬²¼¾Ö·½±ã¡£
ÏÂÃæÎÒÃǾͿªÊ¼Ð´ CSS £¬ÈÃÔ­±¾×ÝÏòÏÔʾµÄÄÚÈÝ£¬ºá×ÅÅÅ£º
ÉèÖÃһЩ¹«¹²Ñùʽ£º
´úÂë:
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* ÉèÖÃÎÄ×Ö´óСºÍ×ÖÌåÑùʽ */
}
#menu, #menu li {
list-style:none; /* ½«Ä¬ÈϵÄÁбí·ûºÅÈ¥µô */
padding:0; /* ½«Ä¬ÈϵÄÄڱ߾àÈ¥µô */
margin:0; /* ½«Ä¬ÈϵÄÍâ±ß¾àÈ¥µô */
}
</style>
ÒòΪÎÒÃÇÏÖÔÚÕâ¸öÊǶÀÁ¢½²½â£¬ËùÒÔÐèÒªÉèÖÃһЩ¹«¹²Ñùʽ£¬Èç¹ûÄúÔÚ body »òÆäËûµØ·½ÒѾ­ÖØÉèÁËĬÈÏЧ¹û£¬Õâ¶Î¿ÉÒÔÈ¥µô¡£
ÈÃÎÄ×Öºá×ÅÅÅ£º
´úÂë:
<style type="text/css">
#menu li {
float:left; /* Íù×󸡶¯ */
}
</style>
ÉèÖÃÁ´½ÓÑùʽ£º
´úÂë:
<style type="text/css">
#menu li a {
display:block; /* ½«Á´½ÓÉèΪ¿é¼¶ÔªËØ */
padding:8px 50px; /* ÉèÖÃÄڱ߾à */
background:#3A4953; /* ÉèÖñ³¾°É« */
color:#fff; /* ÉèÖÃÎÄ×ÖÑÕÉ« */
text-decoration:none; /* È¥µôÏ»®Ïß */
border-right:1px solid #000; /* ÔÚ×ó²à¼ÓÉÏ·Ö¸ôÏß */
}
</style>
ÎÒÃÇÓÃÄڱ߾àµÄ·½Ê½£¬ÈÃÿ¸ö²Ëµ¥±äµÃ¿íһЩ£¬Èç¹ûÄãµÄ²Ëµ¥ÊÇÖÐÓ¢ÎÄ»ìÅŵ쬽¨ÒéÉèÖõ¥¸ö²Ëµ¥µÄ¸ß¿í£¬ÕâÑù¿ÉÒÔ±ÜÃâÖÐÓ¢ÎÄ×Ö·ûÐи߲»Ò»Öµ¼Öµĸ߶ÈÎó²î¡£ÉèÖù̶¨¸ß¶ÈµÄ·½Ê½£º
´úÂ룺
<style type="text/css">
#menu li a {
display:block; /* ½«Á´½ÓÉèΪ¿é¼¶ÔªËØ */
width:150px; /* ÉèÖÿí¶È */
height:30px; /* ÉèÖÃ¸ß¶È */
line-height:30px; /* ÉèÖÃÐиߣ¬½«Ðиߺ͸߶ÈÉèÖÃͬһ¸öÖµ£¬¿ÉÒÔÈõ¥ÐÐÎı¾´¹Ö±¾ÓÖÐ */
text-align:center; /* ¾ÓÖÐ¶ÔÆëÎÄ×Ö */
background:#3A4953; /* ÉèÖñ³¾°É« */
color:#fff; /* ÉèÖÃÎÄ×Ö


Ïà¹ØÎĵµ£º

½¨Õ¾DIV+CSS Ö®ÍøÒ³ÇÐͼ¹ý³ÌÖÐdiv+cssÃüÃû¹æÔò

¡¡¡¡ÄÚÈÝ£ºcontentcontainer µ¼º½£ºnav ²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn ±êÖ¾£ºlogo Ò³ÃæÖ÷Ì壺main
¡¡¡¡¹ã¸æ£ºbanner Èȵ㣺hot ÐÂÎÅ£ºnews
¡¡¡¡ÏÂÔØ£ºdownload ×Óµ¼º½£ºsubnav ²Ëµ¥£ºmenu
¡¡¡¡ËÑË÷£ºsearch Ò³½Å£ºfooter ¹ö¶¯£ºscroll
¡¡¡¡°æÈ¨£ºcopyright ÓÑÇéÁ´½Ó£ºfriendlink ×Ӳ˵¥£ºsubmenu
¡¡¡¡ÄÚÈÝ£ºcontent ......

CSS±Ê¼Ç

Ò»¡¢ÐǺÅ*
Ó¦¸ÃÊǸöͨÅä·û¡£±ÈÈç
<style type="text/css">
.roundBorder *
{
 background: white;
 display: block;
 height: 1px;
 overflow: hidden;
}
</style>
……
 <b class="roundBorder">
 <b class="round ......

IE6ÖÐCSSÎÞЧÎÊÌâ

IE6ÖÐCSSÎÞЧÎÊÌâ
ͬÊ·´À¡ÎÒÒ»¸öÒ³ÃæÔÚIE7ºÍFirefox϶¼Õý³£,µ«ÊÇÔÚIE6ÖÐÎÞÑùʽ.µ«ÊÇÒ³ÃæÎÒ×ö¸øËûÃǵÄʱºòÒ»Çж¼ÊÇÕý³£µÄ.°ÑËû´«¸øÎҵİü´ò¿ªÑо¿Á˰ëÌì·¢ÏÖ,Ò³Ãæ±àÂë´ÓGB2312±ä³ÉÁËUTF-8,ÆäËû¶¼Ã»ÓÐʲô¸Ä±ä.ÓÚÊÇ»¹Ô­ÎªGB2312,Ò³ÃæÕý³£.ÔÙ½«ÍⲿCSS¸´ÖƵ½Ò³ÃæÄÚ²¿,ͬÑùÕý³£.Ñо¿Ðí¾ÃÕÒ²»µ½ÎÊÌâËùÔÚ,ºöÈ»·¢ÏÖCSSÀïÃæÓжÎ× ......

ÓÃDIV+CSS²¼¾ÖÖÐ,ÈçºÎÉèÖÃͼƬÓëÎÄ×ÖÔÚͬһ¸ß¶È?


Èç¹û°ÑÎÄ×ÖºÍͼƬ·ÅÔÚͬһ¸öͼ²ãµÄ£¬ÎÄ×Ö¿ÉÒÔ×öµ½¾ÓÖУ¬µ«ÊÇͼƬ¾Í²»ÄÜ£¬ÒòΪͼƬĬÈÏÊÇ×óÉÏ¶ÔÆëµÄ£¡Õâ¾ÍÊÇΪʲôÔÚÖÆ×÷µÄʱºò¿´µ½Í¼Æ¬
»á¿¿ÉϵÄÔ­Òò¡£Èç¹ûÄãÁͼƬ¾ÓÖÐÁË£¬ÎÄ×־ͻáÏà¶ÔÓÚͼƬÓÒÏÂ¶ÔÆëÁË£¡Èç¹ûÄãÏë2¸ö¶¼¾ÓÖеϰ£¬¾Í²»ÄܰÑËûÃÇ·ÅÔÚͬһ¸ödiv,»òÕßÄãÊÔÏÂ
°ÑËûÃÇ·ÅÔÚ2¸ödivÖУ¬»òÕßÒ»¸öͼƬ·ÅdivÖУ¬ÎÄ ......

CSDNÖÐ×Ô¶¨ÒåcssµÄʹÓÃ

¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_content¡£
ËùÒÔ£¬¶¨ÒåËüÃǵÄÖ÷ÌåÑùʽ¿ÉÒÔÕâÑù:
#csdnblog_header
{
    //Í·²¿µÄ·ç¸ñ
}
# ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ