Re: [問題] 如何用 CSS 做到這樣的排版？

看板Web_Design作者gckenny (絕体絕命!小君君的最期～)時間19年前 (2005/12/06 11:47)推噓0(0推 0噓 1→)

留言1則, 1人參與討論串2/3 (看更多)

※ 引述《NelsonT (有人要 GMail 嗎?)》之銘言： : http://wise.edu.tw/weblink/weblink.asp : 請教大家，這個網頁裡頭的相關連結的排版 : (就是每列三個圖，圖下還有網站名稱) : 若是要用 CSS 來完成，要怎麼做比較好呢？ : 我在考慮要用 CSS 還是用 table 比較好， : 可以給我一些意見嗎？ : 謝謝各位給你個CSS範例參考，我的部落格也是用類似方法以下是依上述網頁的排法改的： <style type="text/css"> #LinkBanner { width: 700px; } #LinkBanner li { display: block; float: left; margin: 1em 0; width: 33.3%; } #LinkBanner > li { margin: 1em 2em; width: auto; } #LinkBanner a { width: 140px; height: 50px; display: block; text-align: center; text-decoration: none; } #LinkBanner a:hover { text-decoration: underline; } #LinkBanner span { display: block; padding: 30px 0 0 0; } #LinkBanner li#link_01 { background: url(01.gif) no-repeat; } #LinkBanner li#link_02 { background: url(02.gif) no-repeat; } #LinkBanner li#link_03 { background: url(03.gif) no-repeat; } #LinkBanner li#link_04 { background: url(04.gif) no-repeat; clear: left; } #LinkBanner li#link_05 { background: url(05.gif) no-repeat; } </style> <ul id="LinkBanner"> <li id="link_01" /><a href="#">Link</a> <li id="link_02" /><a href="#">Link</a> <li id="link_03" /><a href="#">Link</a> <li id="link_04" /><a href="#">Link</a> <li id="link_05" /><a href="#">Link</a> </ul> 這樣應該是OK啦，IE/Firefox通用。 DEMO：http://demo.orz.tw/LinkBanner/ -- 部落格全新開幕，目標一個月一篇廢水！囧rz 網址：http://BLOG.Orz.tw [180禁！未成年勿瀏覽！] -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 210.202.122.248 ※ 編輯: gckenny 來自: 210.202.122.248 (12/06 12:56)