上一节讲解了20种常用的移动文字与移动图片。这些方法是制作移动网页的基础，希望朋友们深刻领会，努力把它们学会学好。
本节讲解的内容，有“移动文字”，也有“移动图片”。其中，绝大部分还是常用的移动网页方式，也应该学会，能够用这些方法制作移动网页。
一、有边框的移动文字
给移动文字添加个边框，效果就好多了，不再有光秃秃的感觉了。
看下面的两篇代码，比较一下有什么不同的地方，显示效果又有何不同。（提示：把代码从有滚动条的边框中“复制”出来，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中“发表”，就能够查看“代码”，观察网页的显示“效果”了。） 代码1：
代码2：
代码解析：
“代码1”，移动标签在最外围。用“移动标签”控制“块区标签”，控制每一个“链接标签”、每一个“强调标签”、每一个“文字标签”和“文字内容”。
移动屏幕的宽度为700px，高度“缺省”（就是不设置高度，采用系统默认的高度。）。
块区标签中设置了四条边框线的颜色、宽度与样式。边框线的设置是从下边框开始，按顺时针方向设置的。即：下边框→左边框→上边框→右边框。
块区标签中设置了2350px的宽度，以保证文字内容真好放下。
显示效果：
边框线连同文字都在移动屏幕中移动。因此，在移动过程的中途，只能够看到上下边框线，而看不到左右边框线。
“代码2”，块区标签在最外围。用“块区标签”控制“移动标签”，控制每一个“链接标签”、每一个“强调标签”、每一个“文字标签”和“文字内容”。
块区标签中设置了四条边框线的颜色、宽度与样式。边框线的设置是从下边框开始，按顺时针方向设置的。即：下边框→左边框→上边框→右边框。块区标签中设置了700px的宽度。
移动标签的属性一律缺省，采用系统默认的属性。也就是说，“移动方向”为“向左”移动，“移动速度”为“6”，移动屏幕的“宽度”为“700px”，“高度”为“文字的行高”。
显示效果：
文字在边框中移动。因此，在移动过程的始终，都能够看到四条边框线。 二、有背景颜色的移动文字
代码：
背景颜色：style="BACKGROUND-COLOR: #88ff88"，可以设置在“块区标签”中，也可以设置在“移动标签”中。
三、有背景图片的移动文字
背景图片：style="BACKGROUND: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg)"，可以设置在“块区标签”中，也可以设置在“移动标签”中。
四、有自定义鼠标指针的移动文字
代码：
自定义鼠标指针：style="BACKGROUND: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg); CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani
), auto" 五、有css定位样式的移动文字
代码：
css定位样式：
style="POSITION: absolute; WIDTH: 700px; TOP: 100px; LEFT: 0px"
六、“进进退退”的文字
“进进退退”的文字是用两个移动标签控制文字内容。第一个移动标签设置“来回走”的移动方式，第二个移动标签设置“移动屏幕宽度”（“移动屏幕的宽度”要设置得小一点）。其余的属性都可以“缺省”。
代码：
<MARQUEE behavior=alternate>
<MARQUEE width=150><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 15pt">我的效果，进进退退。</FONT></MARQUEE></MARQUEE> 七、“跳着前进”的文字
“跳着前进”的文字，应用了移动标签“延时属性”的特点，把“移动速度”与“间隔时间”都设置得非常大，制作成为一种特殊的移动文字效果。
代码：
<MARQUEE scrollAmount=100 scrollDelay=500><FONT style="FONT-SIZE: 32px" color=#ff0000><STRONG>跳着向前进</STRONG></FONT></MARQUEE>
八、飞舞的文字：
设置要点：
“飞舞”的文字，用8个“向上”移动的移动标签“分别”控制一行文字。移动标签中设置了“来回走”的移动方式，设置了“移动屏幕的高度与宽度”。相邻的两个移动标签，移动屏幕的高度不同。
然后，把这些内容放置到一个设置了“向右移动的”、“来回走”移动方式的移动标签中。
把以上内容都放置到“设置了背景颜色的表格中”。（“表格标签”，在以后的教程中我专门讲解。）
“飞舞”的文字，并没有设置“竖排版的样式”，却制作出了竖排版的效果。其要点是：8个“向上”移动的移动标签的“移动屏幕宽度”设置得非常小，只有40px的宽度，真好容纳一个文字。“飞舞”的文字，代码中应用了“英语名称”颜色，你也可以把它修改为“十六进制”颜色。
“英语名称”颜色，请你参阅我整理收藏的这篇文章：http://www.360doc.com/content/13/0703/17/4127803_297406586.shtml
“飞舞”的文字代码：
九、神奇的移动标签：
这是一篇特效移动文字！所以有此特效的道理，我也说不清楚。你来观赏一下吧。如果你感兴趣，就探讨探讨。
十、竖排版移动文字：
这是DLLC1234老师制作的一篇竖排版移动文字，效果非常美！
代码：
“竖排版”移动文字，是用两个移动标签共同控制几行文字内容。第一个移动标签中要设置：移动屏幕的宽度与高度、滑动一次的移动方式与延时属性。移动方向为“向左”移动（可以缺省），移动速度为“1”，延时属性为100。
第二个移动中要设置：移动屏幕的宽度与高度，延时属性，移动方向（向上），移动速度（一般设置为“1”），还可以设置“行高”与“字距”等属性。文字要用“居左对齐”的“段落标签”或者“块区标签”控制。
注意：
1、第一个移动标签中的移动方向必须是“向左”，移动次数只能是“一次”。
2、第二个移动标签中必须设置竖排版样式：style="WRITING-MODE: tb-rl; 移动方向必须是“向上”。移动标签中设置了竖排版样式，“移动方向”与“移动文字”就顺时针旋转90度了。“向上”移动的实际效果就变为“向右”移动了；文字也有横排版变为竖排版了。横排版文字的排版顺序是：“从左到右，从上到下。”而竖排版文字的排版顺序是：从右到左，从上到下。
3、文字内容放在了“居左”对齐的段落中，实际效果则变为“居上”对齐了。
网页地址：
十一、有边框的移动图片
有边框的移动图片可用三种形式表示：
代码1：
代码2：
代码3：
“代码1”把边框设置在了“移动标签”中，“代码2”把边框设置在了“图片标签”中，“代码3”把边框设置在了“块区标签”中。
十二、有“背景颜色”的移动图片
有“背景颜色”的移动图片，移动屏幕的“高度”要比图片的“高度”设置得大一些，并且在移动标签中要设置LINE-HEIGHT: 420px属性，其属值要与移动屏幕的高度相同。因为大部份图片都不是透明的，如果移动屏幕的高度与图片的高度相同，则显示不出“背景颜色”，设置“背景颜色”也就无意义了。
如果想把移动屏幕的高度与图片的高度设置得相同，那么，在图片标签中就应该添加“羽化滤镜”样式了。（有关“滤镜”的内容，我将在以后的《教程》中专门讲解。）
代码：
十三、有“背景图片”的移动图片 有“背景图片”的移动图片，移动屏幕的“高度”要比图片的“高度”设置得大一些，并且在移动标签中要设置LINE-HEIGHT: 420px属性，其属值要与移动屏幕的高度相同。因为大部份图片都不是透明的，如果移动屏幕的高度与图片的高度相同，则显示不出“背景图片”，设置“背景图片”也就无意义了。
如果想把移动屏幕的高度与图片的高度设置得相同，那么，在图片标签中就应该添加“羽化滤镜”样式了。 代码：
十四、有“自定义鼠标指针”的移动图片 有“自定义鼠标指针”的移动图片，在移动标签中添加：style="CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani ), auto"代码即可。
代码：
<MARQUEE style="CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani
), auto"><IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width=250> <IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=250> <IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width=250> <IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width=250></MARQUEE> 十五、有css定位样式的移动图片 把css定位样式：style="POSITION: absolute; WIDTH: 740px; TOP: 150px; LEFT: 50px" ，添加到移动标签中即可。
代码：
<MARQUEE style="POSITION: absolute; WIDTH: 740px; TOP: 150px; LEFT: 50px"><IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width=250> <IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=250> <IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width=250> <IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width=250></MARQUEE>
十六、“进进退退”的图片 “进进退退”的图片，用两个移动标签控制图片。第一个移动标签设置“来回走”的移动方式，第二个移动标签设置移动屏幕的“宽度”，其余的属性都可以缺省。
代码：
<MARQUEE behavior=alternate>
<MARQUEE width=258><IMG style="WIDTH: 258px; HEIGHT: 110px" alt=汽车火车飞机 src="http://image55.360doc.com/DownloadImg/2012/11/1118/28154211_1.jpg"></MARQUEE></MARQUEE> 十七、“跳着前进”的图片
“跳着前进”的图片设置要点同“跳着前进”的文字。
代码：
<MARQUEE direction=right scrollAmount=100 scrollDelay=500><IMG alt=“春天没来”欢迎您 src="http://image27.360doc.com/DownloadImg/2011/04/2414/11183843_1.gif"></MARQUEE>
十八、飞舞的图片
“飞舞”的文字设置要点：
“飞舞”的文字，用6个“向上”移动的移动标签“分别”控制一个小图片。移动标签中设置了“来回走”的移动方式，设置了“移动屏幕的高度与宽度”。相邻的两个移动标签，移动屏幕的高度不同。
然后，用一个设置了“向右移动的”、有“来回走”移动方式的移动标签控制这些内容。
最后，把以上内容都放置到“设置了背景颜色的表格中”。 代码：
十九、摇摇摆摆的图片 “摇摇摆摆”的图片设置要点：
“摇摇摆摆”的图片设置了三套移动标签。最外层的移动标签控制着所有的内容；中间的移动标签控制着最里层的移动标签及其所控制的内容，还控制着两个小图片与“美好祝福送朋友”的文字内容；最里层的移动标签控制着分为两行的四个小图片。
代码：
二十、向左展开后向右移动的图片
“向左展开后向右移动”的图片，是根据“竖排版移动文字”代码修改的一种移动图片。尽管“css的竖排版样式”对“图片”不起作用，然而对“移动方向”还是起作用的，也不失为是一种很美的移动图片形式。
代码：
作业：
1、“解析代码”是学习代码，认识“网页代码结构”的重要方法，也是学习代码的一种基本功。学好这种方法，就能够分析别人制作的网页的代码结构，借鉴别人制作网页的方法。本题作业为：解析上面的20种网页代码，继续熟悉标签名称，熟悉所用标签的属性属值，体会它们的显示效果。
2、解析上面的20种网页代码标签应用顺序，认识网页的代码结构。
3、挑选上面讲解的你基本上能够弄懂的几种网页代码，各自制作一篇移动网页。在实践的过程中，总结你制作网页的成功经验与失败教训，体会应用代码制作网页的无穷乐趣。
4、把你不懂的问题记录下来，存入一个文件夹，待你有了一定的代码水平之后，再回过头来学习一下，看看你学习代码进步的历程。
兴趣是最好的老师，兴趣是通向成功的桥梁。学习代码何尝不是如此！如果你对代码有浓厚的兴趣，就会在反复不断的学习实践过程中取得一个又一个的成功，终究会迈入代码的门槛；如果你对代码没有兴趣，即使有再好的教材，有再好的老师，又能起到多大的作用呢？ ——“春天没来” “春天没来”编撰
2014年4月21日于北京
|
|
|
%22%3E%3CA){kind=link}
