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

css£º¸¡¶¯µÄÀí½â¡£

cssĬÈϵIJ¼¾ÖÊǽ«ÔªËØÒ»¸öÒ»¸öµØÍùÏÂÅÅÁÐÏÂÀ´£¬Èç¹û²»²ÉÈ¡¸¡¶¯£¬½«µ¼ÖÂÒ³Ãæ·Ç³£³¤¡£
ÏÂÃæÎÒÃÇͨ¹ý×öÒ»¸ö³£¼ûµÄÍøÕ¾²¼¾Ö£¬À´ËµÃ÷¸¡¶¯ÊÇÔõôһ»ØÊ¡£
Ï£ÍûµÄЧ¹ûÊÇ:
²½ÖèÒ»¡¢ÏȰѴúÂëдһÏ£¬
Àý£º
htmlÄÚÈÝ£º
 <body >

<div id="head">
head
</div>
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
footer
</div>
<p>Òª¶àд¼¸ÐÐ×Ö</p>
</body >
cssÄÚÈÝ£º
 body
{
margin:0;
border:0;
}
#head
{
width: 300px;
height:50px;
margin:10;
border:1px solid #000;
background: #0aa;
}
#content
{
width: 200px;
height:80px;
margin:10;
border:1px solid #000;
background: #aa0;
}
#sidebar
{
width: 100px;
height:80px;
margin:10;
border:1px solid #000;
background: #afa;
}
#footer
{
width: 300px;
height:50px;
margin:10;
border:1px solid #000;
background: #0aa;
}
Ч¹ûÈçÏ£º
 
²½Öè¶þ¡¢ 
Õâ²»ÊÇÎÒÃÇÏëÒªµÄЧ¹û£¬ÎÒÃÇÏë°Ñsiderbar¿éÒÆµ½content¿éµÄÓұߡ£sidebar¸Ä³ÉÈçÏÂÄÚÈÝ£º
 #sidebar
    {
    float: right;
    width: 100px;
    height:80px;
    margin:10;
    border:1px solid #000;
    background: #afa;
    }
 µÃµ½µÄЧ¹ûÊÇ£º
»òÕßÊÇ£¨¸Ä±ää¯ÀÀÆ÷µÄ´óС£¬sidebarλÖûáÓб仯£©£º
ΪʲôsidebarÉèÁ˸¡¶¯£¬µ«Ã»ÓзÅÔÚcontentµÄÅԱߣ¿
½²½â£º
1¡¢ÒòÎªÔªËØÊǰ´ÏßÐÔÅÅÁеģ¬sidebarÔÚÎÒÃǵÄhtmlÎļþÖÐÊǵÚÈý¸öÔªËØ£¬°ÑËüÉè³É¸¡¶¯ºó£¬ËûÒ²Ö»ÔÚµÚÈý¸öÔªËØÔ­À´Ó¦¸ÃÔÚµÄλÖô¦×óÓÒ¸¡¶¯£¬¶ø²»»áÅܵ½ÆäËûÔªËØµÄλÖø¡¶¯¡£
2¡¢¸¡¶¯ÔªËغóµÄÔªËØ£¨footerºÍ<p>£©£¬Èç¹û¸¡¶¯ÔªËذ´ÏßÐÔÅÅÁÐËùÔÚµÄλÖã¬ÄÜÈÝÏÂfooterºÍ<p>£¬ÔòÕâÐ©ÔªËØ¸úÉÏÀ´£¬
3¡¢·ñÔò£¬¾Í²»¸úÉÏÀ´£¬Ò²¾ÍÊÇÕÒ¸öÄÜÈݵÄÏÂËûÃǵĿյأ¬Ò²¾ÍÊÇ»¹ÔÚĬÈϵÄ×ÔÈ»Á÷ÖеÄλÖá£
ÊéÉϽ²£¬¸¡¶¯ÊÇÔªËØ´ÓÔªËØ×ÔÈ»Á÷ÖгéÀë³öÀ´£¬¸¡¶¯ÔªËØÖ®ºóµÄÔªËØ£¬»·ÈÆÔÚ¸¡¶¯ÔªËصÄÖÜΧ£¬Õâ¾ä»°µÄº¬ÒåÈçÉÏ


Ïà¹ØÎĵµ£º

cssÓëjsÊôÐÔ¶ÔÕÕ±í


ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£©
JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......

CSS RESET

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-family:'ËÎÌå';}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,a,span {overflow:hidden;}
table{border-collapse:collapse;border-spacing:0; font-size:12px;}
td { line-height:18px ......

html css ±í¸ñ±ß¿ò

<html>
<head>
<mce:style type = "text/css"><!--
table
{
border-collapse:collapse;
}
td
{
border:solid 1px black;
}

--></mce:style><style type = "text/css" mce_bogus="1">table
{
border-collapse:collapse;
}
td
......

Css ÈëÃÅѧϰ cssÏÂÀ­²Ëµ¥ÖÆ×÷

×¢ÒâÊÂÏ
             ÁËʵÏÖµ¼º½ÖеÄ×Óµ¼º½ÓëÖ÷µ¼º½ÔÚʵÏÖÊó±ê½»»¥µÄͬʱ£¬±£³ÖÆäÏà¶ÔλÖÃÒ»Ö£¬ÎÒÃÇʹÓÃÁ˶Ôul li{}ʹÓÃÁËposition:relative;ʹÆä¶¨Î»·½Ê½×ªÎªÏà¶Ô¶¨Î»¡£¶ø¶Ôli ul{}¼´×Óµ¼º½²ÉÓÃÁËposition:absolute;Ïà¶ÔÓÚµ¼º½µÄ¾ø¶Ô¶¨Î»·½Ê½£¬ÁËÆäÊó± ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ