Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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 ......

ȫվµÄËùÓÐ×ÊԴͨÓÃÒ»¸öcss Ñùʽ ±ß¿ò´óС cssʹÓÃjs

* {
 margin:0;
 padding:0;
 font-size:13px;
 *font-size:11px;
 font-family:Verdana, Arial, ËÎÌå,Helvetica, sans-serif;
 /*scrollbar-face-color:#dff9fe;
 scrollbar-highlight-color:#FFFFFF;
 scrollbar-3dlight-color:#9adae7;
 scrollbar-darkshadow-co ......

17+ cssÖÆ×÷Êý¾ÝչʾЧ¹û

ÒÔÏÂÊÕ¼¯·ÖÏíµÄÊý¾Ýͼ±íµÄչʾЧ¹û£¬ÊÇÍêÈ«ÓÃhtmlºÍcssÀ´ÊµÏֵġ£Í¨¹ý×ÐϸÑо¿Ñ§Ï°ÕâЩ°¸Àý¶ÔÓÚÎÒÃÇѧϰcss»áÓкܴó°ïÖúµÄ¡£
1¡¢ÍêȫʹÓÃdiv¡¢spanºÍcssÖÆ×÷µÄÊý¾Ýͼ±í¡£
2¡¢ÓкܶàÓô¿cssÖÆ×÷µÄÊý¾Ýͼ±í£¬ÎҸоõÕâ¸öÊÇ×öµÄ×îÆ¯ÁÁµÄÒ»¸ö¡£
3¡¢Õâ¸öÏßÐÎÊý¾Ýͼ±íÍêÈ«»ùÓÚhtmlºÍcssÖÆ×÷µÄ£¬Ã»ÓÐÓ¦ÓÃjs¡£ÕâÑùµÄͼͼ±í¼ÓÔØ¿ì£ ......

cssÀý×Ó

/*
*´´½¨ÈË£ºÝþÒËÖÒ
*ÓÃ;£ºÑ§Ï°css£¬Ó¦ÓÃÓÚÐÂÎÅϵͳ
*/
*
{
    /*°ÑĬÈÏÖµÉèÖÃΪ0*/
    margin: 0;
    padding: 0;
    border-width: 0;
}
body
{
    font-size: 14px;
}
a:link£¬a:visited
{
    /*Êó ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ