湖边美景（代码综合运用）

一片心花正放时 2016-10-18

展开全文

工作之余，看了高人的作品，很受启发，抽空尝试一下做表格边框及滚动堆叠图片的定位，供新手朋友欣赏，借鉴！

（后附代码及注释）

原图：

2012年08月01日 - 绝岭苍松 - 绝岭苍松

代码：
<TABLE id=table1 title="" style="BORDER-RIGHT: #006600 5px ridge; BORDER-TOP: #006600 5px ridge; LEFT: 0px; BORDER-LEFT: #006600 5px ridge; BORDER-BOTTOM: #006600 5px ridge; POSITION: relative; TOP: 0px" borderColor=#003300 height=650 cellSpacing=0 cellPadding=0 width=890 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_3.jpg border=5>
<TBODY>
<TR>
<TD height=455>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 70; LEFT: 30px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>

代码注释

注：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

position 属性规定元素的定位类型。当Position属性值为absolute时
对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom 的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

代码注释

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

lute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
<TABLE id=table2 style="BACKGROUND-POSITION: 80px 0px" height=240 width=5555 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE title="" style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 30; LEFT: 210px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=450 height=240>

代码注释

移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。

字符移动每步的延时:scrolldelay=# 属性值为数字， #最小为1，数值越大速度越大，反之亦然。

移动方向指令是：direction=# up向上、down向下、left向左、right向右。

属性值为scroll：文字单向移动，side：移动到边界停止，alternate：到边界后反向移动；

align，对齐方式，其属性值为center，left，right，top, middle, bottom，分别表示居中，左对齐，右对齐，对齐上沿、中间、下沿；

bgcolor，移动字符的背景色，属性值为颜色代码，可以是rrggbb 16 进制数码，r=red，g=green， b=blue，也就是色彩中的三原色，也可是预定义色彩；

loop，移动字符的循环次数，属性值为数字，若未指定则循环不止(infinite)；

width及height，文字高度和宽度，以象素为单位，属性值为数字；

hspace字符左右留白长度，属性值为数字；

vspace字符上下留白长度，属性值为数字；

scrollamount字符的移动速度，属性值为数字，数值越大速度越大，反之亦然；