w3pop.com :: ÍøÂçѧԺ :: WEBÉè¼Æ×ÛºÏ :: XhtmlµÚ11Ìì:ÈçºÎÖÆ×÷²»Óñí¸ñµÄ²Ëµ¥
XhtmlµÚ11Ìì:ÈçºÎÖÆ×÷²»Óñí¸ñµÄ²Ëµ¥
::
²¼¾Ö³õ²½´î½¨ÆðÀ´£¬ÎÒ¿ªÊ¼Ìî³äÀïÃæµÄÄÚÈÝ¡£Ê×ÏÈÊǶ¨ÒålogoͼƬ£º
Ñùʽ±í£º#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
Ò³Ãæ´úÂ룺<div id="logo"><a title="ÍøÒ³Éè¼ÆÊ¦" href="http://www.w3cn.org/" ><img height="80" alt="Á´½Óµ½w3cn.orgÊ×Ò³" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>
ÒÔÉÏ´úÂëÏÖÔÚÓ¦¸ÃÈÝÒ×Àí½â¡£ÏÈÔÚCSS¶¨ÒåÁËÒ»¸ölogoµÄ²ã£¬È»ºóÔÚÒ³ÃæÖе÷ÓÃËü¡£ÐèҪ˵Ã÷µÄÊÇ£¬ÎªÁËÊ¹ÍøÒ³ÓиüºÃµÄÒ×ÓÃÐÔ£¬web±ê×¼ÒªÇó´ó¼Ò¸øËùÓеġ¢ÊôÓÚÕýʽÄÚÈݵÄͼƬ£¬¼ÓÒ»¸öaltÊôÐÔ¡£Õâ¸öaltÊôÐÔÊÇÓÃÀ´ËµÃ÷ͼƬµÄ×÷ÓÃ(µ±Í¼Æ¬²»ÄÜÏÔʾµÄʱºò¾ÍÏÔÊ¾Ìæ»»ÎÄ×Ö)£¬ËùÒÔ²»ÒªÖ»Ð´³ÉÎÞÒâÒåµÄͼƬÃû³Æ¡£
½ÓÏÂÀ´ÊǶ¨Òå²Ëµ¥¡£
ÎÒÃÇÏÈÀ´¿´²Ëµ¥µÄ×îÖÕЧ¹û£º
ͨ³£·½·¨ÎÒÃÇÖÁÉÙǶÌ×2²ã±í¸ñÀ´ÊµÏÖÕâÑùµÄ²Ëµ¥£¬¼ä¸ôÏß²ÉÓÃÔÚtdÖÐÉèÖñ³¾°É«²¢²åÈë1px¸ßµÄ͸Ã÷GIFͼƬʵÏÖ£»±³¾°É«µÄ½»ÌæÐ§¹û²ÉÓÃtdµÄonmouseoverʼþʵÏÖ¡£µ«²é¿´±¾²Ëµ¥µÄÒ³Ãæ´úÂ룬Äã»á¿´µ½Ö»ÓÐÈçϼ¸¾ä£º
<div id="menu">
<ul>
<li><a title="ÍøÕ¾±ê×¼" href="http://www.w3cn.org/webstandards.html">ʲôÊÇÍøÕ¾±ê×¼</a></li>
<li><a title="±ê×¼µÄºÃ´¦" href="http://www.w3cn.org/benefits.html">ʹÓñê×¼µÄºÃ´¦</a></li>
<li><a title="ÔõÑù¹ý¶É" href="http://www.w3cn.org/howto.html">ÔõÑù¹ý¶É</a></li>
<li><a title="Ïà¹Ø½Ì³Ì" href="http://www.w3cn.org/tutorial.html">Ïà¹Ø½Ì³Ì</a></li>
<li><a title="¹¤¾ß" href="http://www.w3cn.org/tools.html">¹¤¾ß</a></li>
<li><a title="×ÊÔ´¼°Á´½Ó" href="http://www.w3cn.org/resources.html">×ÊÔ´¼°Á´½Ó</a></li>
</ul>
</div>
ûÓÐÓÃÈκÎtable,¶øÓõÄÊÇÎÞÐòÁÐ<li>£¬Õû¸ö²Ëµ¥µÄЧ¹ûʵÏÖµÄÃØÃÜÍêÈ«ÔÚÓÚid="menu"£¬ÎÒÃÇÔÙÀ´¿´CSSÖйØÓÚmenuµÄ¶¨Ò壺
(1)Ê×Ïȶ¨ÒåÁËmenu²ãµÄÖ÷ÒªÑùʽ:
#menu {
MARGIN: 15px 20px 0px 15px; /*¶¨Òå²ãµÄÍâ±ß¿ò¾àÀë*/
PADDING:15px; /*¶¨Òå²ãµÄÄڱ߿òΪ15px*/
BACKGROUND: #dfdfdf; /*¶¨Òå±³¾°ÑÕÉ«*/
COLOR: #666; /*¶¨Òå×ÖÌåÑÕÉ«*/
BORDER:#fff 2px solid; /*¶¨Òå±ß¿òΪ2px°×É«ÏßÌõ*/
WIDTH:160px; /*¶¨ÒåÄÚÈݵĿí¶ÈΪ160px*/
}
(2)Æä´Î¶¨ÒåÎÞÐòÁбíµÄÑùʽ£º
#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*²»ÏÔʾ±ß¿ò*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}
#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
˵Ã÷£ºÕâÀïÓõÄÊÇidÑ¡ÔñÆ÷µÄÅÉÉú·½·¨¶¨Òå(²Î¿¼µÚ7Ì죺CSSÈëÃŵĽéÉÜ)ÁËÔÚmenu²ãÖеÄ×ÓÔªËØ<ul>ºÍ<li>µÄÑùʽ¡£LIST-STYLE-TYPE: noneÒ»¾ä±íʾ²»²ÉÓÃÎÞÐòÁбíµÄĬÈÏÑùʽ£¬¼´£º²»ÏÔʾСԲµã£¨ÎÒÃǺóÃæÓÃ×Ô¼ºµÄͼ±êÀ´´úÌæÐ¡Ô²µã£©¡£BORDER-TOP: #FFF 1px solid;Ôò¶¨ÒåÁ˲˵¥Ö®¼äµÄ1px¼ä¸ôÏß¡£
(3)¶¨ÒåonmouseoverЧ¹û
#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
½âÊÍÈçÏ£º
ok£¬²»Óñí¸ñµÄ²Ëµ¥¾ÍÕâÑùʵÏÖÁË¡£´ó¼Ò¿ÉÒÔÃ÷ÏԸоõµ½£¬ÔÀ´Ð´ÔÚHTMLÀïµÄ±íÏÖÑùʽȫ²¿°þÀë·Åµ½CSSÎļþÀïÈ¥ÁË¡£Ò³Ãæ´úÂë½ÚÔ¼ÁË´ó°ë¡£Í¨¹ýCSSÒªÐ޸IJ˵¥Ñùʽ¾ÍºÜ¼òµ¥ÁË¡£
ÉÏÃæÊÇ×ÝÏòµÄ²Ëµ¥,Èç¹ûÒªÏÔʾºáÏò²Ëµ¥£¬ÓÃliÒ²¿ÉÒÔÂ𣿵±È»ÊÇ¿ÉÒԵģ¬ÏÂÃæ¸ø³ö´úÂ룬Ч¹û¾ÍÔÚ±¾Ò³¶¥²¿:
Ò³Ãæ´úÂë
<div id="submenu">
<ul>
<li id="one"><a title="Ê×Ò³" href="http://www.w3cn.org/">Home</a></li>
<li id="two"><a title="¹ØÓÚÎÒÃÇ" href="http://www.w3cn.org/aboutus.html">¹ØÓÚÎÒÃÇ</a></li>
<li id="three"><a title="ÍøÕ¾±ê×¼" href="http://www.w3cn.org/webstandards.html">ÍøÕ¾±ê×¼</a></li>
<li id="four"><a title="±ê×¼µÄºÃ´¦" href="http://www.w3cn.org/benefits.html">±ê×¼µÄºÃ´¦</a></li>
<li id="five"><a title="ÔõÑù¹ý¶É" href="http://www.w3cn.org/howto.html">ÔõÑù¹ý¶É</a></li>
<li id="six"><a title="Ïà¹Ø½Ì³Ì" href="http://www.w3cn.org/tutorial.html">Ïà¹Ø½Ì³Ì</a></li>
<li id="seven"><a title="¹¤¾ß" href="http://www.w3cn.org/tools.html">¹¤¾ß</a></li>
<li id="eight"><a title="×ÊÔ´¼°Á´½Ó" href="http://www.w3cn.org/resources.html">×ÊÔ´¼°Á´½Ó</a></li>
<li id="nine"><a title="³£¼ûÎÊÌâ" href="http://www.w3cn.org/faq.html">³£¼ûÎÊÌâ</a></li>
</ul>
</div>
Ñùʽ±í´úÂë
#submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
HEIGHT:25px; }
#submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}
#submenu li a {
DISPLAY: block;
PADDING:2px 3px 2px 3px;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}
ÒÔÉÏ´úÂë²»ÖðÒ»·ÖÎöÁË¡£ºáÏò²Ëµ¥µÄ¹Ø¼üÔÚÓÚ£º¶¨Òå<li>ÑùʽʱµÄ"FLOAT: left;"Óï¾ä¡£ÁíÍâ×¢ÒâUL¶¨ÒåÖеÄDISPLAY:inline;Ò»¾ä±íʾ½«liÇ¿ÖÆ×÷ΪÄÚÁª¶ÔÏó³ÊµÝ£¬´Ó¶ÔÏóÖÐɾ³ýÐУ¬Í¨Ë×½²¾ÍÊÇli²»»»ÐС£ÊµÏÖºáÏòÅÅÁС£ÄãÒ²¿ÉÒÔÏóÀý×ÓÖж¨Òåÿ¸ö×Ӳ˵¥µÄ¿í¶È£¬¿ØÖƲ˵¥µÄ¼ä¸ô¡£ºÃÁË£¬ÄãÒ²¿ÉÒÔ¶¯ÊÖÊÔÊÔ£¬ÓÃliʵÏÖ¸÷ÖÖ¸÷ÑùµÄ²Ëµ¥Ñùʽ¡£
Tips:Èç¹ûÄã×Ӳ˵¥µÄ¿í¶È×ܺʹóÓÚ²ãµÄ¿í¶È£¬²Ëµ¥»á×Ô¶¯ÕÛÐУ¬ÀûÓÃÕâ¸öÔÀí¿ÉÒÔʵÏÖµ¥¸öÎÞÐòÁбíµÄ2ÁлòÕß3ÁÐÅŰ棬ÕâÊÇÔÀ´HTMLºÜÄÑʵÏֵġ£
¸ÐлzhuweiweiÖ¸³öºáÏò²Ëµ¥µÄbug£¬±¾ÎÄ7ÔÂ6ÈÕÐÞÕý¡£
<<<ÉÏÒ»½Ú µÚ10Ìì:×ÔÊÊÓ¦¸ß¶È ÏÂÒ»½ÚµÚ12Ìì:УÑé¼°³£¼û´íÎó >>>
ÆÀÂÛ (0)
All