卷轴画，这种漂亮的网页形式，许多朋友都喜欢。下面，以我制作的这篇卷轴画为例，讲解一下应用代码制作卷轴画的方法。
制作方法：
设置一个一行三列的表格,放入有定位样式的块区标签中。表格的第一个单元格中放入卷轴画的左画轴，第二个单元格中放入卷轴画的主体内容，第三个单元格放入卷轴画的右画轴。各步骤的显示修改与代码如下：
一、一行三列的表格放入块区标签中的效果：
代码如下：
<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日于北京
