各种竖排文字的效果

此代码只适合本论坛及IE浏览器；若文字靠左排列请点击“相容性”按钮。

代碼:

<CENTER><div style="WIDTH:640px; HEIGHT:427px"><TABLE cellspacing=0 background=http://lrg103.zpcdn.com/0/5956/38124037.b6f068.jpg width=640 height=427><TBODY><TR><TD valign=top><div style="padding-top:20px; padding-right:10px; layout-flow:vertical-ideographic" align=left><div style="FONT-SIZE: 45pt; FONT-FAMILY: 標楷體; COLOR: blue; WIDTH: 400px; height:600px; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">蝶戀花<span style="FONT-SIZE: 22pt"> 印尼大聯歡</span><br><span style="FONT-SIZE: 20pt; LINE-HEIGHT: 130%; COLOR: cyan">綠水青山故鄉好。
闊別回家，白頭神情俏。
風雲歷經總挺腰，
故里仰天會心笑。</span><br><span style="FONT-SIZE: 20pt; LINE-HEIGHT: 130%; COLOR: yellow"> 五五聯歡盛情邀，
 促膝敘舊，往事不勝聊。
 如畫景色香佳餚，
 何幸晚來共此宵。</span>
<span style="FONT-SIZE: 10px; LINE-HEIGHT: 100%; COLOR: yellow">&nbsp;</span>
<div style="padding-left:100px; FONT-SIZE: 14pt; LINE-HEIGHT: 120%; COLOR: cyan">            錢裕銘<br>      二〇一四年六月八日</div>
</div></div></td></tr></tbody></table></div></center>
<br><br>

这是另一种竖排文字的代码，只适合IE浏览器。

代碼:

<center><DIV style="border:1px #0000ff solid; padding:30px; Writing-mode:tb-rl; Text-align:left; font-size:20pt; color:#0000ff; line-height:120%; LEFT: 0px; WIDTH: 680px; POSITION: relative" valign=bottom>花开花落的人间，
曾有的思念。
在那轮回转世中，
注定的姻缘。
烦恼有千万千，
快乐在天外天，
恩恩爱爱多少年，
一朝相对无言。
今生以前我是谁，
今生以后谁是我，
翻手是云，覆手是雨，
喜无常，爱别离，
谁知道朝朝暮暮竟是瞬息。
偶开天眼见红尘，
方知身是眼中人。
若为情爱若为真，
古井水也沸腾。
明明灭灭的人生，
我愿做一盏灯，
温暖你的寒冷，
关照你的一生。</DIV></center>

这是用2#楼帖子的代码制作的竖排效果。

代碼:

<CENTER><div style="WIDTH:640px; HEIGHT:427px"><TABLE cellspacing=0 background=http://lrg103.zpcdn.com/0/5956/38124037.b6f068.jpg width=640 height=427><TBODY><TR><TD valign=top><DIV align=right><div style="padding-top:20px; padding-right:20px; Writing-mode:tb-rl; Text-align:left; POSITION: relative; FONT-SIZE: 45pt; FONT-FAMILY: 標楷體; COLOR: blue; WIDTH: 400px; height:400px; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%" valign=bottom>蝶戀花<span style="FONT-SIZE: 22pt"> 印尼大聯歡</span>
<span style="FONT-SIZE: 20pt; LINE-HEIGHT: 130%; COLOR: cyan">綠水青山故鄉好。
闊別回家，白頭神情俏。
風雲歷經總挺腰，
故里仰天會心笑。</span><br><span style="FONT-SIZE: 20pt; LINE-HEIGHT: 130%; COLOR: yellow"> 五五聯歡盛情邀，
 促膝敘舊，往事不勝聊。
 如畫景色香佳餚，
 何幸晚來共此宵。</span>
<span style="FONT-SIZE: 10px; LINE-HEIGHT: 100%; COLOR: yellow">&nbsp;</span>
<div style="padding-bottom:15px; FONT-SIZE: 14pt; LINE-HEIGHT: 120%; COLOR: cyan" align=right>錢裕銘<br>二〇一四年六月八日</div></div></div></td></tr></tbody></table></div></center>
<br><br>

这是用table制作，此代码只适合IE浏览器，若用Chrome浏览，有些文字有重叠现象，此代码也不适合“老校友”；若在“老校友”张贴此套代码，必须将“綠水青山故鄉好”此句的文字属性里的left:-12px; position:relative删除，文字就不会重叠。此套代码在“老校友”的张贴示例请参阅：http://boanson.orzweb.net/viewthread.php?tid=704&page=1&extra=#pid1163 的7#帖子。

代碼:

<CENTER><div style="WIDTH:640px; HEIGHT:427px"><TABLE cellspacing=0 background=http://lrg103.zpcdn.com/0/5956/38124037.b6f068.jpg width=640 height=427><TBODY><TR><TD style="width:304px"> </TD><TD style="WIDTH: 27px" vAlign=bottom><DIV style="padding-bottom:30px; FONT-SIZE: 14pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">二<BR>〇<BR>一<BR>四<BR>年<BR>六<BR>月<BR>八<BR>日</DIV></TD><TD width=24 vAlign=bottom><DIV style="padding-bottom:30px; FONT-SIZE: 16pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">錢裕銘</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:50px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">何幸晚來共此宵<BR>。</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:50px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">如畫景色香佳餚<BR>，</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:50px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">促膝敘舊<BR>，往事不勝聊<BR>。</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:50px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">五五聯歡盛情邀<BR>，</DIV></TD><TD width=10 vAlign=top><DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: red; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%"> </DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">故里仰天會心笑<BR>。</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">風雲歷經總挺腰<BR>，</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">闊別回家<br>，</DIV></TD><TD width=24 vAlign=top><DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">白頭神情俏<BR>。 </DIV></TD><TD width=24 vAlign=top><DIV style="left:-12px; position:relative; padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 100%">綠水青山故鄉好<BR>。</DIV></TD><TD width=80 vAlign=top><DIV style="padding-top:20px; FONT-SIZE: 45pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: blue; FILTER: shadow(color=indigo); LINE-HEIGHT: 120%">蝶戀花<span style="LINE-HEIGHT: 110%; FONT-SIZE: 22pt"><br>印<BR>尼<BR>大<BR>聯<BR>歡</span></DIV><TD width=12>&nbsp;</TD></TD></TR></TBODY></TABLE></div></CENTER>
<BR><BR>

其他竖排文字的制作方法请移步“老校友”浏览：