*教您制作卷轴画

发布日期:2022-08-17 21:31    点击次数:67

图片

卷轴画,这种漂亮的网页形式,许多朋友都喜欢。下面,以我制作的这篇卷轴画为例,讲解一下应用代码制作卷轴画的方法。制作方法:设置一个一行三列的表格,放入有定位样式的块区标签中。表格的第一个单元格中放入卷轴画的左画轴,第二个单元格中放入卷轴画的主体内容,第三个单元格放入卷轴画的右画轴。各步骤的显示修改与代码如下:一、一行三列的表格放入块区标签中的效果:代码如下:<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0><TBODY><TR><!--左画轴开始处--><TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px"></TD></TR></TBODY></TABLE></DIV>二、放入左画轴以后的效果:代码如下:<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><!--总块区的定位作用是使网页在正常位置,不遮蔽“修改”按钮--><TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0><TBODY><TR><!--左画轴开始处--><TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px"><MARQUEE id=mar1 title=第一个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right><DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px"><TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD></TR></TBODY></TABLE></DIV></MARQUEE><!--背景图片的宽度为:690px,高度为:430px。--><TABLE title=左画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444></TD></TR></TBODY></TABLE><TABLE title=左画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD> </TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>三、放入网页主体内容(即:第二个单元格中的内容)以后的效果:代码如下:<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><!--总块区的定位作用是使网页在正常位置, 润肺汤不遮蔽“修改”按钮--><TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0><TBODY><TR><!--左画轴开始处--><TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px"><MARQUEE id=mar1 title=第一个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right><DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px"><TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD></TR></TBODY></TABLE></DIV></MARQUEE><!--背景图片的宽度为:690px,高度为:430px。--><TABLE title=左画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444></TD></TR></TBODY></TABLE><TABLE title=左画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE></TD><!--左画轴结束,中间的移动画面开始。--><TD title=第二个单元格 style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px; HEIGHT: 430px"><MARQUEE id=mar3 title=第二个移动标签 style="LEFT: 0px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 behavior=alternate><DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px"><TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD></TR></TBODY></TABLE></DIV></MARQUEE></TD></TR></TBODY></TABLE></DIV>四、放入右画轴以后的效果:代码如下:<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><!--总块区的定位作用是使网页在正常位置,行业资讯不遮蔽“修改”按钮--><TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0><TBODY><TR><!--左画轴开始处--><TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px"><MARQUEE id=mar1 title=第一个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right><DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px"><TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD></TR></TBODY></TABLE></DIV></MARQUEE><!--背景图片的宽度为:690px,高度为:430px。--><TABLE title=左画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444></TD></TR></TBODY></TABLE><TABLE title=左画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE></TD><!--左画轴结束,中间的移动画面开始。--><TD title=第二个单元格 style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px; HEIGHT: 430px"><MARQUEE id=mar3 title=第二个移动标签 style="LEFT: 0px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 behavior=alternate><DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px"><TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD></TR></TBODY></TABLE></DIV></MARQUEE></TD><!--中间的移动画面结束,右画轴开始。--><TD title=第三个单元格 style="Z-INDEX: 100; LEFT: 0px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px"><MARQUEE id=mar2 title=第三个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right><DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px"><TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD><TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD><TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD></TR></TBODY></TABLE></DIV></MARQUEE><TABLE title=右画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE><TABLE title=右画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV><BR><BR><!--两个换行标签的作用是使网页不遮蔽馆方推荐的内容-->制作说明:一、把代码中的图片地址替换为你喜爱的图片地址。图片地址替换以后,图片的高度值与宽度值也应替换。移动屏幕中的高度值也应随着替换。二、每部分代码中都有注释,请您认真阅读,深刻领会各部分代码的作用,仔细观察其显示效果。三、如果有什么不懂的问题,可以给我的图书馆中发送短信询问,我们共同商榷。点击下面的小模块,浏览更多精彩内容:☆代码入门☆精品文章☆精美顶图☆网页特效☆原创作品☆两性保健☆精美边框☆导航菜单☆自然声音☆切割边框☆代码教程☆音画作品☆移动图片☆中医瑰宝“春天没来”撰写2015年3月4日于北京