中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

言歸正傳，看看代碼

代碼是很直觀而且很優(yōu)雅的。
(為了直觀起見，我們使用了非語義化的”中心”、”左”和”右”來闡述我們的代碼，但是我們建議您在您的代碼中使用語義化的標(biāo)簽 -Ed.)

<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>

一個額外的DIV包含著我們的三個層,這樣的結(jié)構(gòu)符合我集中內(nèi)容上一體的標(biāo)記為一體的習(xí)慣(obsessive compulsive markup habits. 翻譯的不準(zhǔn)確)
樣式很也簡單,左邊側(cè)欄是200PX,右邊是150,為了簡便標(biāo)示用LC,RC,CC分別代表左邊,右邊和中間,樣式如下:

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

重新度量你想要的模型的價(jià)值,你會發(fā)現(xiàn)其實(shí)很簡單.這布局能在Opera, Firefox, and IE6(需要在最后一句HACK).IE5.5則需要HACK CSS盒模型。剛好也給讀者一個練習(xí)的機(jī)會(Orz).
再看一遍這段優(yōu)化代碼( 例子 )

出處：Alipay UED
責(zé)任編輯：moby

上一頁 尋找圣杯 [1] 下一頁 尋找圣杯 [3]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。