锘??xml version="1.0" encoding="utf-8" standalone="yes"?> grid鍒犻櫎鏈鍚庝竴琛屾暟鎹悗錛宻tore reload ,鍥犱負鏁版嵁搴撲腑宸茬粡娌℃湁鏁版嵁浜嗭紝鎵浠ヨ繑鍥瀗ull . 浣嗘槸ext涓嶈榪欎釜涓滆タ錛屾墍浠ュ湪service涓繘琛屽垽鏂傚鏋滄暟鎹負null 錛屽垯榪斿洖 "{total:0,gridData:[]}" ; 閲嶆柊緙栬瘧錛岃繍琛屽悗錛屽垹闄ゆ渶鍚庝竴琛屾暟鎹紝灝變細鐪嬩笉鍒頒簡銆?/p>
]]>
鍘熸枃錛歨ttp://www.alistapart.com/articles/holygrail
榪欎釜緲昏瘧鐨勯〉闈㈢増鏉冨綊greengnn鎵鏈夛紝杞澆璇鋒敞鏄庡嚭澶?br>絎竴姝ワ細鍒涘緩涓涓粨鏋?br>
xhtml寮濮嬩簬header, footer, and container<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
CSS鍏堝畾涔塩ontainer錛岀粰灝嗚鍔犲叆鐨剆ideleft錛屽拰sideright鐣欎笅涓綅緗?br>#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
鎴戜滑鐨勫竷灞鐜板湪鐪嬭搗鏉ユ槸榪欐牱鐨?br>
鍥?鈥斺斿垱寤烘鏋?br>
絎簩姝ワ細澧炲姞鍐呭鍏冪礌
鍦ㄧ涓姝ュ熀紜涓婂鍔犲唴瀹瑰厓绱?code class=code><div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
鐒跺悗鍒嗗埆瀹氫箟widths鍜宖loat 璁╁厓绱犳帓鍒楀湪涓鏉$嚎涓婏紝榪樻湁娓呴櫎footer鐨勬誕鍔ㄥ榻?br>#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
榪欓噷緇檆enter鍏冪礌瀹氫箟浜?00% width錛岃瀹冨崰婊ontainer鐨勫彲鐢ㄧ┖闂達紝鐜板湪鐨勫竷灞鍙樻垚浜嗚繖鏍?br>
鍥?錛氬鍔犲唴瀹瑰厓绱?br>
絎笁姝ワ細鎶妉eft鏀懼埌姝g‘鐨勪綅緗?br>
瑕佹妸left鏀懼埌姝g‘鐨勪綅緗紝鎴戜滑鍒嗕袱姝?br>
1.璁﹍eft鍜宑enter鍦ㄥ悓涓姘村鉤綰?code class=code>#left {
width: 200px; /* LC width */
margin-left: -100%;
}
鐪嬬湅鏁堟灉
鍥?鈥斺攍eft縐誨姩瀹屾垚涓鍗?br>
2.鐢ㄧ浉瀵瑰畾浣嶏紝鎶妉eft緇х畫縐誨姩鍒版紜殑浣嶇疆#container .columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
}
涓婁竴姝ワ紝left榪橀渶瑕佸乏縐?00px錛屽氨鍙互浜嗭紝鎵浠ュ氨閲囩敤鐩稿瀹氫綅錛屽皢浠栧啀鍚戝乏鎺?00px,灝辮揪鍒頒簡鎯寵鐨勬晥鏋溿傝left璺濈浠栧彸杈瑰厓绱燾enter 200px鍚庯紝琛屼簡錛宭eft緇堜簬鍒拌嚜宸變綅緗笂浜嗐?br>
鍥?鈥斺攍eft鍒頒簡鑷繁鐨勪綅緗?br>
絎洓姝ワ細璁﹔ight涔熷埌鑷繁鐨勬紜殑浣嶇疆涓?br>
浠庝笂鍥劇湅錛屾垜浠彧闇瑕佹妸right鎺ㄥ抍ontainer鐨刾adding-right閲岄潰,鐪嬬湅鎬庝箞鍋?br>#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
濂戒簡錛岀幇鍦ㄥ厓绱犱滑閮芥紜綊浣嶄簡銆?br>
鍥?鈥斺攔ight鍒頒簡鑷繁姝g‘鐨勪綅緗?br>
絎簲姝ワ細瑙e喅bug璁╁竷灞鏇村畬緹?br>濡傛灉嫻忚鍣ㄧ被鍨嬪彉鏇達紝center灝卞彉寰楁瘮left灝忎簡錛屽畬緹庣殑甯冨眬灝辮鎵撶牬錛屾垜浠粰body 璁劇疆涓涓猰in-width
鏉ヨВ鍐寵繖涓棶棰橈紝鍥犱負IE涓嶆敮鎸佷粬錛屾墍浠ヤ笉浼氭湁璐熼潰褰卞搷錛岃皟鏁村涓?br>body {
min-width: 550px; /* 2x LC width + RC width */
}
榪欐椂鍦↖E6錛堝畬鍏ㄦ墦寮鐨勭獥鍙o級涓嬶紝left鍏冪礌璺濈宸︿晶鍙堝お榪滀簡錛屽啀璋冩暣* html #left {
left: 150px; /* RC width */
}
榪欎簺澶у皬璋冩暣鏄牴鎹笂闈㈠凡緇忓畾涔夌殑瀹藉害鏉ョ殑錛屼綘璋冩暣鐨勬椂鍊欎篃瑕佹牴鎹嚜宸辯殑瀹為檯鎯呭喌銆?br>
鐜板湪澧炲姞padding
鍐呭鏂囧瓧璐寸潃瀹瑰櫒鐨勮竟錛岀浉淇′綘鐪嬪緱鏃跺欙紝涓嶄細寰堣垝鏈嶏紝璋冩暣涓涓?br>#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
褰撶劧涓嶈兘鍙鍔爈eft灝辯畻瀹屼簨錛岃緇欎竴緋誨垪鍏冪礌閮藉繀欏誨姞涓婏紝涔熻璋冩暣澧炲姞padding錛屽甫鏉ョ殑鏂扮殑bug錛岃皟鏁村涓?br>body {
header鍜宖ooter鐨刾adding鍙互闅忔剰澧炲姞錛岃繖閲屽氨涓嶆彁浜嗭紝榪樻湁闀垮害鍗曚綅鐢╡m鏇村叿浜插拰鍔涳紙em鍙互璁╃敤鎴蜂嬌鐢ㄦ祻瑙堝櫒鏉ヨ皟鏁磋嚜宸遍渶瑕佺殑瀛椾綋澶у皬錛?br>浣嗘槸涓嶈兘娣峰悎浣跨敤錛岄夋嫨em鍜宲x鐨勬椂鍊欐槑鏅轟簺,瀵熺湅鏁堟灉
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
鍏冪礌絳夐珮闂
閲囩敤http://www.positioniseverything.net/articles/onetruelayout/equalheight
鏈変漢緲昏瘧榪囨潵鐨勶細http://www.blueidea.com/tech/web/2006/3210.asp
閲屾彁鍒扮殑鏂規硶錛屽氨涓嶅叿浣撹В閲婁簡銆?br>#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
鍐嶈В鍐硂pera 8鐨刡ug錛屼唬鐮佽皟鏁村涓?br><div id="footer-wrapper">
<div id="footer"></div>
</div>* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body
background */
}
]]>
margin:0 auto;
}
#ddd{
margin:0 auto;
padding: 3px;
background:#00FFCC;
border:solid 1px;
height: 300px;
}
#ddd h4{
margin:0px;
background:#6666FF;
line-height:20px;
}
#ddd ul{
margin:0px;
padding: 3px;
list-style:none;
}
#ddd ul li {
float:left;
}
#ddd a:visited{
background:#999999 url(../Mcredits.gif);
}
#ddd a:link{
background:#999999 url(../credits.gif);
}
#ddd a:hover{
background:#ff0000;
}
#leftmenu
{
position: absolute;
left: 0px;
width: 400px;
height: auto;
background-color: WhiteSmoke;
padding-top: 0px;
}
#leftmenu h3
{
font-size: 11.5;
margin: 0px;
margin-top: 10px;
padding-bottom: 2px;
padding-left: 3px;
border-top: solid 1px Gainsboro;
padding-top: 3px;
}
#leftmenu ul
{
list-style:none;
margin: 0px;
padding-left: 5px;
margin-left: 5px;
margin-bottom: 10px;
font-size: 11.5;
}
#leftmenu ul li
{
margin:0px;
float:left;
}
#leftmenu a
{
padding: 1px;
text-decoration: none;
}
#leftmenu a:active, #leftmenu a:visited, #leftmenu a:link
{
}
#leftmenu a:hover
{
font-style: italic;
}
</style>
]]>
16榪涘埗鐨勮壊褰╁鹼紝濡傛灉姣忎袱浣嶇殑鍊肩浉鍚岋紝鍙互緙╁啓涓鍗婏紝渚嬪錛?br />#000000鍙互緙╁啓涓?000;#336699鍙互緙╁啓涓?369;
閫氬父鏈変笅闈㈠洓縐嶄功鍐欐柟娉?
鏂逛究鐨勮蹇嗘柟娉曟槸欏烘椂閽堬紝涓婂彸涓嬪乏銆傚叿浣撳簲鐢ㄥ湪margin鍜宲adding鐨勪緥瀛愬涓嬶細
margin:1em 0 2em 0.5em;
杈規鐨勫睘鎬у涓嬶細
鍙互緙╁啓涓轟竴鍙ワ細border:1px solid #000;
璇硶鏄?span class="code">border:width style color;
鑳屾櫙鐨勫睘鎬у涓嬶細
鍙互緙╁啓涓轟竴鍙ワ細background:#f00 url(background.gif) no-repeat fixed 0 0;
璇硶鏄?span class="code">background:color image repeat attachment position;
浣犲彲浠ョ渷鐣ュ叾涓竴涓垨澶氫釜灞炴у鹼紝濡傛灉鐪佺暐錛岃灞炴у煎皢鐢ㄦ祻瑙堝櫒榛樿鍊鹼紝榛樿鍊間負錛?/p>
瀛椾綋鐨勫睘鎬у涓嬶細
鍙互緙╁啓涓轟竴鍙ワ細font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
娉ㄦ剰錛屽鏋滀綘緙╁啓瀛椾綋瀹氫箟錛岃嚦灝戣瀹氫箟font-size鍜宖ont-family涓や釜鍊箋?/p>
鍙栨秷榛樿鐨勫渾鐐瑰拰搴忓彿鍙互榪欐牱鍐檒ist-style:none;,
list鐨勫睘鎬у涓?
鍙互緙╁啓涓轟竴鍙ワ細list-style:square inside url(image.gif);
鏈榪?緇忓父鏈夋湅鍙嬮棶鎴戜竴浜涘伐浣滀腑閬囧埌鐨凜SS闂銆備粬浠繪槸涓嶈兘寰堝ソ鐨勬帶鍒禖SS錛屽獎鍝岰SS鐨勬晥鐜囧彂鎸ャ傛垜鏉ュ垎鏋愭葷粨涓涓嬮敊璇墍鍦紝甯姪澶у鏇村姞瀹規槗浣跨敤CSS銆?/p>
鏈枃鎬葷粨浜嗘垜寮濮嬩嬌鐢–SS甯冨眬鏂規硶浠ユ潵鎵鏈夌殑鎶宸у拰鍏煎鏂規錛屾垜鎰挎剰鎶婅繖浜涗笌浣犲垎浜紝鎴戜細閲嶇偣瑙i噴涓浜涙柊鎵嬪鏄撶姱鐨勯敊璇?鍖呮嫭鎴戣嚜宸變篃鐘繃鐨?錛屽鏋滀綘宸茬粡鏄疌SS楂樻墜錛岃繖浜涚粡楠屾妧宸у彲鑳藉凡緇忛兘鐭ラ亾錛屽鏋滀綘鏈夋洿澶氱殑錛屽笇鏈涘彲浠ュ府鎴戣ˉ鍏呫?/p>
浣跨敤緙╁啓鍙互甯姪鍑忓皯浣燙SS鏂囦歡鐨勫ぇ灝忥紝鏇村姞瀹規槗闃呰銆俢ss緙╁啓鐨勪富瑕佽鍒欒鍙傜湅銆?a target="new">甯哥敤css緙╁啓璇硶鎬葷粨銆嬶紝榪欓噷灝變笉灞曞紑鎻忚堪銆?/p>
蹇樿瀹氫箟灝哄鐨勫崟浣嶆槸CSS鏂版墜鏅亶鐨勯敊璇傚湪HTML涓綘鍙互鍙啓width="100"錛屼絾鏄湪CSS涓紝浣犲繀欏葷粰涓涓噯紜殑鍗曚綅錛屾瘮濡傦細width:100px width:100em銆傚彧鏈変袱涓緥澶栨儏鍐靛彲浠ヤ笉瀹氫箟鍗曚綅錛氳楂樺拰0鍊箋傞櫎姝や互澶栵紝鍏朵粬鍊奸兘蹇呴』绱ц窡鍗曚綅錛屾敞鎰忥紝涓嶈鍦ㄦ暟鍊煎拰鍗曚綅涔嬮棿鍔犵┖鏍箋?/p>
褰撳湪XHTML涓嬌鐢–SS錛孋SS閲屽畾涔夌殑鍏冪礌鍚嶇О鏄尯鍒嗗ぇ灝忓啓鐨勩備負浜嗛伩鍏嶈繖縐嶉敊璇紝鎴戝緩璁墍鏈夌殑瀹氫箟鍚嶇О閮介噰鐢ㄥ皬鍐欍?/p>
class鍜宨d鐨勫煎湪HTML鍜孹HTML涓篃鏄尯鍒嗗ぇ灝忓啓鐨勶紝濡傛灉浣犱竴瀹氳澶у皬鍐欐販鍚堝啓錛岃浠旂粏紜浣犲湪CSS鐨勫畾涔夊拰XHTML閲岀殑鏍囩鏄竴鑷寸殑銆?/p>
褰撲綘鍐欑粰涓涓厓绱犲畾涔塩lass鎴栬卛d錛屼綘鍙互鐪佺暐鍓嶉潰鐨勫厓绱犻檺瀹氾紝鍥犱負ID鍦ㄤ竴涓〉闈㈤噷鏄敮涓鐨勶紝鑰宑las s鍙互鍦ㄩ〉闈腑澶氭浣跨敤銆備綘闄愬畾鏌愪釜鍏冪礌姣棤鎰忎箟銆備緥濡傦細
div#content { /* declarations */ }鍙互鍐欐垚
#content { /* declarations */ }榪欐牱鍙互鑺傜渷涓浜涘瓧鑺傘?/p>
閫氬父padding鐨勯粯璁ゅ間負0錛宐ackground-color鐨勯粯璁ゅ兼槸transparent銆備絾鏄湪涓嶅悓鐨勬祻瑙堝櫒榛樿鍊煎彲鑳戒笉鍚屻傚鏋滄曟湁鍐茬獊錛屽彲浠ュ湪鏍峰紡琛ㄤ竴寮濮嬪氨鍏堝畾涔夋墍鏈夊厓绱犵殑margin鍜宲adding鍊奸兘涓?錛岃薄榪欐牱錛?/p>
* {
margin:0;
padding:0;
}
CSS涓紝瀛愬厓绱犺嚜鍔ㄧ戶鎵跨埗鍏冪礌鐨勫睘鎬у鹼紝璞¢鑹層佸瓧浣撶瓑錛屽凡緇忓湪鐖跺厓绱犱腑瀹氫箟榪囩殑錛屽湪瀛愬厓绱犱腑鍙互鐩存帴緇ф壙錛屼笉闇瑕侀噸澶嶅畾涔夈備絾鏄娉ㄦ剰錛屾祻瑙堝櫒鍙兘鐢ㄤ竴浜涢粯璁ゅ艱鐩栦綘鐨勫畾涔夈?/p>
濡傛灉瀵瑰悓涓涓厓绱犵殑瀹氫箟鏈夊縐嶏紝浠ユ渶鎺ヨ繎(鏈灝忎竴綰?鐨勫畾涔変負鏈浼樺厛錛屼緥濡傛湁榪欎箞涓孌典唬鐮?/p>
Update: Lorem ipsum dolor set
鍦–SS鏂囦歡涓紝浣犲凡緇忓畾涔変簡鍏冪礌p錛屽張瀹氫箟浜嗕竴涓猚lass"update"
p {榪欎袱涓畾涔変腑錛宑lass="update"灝嗚浣跨敤錛屽洜涓篶lass姣攑鏇磋繎銆備綘鍙互鏌ラ槄W3C鐨勩?Calculating a selector鈥檚 specificity銆?浜嗚В鏇村銆?/p>
涓涓爣絳懼彲浠ュ悓鏃跺畾涔夊涓猚lass銆備緥濡傦細鎴戜滑鍏堝畾涔変袱涓牱寮忥紝絎竴涓牱寮忚儗鏅負#666錛涚浜屼釜鏍峰紡鏈?0 px鐨勮竟妗嗐?/p>
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
鍦ㄩ〉闈唬鐮佷腑錛屾垜浠彲浠ヨ繖鏍瘋皟鐢?/p> <div class="one two"></div>
榪欐牱鏈緇堢殑鏄劇ず鏁堟灉鏄繖涓猟iv鏃㈡湁#666鐨勮儗鏅紝涔熸湁10px鐨勮竟妗嗐傛槸鐨勶紝榪欐牱鍋氭槸鍙互鐨勶紝浣犲彲浠ュ皾璇曚竴涓嬨?/p>
CSS鍒濆鑰呬笉鐭ラ亾浣跨敤瀛愰夋嫨鍣ㄦ槸褰卞搷浠栦滑鏁堢巼鐨勫師鍥犱箣涓銆傚瓙閫夋嫨鍣ㄥ彲浠ュ府鍔╀綘鑺傜害澶ч噺鐨刢lass瀹氫箟銆傛垜浠潵鐪嬩笅闈㈣繖孌典唬鐮侊細
<div id="subnav">榪欐浠g爜鐨凜SS瀹氫箟鏄細
div#subnav ul { /* Some styling */ }浣犲彲浠ョ敤涓嬮潰鐨勬柟娉曟浛浠d笂闈㈢殑浠g爜
<ul id="subnav">鏍峰紡瀹氫箟鏄細
#subnav { /* Some styling */ }鐢ㄥ瓙閫夋嫨鍣ㄥ彲浠ヤ嬌浣犵殑浠g爜鍜孋SS鏇村姞綆媧併佹洿鍔犲鏄撻槄璇匯?/p>
涓轟簡鑺傜渷瀛楄妭錛屾垜寤鴻涓嶈緇欒儗鏅浘鐗囪礬寰勫姞寮曞彿錛屽洜涓哄紩鍙蜂笉鏄繀欏葷殑銆備緥濡傦細
background:url("images/***.gif") #333;鍙互鍐欎負
background:url(images/***.gif) #333;濡傛灉浣犲姞浜嗗紩鍙鳳紝鍙嶈屼細寮曡搗涓浜涙祻瑙堝櫒鐨勯敊璇?/p>
褰撲竴浜涘厓绱犵被鍨嬨乧lass鎴栬卛d閮芥湁鍏卞悓鐨勪竴浜涘睘鎬э紝浣犲氨鍙互浣跨敤緇勯夋嫨鍣ㄦ潵閬垮厤澶氭鐨勯噸澶嶅畾涔夈傝繖鍙互鑺傜渷涓嶅皯瀛楄妭銆?
渚嬪錛氬畾涔夋墍鏈夋爣棰樼殑瀛椾綋銆侀鑹插拰margin錛屼綘鍙互榪欐牱鍐欙細
h1,h2,h3,h4,h5,h6 {濡傛灉鍦ㄤ嬌鐢ㄦ椂錛屾湁涓埆鍏冪礌闇瑕佸畾涔夌嫭绔嬫牱寮忥紝浣犲彲浠ュ啀鍔犱笂鏂扮殑瀹氫箟錛屽彲浠ヨ鐩栬佺殑瀹氫箟錛屼緥濡傦細
h1 { font-size:2em; }褰撲綘鐢–SS鏉ュ畾涔夐摼鎺ョ殑澶氫釜鐘舵佹牱寮忔椂錛岃娉ㄦ剰瀹冧滑涔﹀啓鐨勯『搴忥紝姝g‘鐨勯『搴忔槸錛?link :visited :hover :active銆傛娊鍙栫涓涓瓧姣嶆槸"LVHA"錛屼綘鍙互璁板繂鎴?LoVe HAte"(鍠滄璁ㄥ帉)銆備負浠涔堣繖涔堝畾涔夛紝鍙互鍙傝僂ric Meyer鐨勩?a target="new">Link Specificity銆嬨?/p>
濡傛灉浣犵殑鐢ㄦ埛闇瑕佺敤閿洏鏉ユ帶鍒訛紝闇瑕佺煡閬撳綋鍓嶉摼鎺ョ殑鐒︾偣錛屼綘榪樺彲浠ュ畾涔?focus灞炴с?focus灞炴х殑鏁堟灉涔熷彇鍐充笌浣犱功鍐欑殑浣嶇疆錛屽鏋滀綘甯屾湜鑱氱劍鍏冪礌鏄劇ず:hover鏁堟灉錛屼綘灝辨妸:focus鍐欏湪:hover鍓嶉潰錛涘鏋滀綘甯屾湜鑱氱劍鏁堟灉鏇夸唬:hover鏁堟灉錛屼綘灝辨妸:focus鏀懼湪:hover鍚庨潰銆?/p>
涓涓潪甯稿父瑙佺殑CSS闂錛屽畾浣嶄嬌鐢ㄦ誕鍔ㄧ殑鏃跺欙紝涓嬮潰鐨勫眰琚誕鍔ㄧ殑灞傛墍瑕嗙洊錛屾垨鑰呭眰閲屽祵濂楃殑瀛愬眰瓚呭嚭浜嗗灞傜殑鑼冨洿銆?/p>
閫氬父鐨勮В鍐沖姙娉曟槸鍦ㄦ誕鍔ㄥ眰鍚庨潰娣誨姞涓涓澶栧厓绱狅紝渚嬪涓涓猟iv鎴栬呬竴涓猙r錛屽茍涓斿畾涔夊畠鐨勬牱寮忎負clear: both銆傝繖涓姙娉曟湁涓鐐圭壍寮猴紝騫歌繍鐨勬槸榪樻湁涓涓ソ鍔炴硶鍙互瑙e喅錛屽弬鐪嬭繖綃囨枃绔犮?a target="new">How To Clear Floats Without Structural Markup銆?娉細鏈珯灝嗗敖蹇炕璇戞鏂?銆?/p>
涓婇潰2縐嶆柟娉曞彲浠ュ緢濂借В鍐蟲誕鍔ㄨ秴鍑虹殑闂錛屼絾鏄鏋滃綋浣犵湡鐨勯渶瑕佸灞傛垨鑰呭眰閲岀殑瀵硅薄榪涜clear鐨勬椂鍊欐庝箞鍔烇紵涓縐嶇畝鍗曠殑鏂規硶灝辨槸鐢╫verflow灞炴э紝榪欎釜鏂規硶鏈鍒濈殑鍙戣〃鍦ㄣ?a target="new">Simple Clearing of Floats銆嬶紝鍙堝湪銆?a target="new">Clearance銆嬪拰銆?a target="new">Super simple clearing floats銆嬩腑琚箍娉涜璁恒?/p>
涓婇潰閭d竴縐峜lear鏂規硶鏇撮傚悎浣狅紝瑕佺湅鍏蜂綋鐨勬儏鍐碉紝榪欓噷涓嶅啀灞曞紑璁鴻堪銆傚彟澶栧叧浜巉loat鐨勫簲鐢紝涓浜涗紭縐鐨勬枃绔犲凡緇忚寰楀緢娓呮錛屾帹鑽愪綘闃呰錛氥?a target="new">Floatutorial銆嬨併?a target="new">Containing Floats銆嬪拰銆?a target="new">Float Layouts銆?/p>
榪欐槸涓涓畝鍗曠殑鎶宸э紝浣嗘槸鍊煎緱鍐嶈涓閬嶏紝鍥犱負鎴戠湅瑙佸お澶氱殑鏂版墜闂閮芥槸闂繖涓細CSS濡備綍妯悜灞呬腑錛熶綘闇瑕佸畾涔夊厓绱犵殑瀹斤紝騫朵笖瀹氫箟妯悜鐨刴argin錛屽鏋滀綘鐨勫竷灞鍖呭惈鍦ㄤ竴涓眰(瀹瑰櫒)涓紝灝辮薄榪欐牱錛?/p>
浣犲彲浠ヨ繖鏍峰畾涔変嬌瀹冩í鍚戝眳涓細
#wrap {浣嗘槸IE5/Win涓嶈兘姝g‘鏄劇ず榪欎釜瀹氫箟錛屾垜浠噰鐢ㄤ竴涓潪甯告湁鐢ㄧ殑鎶宸ф潵瑙e喅錛氱敤text-align灞炴с傚氨璞¤繖鏍鳳細
body {絎竴涓猙ody鐨則ext-align:center; 瑙勫垯瀹氫箟IE5/Win涓璪ody鐨勬墍鏈夊厓绱犲眳涓?鍏朵粬嫻忚鍣ㄥ彧鏄皢鏂囧瓧灞呬腑) 錛岀浜屼釜text-align:left;鏄皢#warp涓殑鏂囧瓧灞呭乏銆?/p>
鍥犱負鑰佺増鏈祻瑙堝櫒涓嶆敮鎸丆SS錛屼竴涓氬父鐨勫仛娉曟槸浣跨敤@import鎶宸ф潵鎶奀SS闅愯棌璧鋒潵銆備緥濡傦細
@import url("main.css");鐒惰岋紝榪欎釜鏂規硶瀵笽E4涓嶈搗浣滅敤錛岃繖璁╂垜寰堟槸澶寸柤浜嗕竴闃靛瓙銆傚悗鏉ユ垜鐢ㄨ繖鏍風殑鍐欐硶錛?/p> @import "main.css";
榪欐牱灝卞彲浠ュ湪IE4涓篃闅愯棌CSS浜嗭紝鍛靛懙錛岃繕鑺傜渷浜?涓瓧鑺傚憿銆傛兂浜嗚В@import璇硶鐨勮緇嗚鏄庯紝鍙互鐪嬭繖閲屻?a target="new">centricle鈥檚 css filter chart銆?/p>
鏈変簺鏃跺欙紝浣犻渶瑕佸IE嫻忚鍣ㄧ殑bug瀹氫箟涓浜涚壒鍒殑瑙勫垯錛岃繖閲屾湁澶鐨凜SS鎶宸?hacks)錛屾垜鍙嬌鐢ㄥ叾涓殑涓ょ鏂規硶錛屼笉綆″井杞湪鍗沖皢鍙戝竷鐨処E7 beta鐗堥噷鏄惁鏇村ソ鐨勬敮鎸丆SS錛岃繖涓ょ鏂規硶閮芥槸鏈瀹夊叏鐨勩?/p>
鍙﹀涓縐嶆柟娉曪紝鎴戣涓烘瘮CSS銆Hacks鏇村姞緇忓緱璧瘋冮獙灝辨槸閲囩敤寰蔣鐨勭鏈夊睘鎬ф潯浠舵敞閲?conditional comments)銆傜敤榪欎釜鏂規硶浣犲彲浠ョ粰IE鍗曠嫭瀹氫箟涓浜涙牱寮忥紝鑰屼笉褰卞搷涓繪牱寮忚〃鐨勫畾涔夈傚氨璞¤繖鏍鳳細
<!--[if IE]>褰撹皟璇旵SS鍙戠敓閿欒錛屼綘灝辮璞℃帓鐗堝伐浜猴紝閫愯鍒嗘瀽CSS浠g爜銆傛垜閫氬父鍦ㄥ嚭闂鐨勫眰涓婂畾涔変竴涓儗鏅鑹詫紝榪欐牱灝辮兘寰堟槑鏄劇湅鍒板眰鍗犳嵁澶氬ぇ絀洪棿銆傛湁浜涗漢寤鴻鐢╞order錛屼竴鑸儏鍐典篃鏄彲浠ョ殑錛屼絾闂鏄紝鏈夋椂鍊檅order 浼氬鍔犲厓绱犵殑灝哄錛宐order-top鍜宐oeder-bottom浼氱牬鍧忕旱鍚憁argin鐨勫鹼紝鎵浠ヤ嬌鐢╞ackground鏇村姞瀹夊叏浜涖?
鍙﹀涓涓粡甯稿嚭闂鐨勫睘鎬ф槸outline銆俹utline鐪嬭搗鏉ヨ薄boeder錛屼絾涓嶄細褰卞搷鍏冪礌鐨勫昂瀵告垨鑰呬綅緗傚彧鏈夊皯鏁版祻瑙堝櫒鏀寔outline灞炴э紝鎴戞墍鐭ラ亾鐨勫彧鏈塖afari銆丱mniWeb銆佸拰Opera銆?/p>
鍦ㄥ啓CSS浠g爜鐨勬椂鍊欙紝瀵逛簬緙╄繘銆佹柇琛屻佺┖鏍鹼紝姣忎釜浜烘湁姣忎釜浜虹殑涔﹀啓涔犳儻銆傚湪緇忚繃涓嶆柇瀹炶返鍚庯紝鎴戝喅瀹氶噰鐢ㄤ笅闈㈣繖鏍風殑涔﹀啓鏍峰紡錛?/p>
selector1,
selector2 {
property:value;
}
褰撲嬌鐢ㄨ仈鍚堝畾涔夋椂錛屾垜閫氬父灝嗘瘡涓夋嫨鍣ㄥ崟鐙啓涓琛岋紝榪欐牱鏂逛究鍦–SS鏂囦歡涓壘鍒板畠浠傚湪鏈鍚庝竴涓夋嫨鍣ㄥ拰澶ф嫭鍙穥涔嬮棿鍔犱竴涓┖鏍鹼紝姣忎釜瀹氫箟涔熷崟鐙啓涓琛岋紝鍒嗗彿鐩存帴鍦ㄥ睘鎬у煎悗錛屼笉瑕佸姞絀烘牸銆?/p>
鎴戜範鎯湪姣忎釜灞炴у煎悗闈㈤兘鍔犲垎鍙鳳紝铏界劧瑙勫垯涓婂厑璁告渶鍚庝竴涓睘鎬у煎悗闈㈠彲浠ヤ笉鍐欏垎鍙鳳紝浣嗘槸濡傛灉浣犺鍔犳柊鏍峰紡鏃跺鏄撳繕璁拌ˉ涓婂垎鍙瘋屼駭鐢熼敊璇紝鎵浠ヨ繕鏄兘鍔犳瘮杈冨ソ銆?/p>
鏈鍚庯紝鍏抽棴鐨勫ぇ鎷彿}鍗曠嫭鍐欎竴琛屻?/p>
絀烘牸鍜屾崲琛屾湁鍔╀笌闃呰銆?/p>