Board logo

標題: 用div+css取代table的边框代码 [打印本頁]

作者: rainbow    時間: 2013-7-1 10:59     標題: 用div+css取代table的边框代码

原背景图尺寸较小:


用div可以把背景图扩大而不会重复:

用 div 取代 table 可以在背景图片上加字时不用背景代码 backqround,而改用插图代码 img,因此可以不受原图尺寸的限制而把背景图框放大缩小到合适的大小。


代码:
<center>
<DIV style="OVERFLOW: hidden; WIDTH: 边框宽度px; POSITION: relative; TOP: 20px; HEIGHT: 边框高度px">
<IMG style="BORDER: 边框颜色 边框厚度px 边框形状" src="背景图片网址" width=放大后的背景图片宽度>
<DIV style="LEFT: 左侧距离px; OVERFLOW: hidden; WIDTH: 可视文字宽度px; POSITION: absolute; TOP: 上侧距离px; HEIGHT: 可视文字高度px" align=left>
<span style="FONT: normal 字体大小px/行距% 字型; COLOR: 文字颜色">文字开始……。</span>
</DIV></DIV></center>
< BR><BR>

说明:
◆ 以上代码中的红色字是可更改的参数。
◆ 边框宽度=放大后的背景图宽度+两侧边框厚度。
◆ 边框高度=放大后的背景图高度+两侧边框厚度。
◆ 可选的边框形状有:点状(dotted)、虚线(dashed)、双细线(double)、脊状(ridge)等。
◆ 边框定位、文字定位、文字宽度和高度必须根据背景图片自行调试到合适位置。



[ 本帖最後由 rainbow 於 2016-4-28 16:37 編輯 ]




歡迎光臨 華中天地論壇 (http://huachung.freebbs.tw/) Powered by Discuz! 5.0.0