精美网页代码【5】

direction="right" scrollAmount="2" scrollDelay="1">

　　代码解析：代码：

<div align="center"> <table style="left: 0px; top: 0px; width: 910px; height: 430px;" border="0" cellSpacing="0" borderColor="#f0f0f0" cellPadding="0" bgColor="#f8f8f8"> <tbody> <tr> <td style="left: 1px; top: 0px; width: 100px; height: 430px; position: relative; z-index: 1;"> <marquee style="left: 0px; top: 0px; width: 100px; height: 430px; position: absolute;" id="mar1"  direction="right" scrollAmount="2" scrollDelay="1"> <div style="left: 0px; top: 0px; width: 2760px; height: 430px;" class="divBorderStyleRelative"> <table style="left: 0px; top: 0px; width: 2760px; height: 430px;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"> </td> <td style="width: 690px; filter: FlipH();" 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="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"> </td></tr></tbody></table></div></marquee> <table style="left: 0px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="filter: alpha(opacity=80,finishOpacity=0,style=1);" bgColor="#444444"> </td></tr></tbody></table> <table style="left: 50px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="filter: alpha(opacity=0,finishOpacity=85,style=1);" bgColor="#444444"> </td></tr></tbody></table></td> <td style="left: 0px; top: 0px; width: 800px; height: 430px; position: relative;"> <marquee style="left: 0px; top: 0px; width: 800px; height: 430px; position: absolute;" id="mar3" behavior="alternate" scrollAmount="2" scrollDelay="1"> <div style="left: 0px; top: 0px; width: 2760px; height: 430px;" class="divBorderStyleRelative"> <table style="left: 0px; top: 0px; width: 2760px; height: 430px;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="width: 690px; filter: FlipH();" 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="width: 690px; filter: FlipH();" 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 style="left: 0px; top: 0px; width: 600px; height: 430px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="width: 50px; filter: alpha(opacity=20,finishOpacity=0,style=1);" bgColor="#444444">　</td> <td style="width: 750px;">　</td></tr></tbody></table></td> <td style="left: 0px; top: 0px; width: 100px; height: 430px; position: relative; z-index: 100;"> <marquee style="left: 0px; top: 0px; width: 100px; height: 430px; position: absolute;" id="mar2" direction="right" scrollAmount="2" scrollDelay="1"> <div style="left: 0px; top: 0px; width: 2760px; height: 430px;" class="divBorderStyleRelative"> <table style="left: 0px; top: 0px; width: 2760px; height: 430px;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="width: 690px; filter: FlipH();" 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="width: 690px; filter: FlipH();" 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 style="left: 0px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="filter: alpha(opacity=80,finishOpacity=0,style=1);" bgColor="#444444"> </td></tr></tbody></table> <table style="left: 50px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td style="filter: alpha(opacity=0,finishOpacity=85,style=1);" bgColor="#444444"> </td></tr></tbody></table></td></tr></tbody></table></div>

　　代码解析：

　　1、上面的代码是一个非常漂亮的移动图片代码。

　　代码中设置了一个一行三列的表格。

　　表格的第一个单元格是宽度为100px的单元格，单元格中有三个内容：

　　第一个内容是移动标签控制的块区。块区中放入了一个一行四列的表格，表格的每个单元格中都设置了一个相同地址的背景图片，其中第一个图片与第三个图片是普通图片，　第二个图片与第四个图片是水平翻转图片。

　　第二个内容是一个一行一列的表格。表格的列标签中设置了一个羽化滤镜的颜色条框。

　　第三个内容也是一个一行一列的表格。表格的列标签中也设置了一个羽化滤镜的颜色条框。

　　表格的第二个单元格是宽度为800px的单元格，单元格中有两个内容：

　　第一个内容是移动标签控制的块区。块区中放入了一个一行四列的表格，表格的每个单元格中都设置了一个相同地址的背景图片，其中第一个图片与第三个图片是普通图片，第二个图片与第四个图片是水平翻转图片。

　　第二个内容是一个一行二列的表格。第一个单元格为宽度50px的羽化滤镜颜色条框，第二个单元格为宽度550px的空单元格。

　　表格的第三个单元格是宽度为100px的单元格，单元格中的内容与表格的第一个单元格内容相同。

　　2、每个单元格中设置了相对定位代码，单元格中的内容处都设置了绝对定位代码，这就确定了放置这些内容的参考点为该单元格左上角的起点处。这一点非常重要，如果设置不对定位代码，内容就不能正常显示。