【聊代码】第十六集：移动标签（之四）|老小孩博文

       代码：＜table border="15" bordercolor="marroon" class="ke-zeroborder" height="550" width="720"＞ ＜tbody＞ ＜tr＞ ＜td background="http://img1.oldkids.cn/upload/2017/11/08/blog_20171108141725512.jpg"＞＜marquee scrollamount="3" width:650px=""＞ ＜span style="font-family:黑体;color:red;font-size:30px;"＞横列式滚动字幕＜/span>＜/marquee＞ ＜p align="center"＞＜marquee direction="up" height="390" scrollamount="2" scrolldelay="100" style="width:600px;height:390px;" width="600"＞＜br /＞ ＜strong＞＜span style="font-family:楷体_GB2312;color:#ff00ff;font-size:30px;"＞        静翠湖＜br /＞ ＜br /＞ ＜br /＞   静翠湖在香山公园东门内左侧，唯其南＜br /＞ ＜br /＞ 面峰高，西，北两面为缓坡，东面为下坡。＜br /＞ ＜br /＞ 湖西 畔有对瀑亭，岩壁上流下的泉水，经＜br /＞ ＜br /＞ 亭下淌入湖中。湖如盆底，四周树木苍翠，＜br /＞ ＜br /＞ 湖平若 镜，尤其秋季，万物色彩斑斓，如＜br /＞ ＜br /＞ 诗如画。 此处为静宜园二十八景之一。＜br /＞ ＜br /＞ ＜br /＞ ＜br /＞     乱石悬水声溅溅，＜br /＞ ＜br /＞     高杪喧莺语关关。＜br /＞ ＜br /＞     对瀑亭下泉隐隐，＜br /＞ ＜br /＞     静湖环翠绿芊芊。＜br /＞ ＜br /＞ ＜strong＞＜span style="font-family:楷体_GB2312;color:#ff00ff;font-size:30px;"＞        ——海特行者＜/span＞＜/strong＞＜/span＞＜/span＞＜/strong＞＜/marquee＞＜/p＞ ＜/td＞ ＜/tr＞ ＜/tbody＞ ＜/table＞

 

       代码解析：这是使用向上移动的最简单标签，多行文字，加个换行标签＜br /＞可换行，多加则增大行距。在文字前或文字间加代码可在字前留空位和扩大字间间隙，数目不限，加的越多，空位或间隙越大。

 

       （十六）竖列式滚动字幕：

 

竖列式滚动字幕      紫薇花（二首）    红 薇 恣 意 开，    不 由 东 君 主。    独 恋 三 伏 日，    开 遍 满 京 都。    繁 枝 凌 夏 暑，    赤 体 傲 冬 寒。    轻 风 摇 作 舞，    一 笑 百 天 欢。

 

       代码：＜table border="15" bordercolor="marroon" class="ke-zeroborder" height="550" width="720"＞ ＜tbody＞ ＜tr＞ ＜td background="http://image109.360doc.com/DownloadImg/2018/06/0321/134781602_2_20180603090521441.jpg"＞ ＜p＞ ＜/p＞ ＜p＞ ＜/p＞ ＜marquee scrollamount="3" style="width: 650px;" width="650px"＞ ＜span style="font-family:黑体;color:red;font-size:30px;">竖列式滚动字幕＜/span>＜/marquee ＞＜marquee direction="right" scrollamount="3" style="width:680px;height:350pt;"＞ ＜div style="writing-mode:tb-rl;"＞＜span style="font-size:30px;color:yellow;">     紫薇花（二首）＜br /＞ ＜br /＞ ＜br /＞ ＜span style="font-size:40px;color:yellow;">   红 薇 恣 意 开，＜br /＞ ＜br /＞    不 由 东 君 主。＜br /＞ ＜br /＞    独 恋 三 伏 日，＜br /＞ ＜br /＞    开 遍 满 京 都。＜br /＞ ＜br /＞ ＜br /＞ ＜br /＞ ＜br /＞    繁 枝 凌 夏 暑，＜br /＞ ＜br /＞    赤 体 傲 冬 寒。＜br /＞ ＜br /＞    轻 风 摇 作 舞，＜br /＞ ＜br /＞    一 笑 百 天 欢。 ＜/span＞＜/span＞＜/div＞ ＜/marquee＞＜/td＞ ＜/tr＞ ＜/tbody＞ ＜/table＞

 

       代码解析： 因为有文字竖列式标签＜div style="FONT-SIZE: 30pt; WIDTH: 688px; WRITING-MODE: tb-rl; HEIGHT: 188px; TEXT-ALIGN: left"＞文字竖式排列代码＜/div＞，所以文字才能竖式排列。tb表示文字从上到下排列；rl表示字行从右向左排列。

 

       通过对以上几种文字移动效果的讨论，我们可以得出这样的结论：利用移动属性属值（移动方式、移动方向、移动速度、移动范围）的变化以及它们之间的配合会产生各式各样的效果。希望初学代码的朋友更要多多练习，只要掌握了要领，一定能搞出别有趣味的新东西来，这对后面探讨图片移动是有帮助的。