现在我们不用photoshop,而用“css”和“Javascript”来做,方法也很简单(下文代码中“//”后的是注释)!
一、准备一张图片,名称大小自定。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)二、插入一个表格,表格长、宽设置为上面图片的长、宽,把cellpadding(填充)、cellspacing(间距)、border(边框)均设置为0,并把表格的背景设置为上面的图片,即代码为(“width=”后是图片的高,“height=”后是图片的宽,“background=”后是图片的名称):
<table cellpadding="0" cellspacing="0" border="0" width="240" height="180" background="photo.jpg"
</table
三、建立一个css样式,把该样式应用于上面的表格,样式代码如下。(“#000000”是细线的颜色,可以更换,后面的“filter:alpha(opacity=30)”是细线的透明度。
<style
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}
</style
四、再在表格中插入一小段“javascript”代码:
<script language="JavaScript"
for(n=1;n<=90;n++)//90为图片高度的一半;
document.write('<tr<td </td</tr')//注意“td”中间有一个全角空格
//document.write('<tr<td style=line-height:1px </td</tr')
//考虑到浏览器的兼容性,你也可以使用上面这一句替换第三行的代码
</script
整个页面的代码如下:
<html
<head
<style
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}
</style
</head
<body
<table class=tvline width="240" height="180" cellpadding="0" cellspacing="0" border="0" background="photo1.jpg"
<script language="JavaScript"
for(n=1;n<=90;n++)
document.write('<tr<td </td</tr')
</script
</table
</body
</html