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

CSS²ãµþ¼ÓµÄÔ­Ôò

¾²Ì¬¶¨Î»£ºposition:static£¨ÎªpositionÊôÐÔµÄĬÈÏÖµ£©¡£    
¶¯Ì¬¶¨Î»£ºposition:relative»òposition:absolute»òposition:fixed¡£    
×æÔªËØ£ºÈÎÒâ°üº¬¸ÃÔªËØµÄÔªËØ¡£     ¸¸ÔªËØ£ºÖ±½Ó°üº¬¸ÃÔªËØµÄ×æÔªËØ¡£     ͬ±²ÔªËØ£ºÓµÓй²Í¬µÄ¸¸ÔªËصÄÔªËØ¡£
×¢£ºÕâЩ¸Å
ÄîΪ×÷Õß×Ô¶¨Ò壬½öÓÃÓÚ±¾ÎÄ¡£
ÒýÓÃ:
¹ØÓÚͬ±²ÔªËØÊǸö·Ç³£¹Ø¼üµÄ´Ê£¬ÕâÀﻹÐèÒªÏêϸ½âÊÍ
һϡ£
    <div>
        <div></div>
       
<div id="a"></div>
        <div></div>
   
    <div></div>
        <div></div>
   
    <div></div>
    </div>
    <div
id="f">
        <div></div>
        <div
id="b"></div>
        <div id="c"></div>
   
    <div></div>
        <div></div>
   
    <div></div>
    </div>
ÔÚÕâ¸öÀý×ÓÖУ¬div#aÓë
div#b²¢²»ÊǓͬ±²ÔªËØ”£¬Ö»ÓÐÏñdiv#bºÍdiv#cÕâÑùÓµÓÐͬÑù¸¸Ìådiv#fµÄµÄÔªËØ²ÅÄܽГͬ±²ÔªËØ”¡£
ÒýÓýáÊø
½Ó
ÏÂÀ´¿´¿´ÕâÎåÌõ·¨Ôò
£º
·¨ÔòÒ»
£ºÍ¬±²ÔªËض¨Î»·½Ê½Ïàͬ£¬ÇÒÎÞz-indexÉèÖÃ
ʱ£¬html¿¿ºóÕß¾ÓÉÏ¡£
·¨
Ôò¶þ
£ºÍ¬±²ÔªËØÍ¬Îª¶¯Ì¬¶¨Î»Ê±£¬ÇÒÓÐz-indexÉèÖÃʱ£¬z-indexÖµ´óÕß¾ÓÉÏ¡£
 
 Ã͵ãÕâÀï²âÊÔ
·¨ÔòÈý
£ºÍ¬±²ÔªËض¨Î»·½Ê½²»Í¬Ê±£¬¶¯Ì¬¶¨Î»¾ÓÉÏ¡£
Ã͵ãÕâÀï²âÊÔ
·¨ÔòËÄ
£º·Çͬ±²ÔªËØ£¬ÈÎÒâÒ»Õß¼°Æä×æÔªËØ²»¾ß±¸¶¯Ì¬²¼¾Öʱ£¬html¿¿ºóÕß¾ÓÉÏ¡£
 
Ã͵ãÕâÀï²âÊÔ
·¨
ÔòÎå
£º¡¾ÖØÒª¡¿·Çͬ±²ÔªËØ£¬ÈÎÒâÒ»Õß»òÆä×æÔªËØÓµÓж¯Ì¬¶¨Î»Ê±£¬Í¬Ê±¸÷×ÔÏòÉÏѰÕÒ¶¯Ì¬¶¨Î»µÄ×æÔªËØ£¬²¢·Ö±ð´ÓÖÐÄóö¾ß±¸×î¸ß¼¶±ðµÄ×æÔª
ËØ£¨»òÆä±¾Éí£©½øÐбȽϡ£ 
    <div id="ab" style=


Ïà¹ØÎĵµ£º

´¿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=gb2312" />
<title>CSS½¥±äÌõ</ ......

DIV+CSSÖ®float

test.html£º
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id=&qu ......

CSSÔÚÏßÓÅ»¯

×î½üÔÚÍøÉÏÕÒµ½Á˼¸¿îCSSÔÚÏßÓÅ»¯Æ÷£¬×Ô¼ºÊÔÁËÊÔ£¬·ÅÉÏÀ´¸ú´ó¼Ò·ÖÏíһϡ£
1. Online CSS Optimizer /ÔÚÏßCSSÓÅ»¯
¸ÃÔÚÏß¹¤¾ßÓÃÓÚ¾«¼òºÍѹËõÑùʽ±íµÄÎļþ´óС£¬ÓÅ»¯ºóµÄ´úÂ뽫ÍêÈ«ÊÇ»ìÂҵģ¬Ö§³ÖÊäÈëURL£¬Ìá½»ÎļþºÍÖ±½ÓÊäÈë½øÐÐѹËõ¡£
2. CSS Compressor/CSSѹËõ
×÷ÓÃͬÉÏ£¬µ«Õâ¸ö¹¤¾ßÓµÓзdz£ÏêϸµÄѹËõÑ¡ÏËü°üº¬» ......

È«Ãæ¼æÈÝIE6/IE7/IE8/FFµÄCSS HACKд·¨

margin-bottom:40px;       /*ffµÄÊôÐÔ*/
margin-bottom:140px\9;    /* IE6/7/8µÄÊôÐÔ */
color:red\0;              /* IE8Ö§³Ö */
*margin-bottom:450px;     /*IE6/7µÄÊôÐÔ*/ ......

CSSÒ³Ãæ²»¼æÈÝÎÊÌâ

¹ØÓÚCSS¶Ô¸÷¸öä¯ÀÀÆ÷¼æÈÝÒѾ­ÊÇÀÏÉú³£Ì¸µÄÎÊÌâÁË, ÍøÂçÉÏµÄ½Ì³Ì±éµØ¶¼ÊÇ.ÒÔÏÂÄÚÈÝûÓÐÌ«¶àÐÂÓ±, ´¿Êô¸öÈË×ܽá, Ï£ÍûÄܶԳõѧÕßÓÐÒ»¶¨µÄ°ïÖú.
Ò»¡¢CSS HACK
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓÐHACK.
1, !important
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄHACK.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáǰ.)
< ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ