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; /* ÉèÖÃÎÄ×Ö
Ïà¹ØÎĵµ£º
¡¡¡¡ÄÚÈÝ£ºcontentcontainer µ¼º½£ºnav ²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn ±êÖ¾£ºlogo Ò³ÃæÖ÷Ì壺main
¡¡¡¡¹ã¸æ£ºbanner Èȵ㣺hot ÐÂÎÅ£ºnews
¡¡¡¡ÏÂÔØ£ºdownload ×Óµ¼º½£ºsubnav ²Ëµ¥£ºmenu
¡¡¡¡ËÑË÷£ºsearch Ò³½Å£ºfooter ¹ö¶¯£ºscroll
¡¡¡¡°æÈ¨£ºcopyright ÓÑÇéÁ´½Ó£ºfriendlink ×Ӳ˵¥£ºsubmenu
¡¡¡¡ÄÚÈÝ£ºcontent ......
Ò»¡¢ÐǺÅ*
Ó¦¸ÃÊǸöͨÅä·û¡£±ÈÈç
<style type="text/css">
.roundBorder *
{
background: white;
display: block;
height: 1px;
overflow: hidden;
}
</style>
……
<b class="roundBorder">
<b class="round ......
IE6ÖÐCSSÎÞЧÎÊÌâ
ͬÊ·´À¡ÎÒÒ»¸öÒ³ÃæÔÚIE7ºÍFirefox϶¼Õý³£,µ«ÊÇÔÚIE6ÖÐÎÞÑùʽ.µ«ÊÇÒ³ÃæÎÒ×ö¸øËûÃǵÄʱºòÒ»Çж¼ÊÇÕý³£µÄ.°ÑËû´«¸øÎҵİü´ò¿ªÑо¿Á˰ëÌì·¢ÏÖ,Ò³Ãæ±àÂë´ÓGB2312±ä³ÉÁËUTF-8,ÆäËû¶¼Ã»ÓÐʲô¸Ä±ä.ÓÚÊÇ»¹ÔΪGB2312,Ò³ÃæÕý³£.ÔÙ½«ÍⲿCSS¸´ÖƵ½Ò³ÃæÄÚ²¿,ͬÑùÕý³£.Ñо¿Ðí¾ÃÕÒ²»µ½ÎÊÌâËùÔÚ,ºöÈ»·¢ÏÖCSSÀïÃæÓжÎ× ......
Èç¹û°ÑÎÄ×ÖºÍͼƬ·ÅÔÚͬһ¸öͼ²ãµÄ£¬ÎÄ×Ö¿ÉÒÔ×öµ½¾ÓÖУ¬µ«ÊÇͼƬ¾Í²»ÄÜ£¬ÒòΪͼƬĬÈÏÊÇ×óÉÏ¶ÔÆëµÄ£¡Õâ¾ÍÊÇΪʲôÔÚÖÆ×÷µÄʱºò¿´µ½Í¼Æ¬
»á¿¿ÉϵÄÔÒò¡£Èç¹ûÄãÁͼƬ¾ÓÖÐÁË£¬ÎÄ×־ͻáÏà¶ÔÓÚͼƬÓÒÏÂ¶ÔÆëÁË£¡Èç¹ûÄãÏë2¸ö¶¼¾ÓÖеϰ£¬¾Í²»ÄܰÑËûÃÇ·ÅÔÚͬһ¸ödiv,»òÕßÄãÊÔÏÂ
°ÑËûÃÇ·ÅÔÚ2¸ödivÖУ¬»òÕßÒ»¸öͼƬ·ÅdivÖУ¬ÎÄ ......
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_content¡£
ËùÒÔ£¬¶¨ÒåËüÃǵÄÖ÷ÌåÑùʽ¿ÉÒÔÕâÑù:
#csdnblog_header
{
//Í·²¿µÄ·ç¸ñ
}
# ......