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