不清理
布局看上去會(huì)像這樣:
幾個(gè)列漂在footer上方,footer環(huán)繞著列。這可不對(duì)!
清理
方法相當(dāng)簡單,我們只需要在三個(gè)列后面加上一個(gè)<div>,如下:
<div id="content"> <div class="column1"> <h2>a sleek design</h2> <p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p> <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p> <p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p> <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p> </div> <div class="column2"> <h2>tutorials</h2> <p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p> <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p> <p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p> <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p> </div> <div class="column3"> <h2>recent work</h2> <p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p> <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p> <p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p> <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p> </div> <div style="clear:both"></div> </div>
看到底部的<div style="clear:both"></div>了嗎?只用一個(gè)聲明清理那三個(gè)列的空<div>,就解決了我們的問題:
點(diǎn)此查看網(wǎng)站
本文鏈接:http://www.95time.cn/tech/web/2009/6517.asp
出處:譯言
責(zé)任編輯:bluehearts
上一頁 用CSS布局建站從零開始 [6] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|