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; /* ÉèÖÃÎÄ×Ö
Ïà¹ØÎĵµ£º
½ñÌìÅöµ½Ò»¸öÎÊÌ⣺ÔõÑù¸ù¾Ý±ê¼ÇµÃÊôÐÔ²»Í¬¶øÉèÖò»Í¬µÄÑùʽ£¿
Ê×ÏÈÏëµ½µÄ£º»ñÈ¡ËùÓбê¼Ç¡¢Æ¥ÅäÊôÐÔ¡¢¸Ä±äÑùʽ¡£¡£¡£
ºöÈ»ÓÖÏëÆðÁËJQueryÖеÄÑ¡ÔñÆ÷£¬ÓÚÊÇjs´úÂë±à³ÌÁËcss´úÂë
tag[attribute=value]{//.......}
css±¾ÉíµÄÑ¡ÔñÆ÷ȷʵ¿ÉÒÔ×öºÜ¶àÊÂÇéµÄ£¬¾ÍÓÖ´ÓÍøÉÏËÑÂÞÁËһЩ£¬±¸Íü¡£
CSSÑ¡ÔñÆ÷±Ê¼Ç
ÈîÒ»·å ÕûÀí
²Î¿¼Í ......
Ò»¡¢document.formName.item(“itemName”) ÎÊÌâ
ÎÊÌâ˵Ã÷£ºIEÏ£¬¿ÉÒÔʹÓà document.formName.item(“itemName”) »ò document.formName.elements ["elementName"]£»FirefoxÏ£¬Ö»ÄÜʹÓÃdocument.formName.elements["elementName"]¡£
½â¾ö·½·¨£ºÍ³Ò»Ê¹ÓÃdocument.formName.elements["elementName" ......
Õâ5¸öÓÐÓõÄcssÊôÐÔ¿ÉÄÜÄãÊDZȽÏÊìϤµÄ£¬µ«ÊǺÜÉÙʹÓõ½ËüÃÇ¡£ÎÒÕâÀïÌÖÂ۵IJ»ÊÇcss3µÄÐÂÊôÐÔ
¡£ÎÒÌáµ½µÄ¶¼ÊDZ»ËùÓÐä¯ÀÀÆ÷Ö§³ÖµÄcss2ÊôÐÔ±ÈÈ磺clip¡¢min-height¡¢white-space¡¢cursorºÍdisplay¡£Ç§Íò±ð´í
¹ýÕâÆªÎÄÕ£¬ÒòΪÄã»á¾ªÑȵķ¢ÏÖËûÃÇÊǺÜÓÐÓõġ£
Ò»¡¢css clip£¨²ÃÇУ©
clip²ÃÇÐÕâ¸öÊôÐÔÓеãÏñÊÇÕÚÕÖ¡£ËüÔÊÐíÄã ......
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_content¡£
ËùÒÔ£¬¶¨ÒåËüÃǵÄÖ÷ÌåÑùʽ¿ÉÒÔÕâÑù:
#csdnblog_header
{
//Í·²¿µÄ·ç¸ñ
}
# ......