作者gckenny (絕体絕命!小君君的最期～)
看板Web_Design
標題Re: [問題] 如何用 CSS 做到這樣的排版？
時間Tue Dec 6 12:47:50 2005
※ 引述《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="#"><span>Link</span></a>
<li id="link_02" /><a href="#"><span>Link</span></a>
<li id="link_03" /><a href="#"><span>Link</span></a>
<li id="link_04" /><a href="#"><span>Link</span></a>
<li id="link_05" /><a href="#"><span>Link</span></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)
1F：→ NelsonT:謝謝提供資訊 :) 12/07 23:15