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;} /*ÉèÖþø¶Ô¶¨Î»ºó
Ïà¹ØÎĵµ£º
ÈËÒ»µ©Ï°¹ßÁËijЩ¶«Î÷¾ÍºÜÄÑÈ¥¸Ä£¬ÒÔ¼°¸÷ÖÖ¸÷ÑùµÄÔÒò£¬ÐµÄä¯ÀÀÆ÷Ô½À´Ô½¶à£¬¶øÀϵÄ×ÜÌÔ̲»ÁË¡£Ôö³¤×ÜÊÇ¿ìÓÚÏûÍöµ¼ÖÂÁËä¯ÀÀÆ÷¼æÈÝÊdzÉÁË̸²»ÍêµÄ»°Ì⡣˵µ½ä¯ÀÀÆ÷¼æÈÝ£¬CSS HACK×ÔÈ»¶øÈ»µØ±»ÎÒÃÇÏëÆð¡£½ñÌ죬ÎÒÃÇͨ³£¶¼ÓÐÒ»¸öÍŶӻòÕß½«ÓÐÒ»¸öÍŶӵÄÈËÔÚÒ»¸ö¹«Ë¾ÀïÃæ×öÏàͬµÄÊ£¬ÐèÒªÎÒÃÇÓÐͳһµÄ¹æ·¶À´½øÐÐCoding£¬ÒÔ·½ ......
1 Õë¶Ôfirefox ie6 ie7µÄcssÑùʽ
ÏÖÔڴ󲿷ֶ¼ÊÇÓÃ!importantÀ´hack£¬¶ÔÓÚie6ºÍfirefox²âÊÔ¿ÉÒÔÕý³£ÏÔʾ£¬
µ«ÊÇie7¶Ô!important¿ÉÒÔÕýÈ·½âÊÍ£¬»áµ¼ÖÂÒ³ÃæÃ»°´ÒªÇóÏÔʾ£¡ÕÒµ½Ò»¸öÕë
¶ÔIE7²»´íµÄhack·½Ê½¾ÍÊÇʹÓÓ*+html”£¬ÏÖÔÚÓÃIE7ä¯ÀÀһϣ¬Ó¦¸ÃûÓÐÎÊÌâÁË¡£
ÏÖÔÚдһ¸öCSS¿ÉÒÔÕâÑù£º
#1 { color: #33 ......
CSS ÃüÃû¹æ·¶
XHTML-CSSд×÷½¨Òé
ËùÓеÄxhtml´úÂëСд
ÊôÐÔµÄÖµÒ»¶¨ÒªÓÃË«ÒýºÅ("")À¨ÆðÀ´£¬ÇÒÒ»¶¨ÒªÓÐÖµ
ÿ¸ö±êÇ©¶¼ÒªÓпªÊ¼ºÍ½áÊø£¬ÇÒÒªÓÐÕýÈ·µÄ²ã´Î
¿ÕÔªËØÒªÓнáÊøµÄtag»òÓÚ¿ªÊ¼µÄtagºó¼ÓÉÏ"/"
±íÏÖÓë½á¹¹ÍêÈ«·ÖÀ룬´úÂëÖв»Éæ¼°ÈκεıíÏÖÔªËØ£¬Èçstyle¡¢font¡¢bgColor¡¢borderµÈ
<h1> ......
margin Íâ±ß¾à
border ±ß¿ò
padding Äڱ߾à
Ò²¾ÍÊÇ˵ ÉèÖÃmargin ÄÇôËûËùÕ¼¾ÝµÄ¿Õ°×µØ·½»áÊÇÔڱ߿òÍâÃæ
ÉèÖÃpadding ËûËùÕ¼¾ÝµÄ¿Õ°×µØ·½ÊÇÔڱ߿òÀïÃæ
¶øÇÒÔÚIE6 һϵİ汾ÖÐ ´æÔÚÕâpadding ¼ÆËã´íÎóµÄBUG
CSS µÄ¿í¶ÈÊôÐÔ±¾À´ÊDz»°üº¬paddingµÄ µ«ÊÇ ÔÚieÏÂÃæÓеÄʱºò¿í¶ÈÊǰüº¬padding ËùÒÔ ½¨ÒéÔÚ²»ÊìϤCSS ÔÚ¶¨Î» ......
1.»ù±¾Óï·¨£º
Ñ¡Ôñ·ûÃû×Ö { ÉùÃ÷; }
Ñ¡Ôñ·ûÃû×ÖÃüÃû¹æÔò£º
CSSÑ¡Ôñ·û¿ÉÒÔʹÓÃÓ¢ÎÄ×ÖĸµÄ´óдÓëСд,Êý×Ö,Á¬×ÖºÅ,Ï»®Ïß,ðºÅ,¾äºÅ.
2.·ÖÀࣺ
ÔÚAndy BuddµÄ¡¶CSS MASTERY¡·£¨ÖÐÒë¡¶¾«Í¨CSS¡·£©ÖУ¬½«CSSÑ¡Ôñ·û·ÖΪ£º³£ÓÃÑ¡Ôñ·û¡¢Í¨ÓÃÑ¡Ôñ·ûºÍ¸ß¼¶Ñ¡Ôñ·û¡£³£ÓÃÑ¡Ôñ·û°üÀ¨£ºÀàÐÍÑ¡Ôñ·û¡¢ÀàÑ¡Ôñ·û¡¢IDÑ¡Ôñ·û¡¢ºó´ ......