CSS ¾ø¶Ô¶¨Î»Ñ§Ï°
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/basic.css?ver=01" mce_href="css/basic.css?ver=01" rel="stylesheet" type="text/css" />
<mce:script type="text/javascript" src="js/util.js" mce_src="js/util.js"></mce:script>
</head>
<body>
<mce:style type="text/css"><!--
.r{position:relative;width:300px;height:300px;border:1px solid #ccc;}
.a{background-color:red;height:25px;} /*ÆÕͨdiv,°´ÎĵµÁ÷*/
.a1, .a2, .a3, .a4{position:absolute; width:100px;height:100px;} /*ÉèÖþø¶Ô¶¨Î»ºó£¬»áѰÕÒpositionÉèÖÃΪrelativeµÄ׿ÏÈÔªËØ£¬È»ºóÒÔËüΪ²ÎÕÕÎÉèÖÃÆ«ÒÆÎ»Ö㬴˴¦ÎªËûÃǵĸ¸ÔªËØclass=r¡£Èç¹ûÏòÉÏѰÕÒ׿ÏÈÔªËØ£¬Ã»ÓÐpositionÉèÖÃΪrelativeµÄÔªËØ£¬ÔòÒÔbodyÔªËØÎª²ÎÕÕÎï*/
.a1{left:10px;top:30px;background-color:yellow;z-index:1} /*Æ«ÒÆÎ»ÖÃ,×ó10px £¬ÉÏ30px z-indexΪzÖáµÄË÷Òý£¬¼´Èç¹ûλÖÃÖØµþ£¬Ôòz-indexÊýÁ¿Ô½´ó£¬ÔÚµÚÈýάλÖÃÔ½´ó*/
.a2{left:20px;top:40px;background-color:green;z-index:2}
.a3{left:30px;top:50px;background-color:blue;z-index:3}
.a4{right:-50px;bottom:-50px;background-color:purple;} /*ÉèΪ¾ø¶Ô¶¨Î»ºó£¬¿ÉÒÔ´¦ÒÔ׿ÏÈÔªËØÖ®Íâ*/
--></mce:style><style type="text/css" mce_bogus="1"> .r{position:relative;width:300px;height:300px;border:1px solid #ccc;}
.a{background-color:red;height:25px;} /*ÆÕͨdiv,°´ÎĵµÁ÷*/
.a1, .a2, .a3, .a4{position:absolute; width:100px;height:100px;} /*ÉèÖþø¶Ô¶¨Î»ºó
Ïà¹ØÎĵµ£º
Ê×ÏÈÒ»µãÐèÒªÖªµÀ£¬
ÿ¸öä¯ÀÀÆ÷¶¼ÓÐ×Ô¼ºÄ¬ÈϵÄĬÈÏÑùʽ£¬ÎªÁËÈÃÒ³ÃæÄÚÈÝÏÔʾÔÚä¯ÀÀÆ÷ÖÐËùÏ£ÍûµÄλÖ㬶ø²»ÊǼ̳ÐĬÈÏÑùʽ£¬¾ÍÐèÒªÔÚbodyÑ¡ÔñÆ÷ÖÐÖØÐÂÉ趨marginºÍpaddingµÄÊôÐÔÖµ¡£
ÈçÏÂËùʾ£º
body
{
margin:0;
border:0;
}
Æä´Î£¬Á·Ï°Ê±ÓÃÕâ¸öÀý×Ó£º
htmlÄÚÈÝ£º
<body >
&nbs ......
¶¨Î»Ò»Ö±ÊÇWEB±ê×¼Ó¦ÓÃÖеÄÄѵ㣬Èç¹ûÀí²»Çå³þ¶¨Î»ÄÇô¿ÉÄÜӦʵÏÖµÄЧ¹ûʵÏÖ²»ÁË£¬ÊµÏÖÁ˵ÄЧ¹û¿ÉÄÜ»á×ßÑù¡£Èç¹ûÀíÇåÁ˶¨Î»µÄÔÀí£¬ÄǶ¨Î»»áÈÃÍøÒ³ÊµÏֵĸü¼ÓÍêÃÀ¡£
¶¨Î»µÄ¶¨Ò壺
ÔÚCSSÖйØÓÚ¶¨Î»µÄÄÚÈÝÊÇ£ºposition:relative | absolute | static | fixed
static ûÓÐÌØ±ðµÄÉ趨£¬×ñÑ»ù±¾µÄ¶¨Î»¹æ¶¨£¬²»ÄÜͨ¹ýz-index½ ......
Ê×ÏȸÐл“Íè×Ó
”ÌṩµÄÕâ¸ö
IE8µÄcss hack£»
¹Ø×¢¹ýIE8µÄcss hackµÄÈËÏàÐÅ´ó¼Ò¶¼ÔÚʹÓÃÕâ¸öhack£¬¾ÍÊÇ“\9”µÄcss hack£º
.test{
color:#000000; /* FF,OPÖ§³Ö */
color:#0000FF\9;&n ......
²é¿´ÔÎÄ£ºhttp://www.csswang.com/css/110.html
µ¼º½½á¹¹ÔÚÍøÕ¾Éè¼ÆÖÐÊÇÆðµ½¾ö¶¨ÐÔ×÷Óõ쬵¼º½²Ëµ¥/À¸³£³£Í¨¹ýÑÕÉ«¡¢ÅŰ桢ÐÎ×´ºÍһЩͼƬÀ´°ïÖúÍøÕ¾´´Ôì¸üºÃµÄÊÓ¾õºÍ¸ÐÊÜ£¬ËüÊÇÍøÒ³Éè¼ÆµÄ¹Ø¼üÔªËØ¡£
¡¡¡¡ËäÈ»ÍøÕ¾µ¼º½²Ëµ¥µÄÍâ¹ÛÊÇÍøÒ³Éè¼ÆÖйØÏµµ½Õû¸öÉè¼Æ³É°ÜÓë·ñµÄ¹Ø¼ü£¬µ«ÊÓ¾õЧ¹ûÒ²²»ÄÜÓ°Ïìµ½ÍøÕ¾¿ÉÓÃÐÔ¡£×îÀíÏëµÄ ......
A
absolute ¾ø¶ÔµÄ   ......