跳過導覽列

O3noBLOG

A Happy(?)Designer ~~

單篇彙整

柒月 24

兩層div可以做什麼

其實應該說兩層的block物件可以做什麼,不過用div來代表比較好懂。

首先可以避開IE的box model的寬高問題,範例一中我內層的div標籤只有設定寬高,padding、border、margin的設定則是放在外層的的div,這樣便可以避開IE的問題,或著想要用IE的計算方式也是沒問題的,改成外層設定寬高和margin,內層設定border和padding,這樣現在可以確保兩種計算方法的結果都是一樣的。

Top Left Top Right Bottom Left Bottom Right

再來是可以配合背景圖片(如右側四張)、:before、:after兩個擬組件來做出圓角的效果,如範例二,這個作法的優點是長寬都是可以自由變化的。當然也可以加上邊框,如範例三,不知道要到何時border-radius才會被大量支援,所以現在要用圓角效果大概還是只能靠圖片了。

最後(我現在想到的)則是陰影效果,yDSF就是這樣,或是不想用圖片的話可以直接對內側物件設定relative position,見範例四

引用(http://othree.net/mt/mt-tb.cgi/210)

目前無人引用。

迴響(發表你的迴響)

目前無人回應。

發表迴響

如果欲使用OpenID,請開啟瀏覽器的JavaScript功能。

accesskey:P


其它資訊

關於本文章

兩層div可以做什麼發表於2005-07-24,文章類別為CSS & HTML,截至目前為止共有0篇文章引用此文、0篇讀者迴響,你可以為此篇文章留下你的想法,或是訂閱讀者迴響的RSS

關於本網站

本網站是O3(othree)的個人部落格,主要內容為網路標準、網頁設計,穿插些ACG心得和敗家紀錄,如果需要聯絡我請寄信到

近期文章

分類彙整

我在看什麼

訂閱本網誌

貼紙

時間がない