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

方法B:雙重浮動(dòng)

<div id="header">
  ...header content here...
</div>
<div id="content">
  ...main content here...
</div>
<div id="sidebar">
  ...sidebar content here...
</div>
<div id="footer">
  ...footer content here...
</div>

方法A的缺點(diǎn)之一是:為了浮動(dòng)側(cè)邊欄,則必須在標(biāo)記源代碼之內(nèi)把側(cè)邊欄放到主內(nèi)容<div>的前面,關(guān)閉CSS的瀏覽器,文字瀏覽器,屏幕閱讀器與其他不支持CSS的設(shè)備將會(huì)在頁面主要內(nèi)容之前顯示(或念出)側(cè)邊欄的內(nèi)容.這樣實(shí)在不嚴(yán)謹(jǐn).

我們可以利用float做法,并避開這個(gè)問題,只要交換標(biāo)記源代碼里的主內(nèi)容,側(cè)邊欄<div>的位置(如上所示),然后以CSS將兩者浮動(dòng)到不同邊即可.

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  }
#sidebar {
  float: right;
  width: 30%;
  background: #999;
  }
#footer {
  clear: both;
  padding: 20px;
  background: #eee;
  }

通過把兩個(gè)<div>浮動(dòng)到不同方向,就能以最恰當(dāng)?shù)姆绞脚帕性创�碼(主內(nèi)容放在側(cè)邊欄前面),同時(shí)仍能得到圖12-4這樣的效果.

避開兩邊

同樣重要的是,你必須將#footerdeclear屬性設(shè)為both,如此一來不管兩欄的長度多長,頁尾總是顯示在最后,而標(biāo)簽源代碼的內(nèi)容順序也改善了.

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 標(biāo)記語言——CSS布局 [2] 下一頁 標(biāo)記語言——CSS布局 [4]

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