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=
Ïà¹ØÎĵµ£º
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ÑùʽµÄÊéд
//ÔªËØID
#tb1{width:100%;height:80px;background-color:#FFD700;padding:4px;font-family:verdana,tahoma;font-weight:bold;}
#tb2{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px
0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
//Àà
.test{cursor:hand;
&nb ......
ÔÚ½øÐÐdiv+cssÍøÒ³²¼¾ÖµÄʱºò£¬²»¿É±ÜÃâµÄÐèÒª²åÈëÒ»¶¨µÄ±íµ¥ÔªËØ£¬inputÊÇÆäÖÐ×î³£¼ûµÄÒ»ÖÖ¡£ÎÒÃÇÔÚ²¼¾ÖÖУ¬³£»áÓöµ½Îı¾ÊäÈë¿òÓëͬ´¦Ò»ÐеÄÎı¾²»¶ÔÆëµÄÎÊÌâ¡£Õâ¸öÎÊÌâÉèÖÃinputµÄvertical-align:middleÊôÐÔÀ´½â¾ö¡£
ÎÒÃÇÀ´¿´ÏÂÃæµÄÀý×Ó£¬ÈçºÎ½â¾öÎı¾ÊäÈë¿òÓëÎı¾¶ÔÆëµÄÎÊÌ⣡
<!DOCTYPE html PUBLIC "-//W3C//DTD ......
×î½üÔÚÍøÉÏÕÒµ½Á˼¸¿îCSSÔÚÏßÓÅ»¯Æ÷£¬×Ô¼ºÊÔÁËÊÔ£¬·ÅÉÏÀ´¸ú´ó¼Ò·ÖÏíһϡ£
1. Online CSS Optimizer /ÔÚÏßCSSÓÅ»¯
¸ÃÔÚÏß¹¤¾ßÓÃÓÚ¾«¼òºÍѹËõÑùʽ±íµÄÎļþ´óС£¬ÓÅ»¯ºóµÄ´úÂ뽫ÍêÈ«ÊÇ»ìÂҵģ¬Ö§³ÖÊäÈëURL£¬Ìá½»ÎļþºÍÖ±½ÓÊäÈë½øÐÐѹËõ¡£
2. CSS Compressor/CSSѹËõ
×÷ÓÃͬÉÏ£¬µ«Õâ¸ö¹¤¾ßÓµÓзdz£ÏêϸµÄѹËõÑ¡ÏËü°üº¬» ......