代码入门教程（14）

第二章标签应用

第十三节移动图片（5）

本节继续学习图片的移动。下面讲解图片的三种移动标签。要深刻领会标签中的内容，学会应用这些移动标签。

一、向“右上”和 “左上”斜着滚动合并的图片代码：

<tbody>

<tr>

代码解析：

1、上面的代码中，设置了一个宽度为800px高度为400px的一行二列的表格，在表格的两个单元格中，各放入了一个移动图片，一个向“右上”移动，一个向“左上”移动。图片的高度和宽度，设置为移动屏幕高度和宽度的二分之一左右为宜。本代码涉及到表格标签，表格标签的制作，我在以后的相关章节中讲解。

2、单元格中的每个图片，都是用两个移动标签控制。向“右上”移动的图片，用“向上”移动和“向右”移动的移动标签控制；向“左上”移动的图片，用“向上”移动和“向左”移动的移动标签控制。

3、图片标签解析：

<贴图标签 css样式＝“滤镜：透明度（透明度等级＝100 也就是不透明，透明区域形状＝2 也就是放射形）；” 图片路径＝图片地址图片宽度＝250px 图片高度＝250px 类型＝影像>

二、向“左上”和“右上”斜着滚动分开的图片代码：

<tbody>

<tr>

</tr></tbody></table>

代码解析：

1、上面的代码中，设置了一个宽度为800px高度为400px的一行二列的表格，在表格的两个单元格中，各放入了一个移动图片，一个向“左上”移动，一个向“右上”移动。图片的高度和宽度，设置为移动屏幕高度和宽度的二分之一左右为宜。

2、单元格中的每个图片，都是用两个移动标签控制。向“右上”移动的图片，向“左上”移动的图片，用“向上”移动和“向左”移动的移动标签控制；用“向上”移动和“向右”移动的移动标签控制。

3、输入标签解析：

<输入标签 css样式＝“滤镜：透明度（透明度等级＝100 也就是不透明，透明区域形状＝2 也就是放射形）；” 图片路径＝图片地址图片宽度＝250px 图片高度＝250px 类型＝影像>

4、在这里，使用输入标签<input>与贴图标签<img>，效果是一样的。

三、多图片分割移动图代码：

<tbody>

<tr>

代码解析：

1、设置了一个一行五列的表格，表格的每个单元格中放置了一个用移动标签控制的图片。

2、表格的宽度不能小于各个图片宽度之和，表格的高度与各图片的高度要相等。

效果图:

作业：

１、反复阅读上面的三种移动图片代码，思考各个代码所表示的意义。

２、应用上面的三种标签，各制作一篇文章。要替换图片的地址，其它内容自己试着替换一下，并观察替换以后的效果。

3、“多图片分割移动图代码”适合制作小模块，可以添加到图书馆首页，也可以放置到文章中作为小插图或者分割线使用。

2012年11 月6日于北京

第二章标签应用

第十四节移动图片（6）

本节继续学习图片的移动。下面讲解图片的四种移动标签。要深刻领会标签中的内容，学会应用这些移动标签。

展开再消失的图片代码1：

</marquee></marquee>

展开再消失的图片代码2：

</marquee></marquee>

展开再消失的图片代码3：

</marquee></marquee>

展开再消失的图片代码4：

</marquee></marquee>

代码解析：

上面的这四种移动图片代码，都是由两个方向相反的移动标签控制一个图片。其效果是先展开，然后再消失。

作业：

应用上面的四种代码，各制作一篇文章。制作时，替换图片以后，最好把移动标签中的宽度和高度修改得与你使用的图片的宽度和高度相一致。也可以在图片标签中添加与移动标签中相一致的宽度和高度值。添加的代码为：style="width: 475px; height: 680px;" 其位置放置在图片标签名称的后面，图片地址的前面即可。

２０1２年11月 6 日于北京

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。