作者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