免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
返回列表 發帖

Rank: 1
1# 跳轉到 » 倒序看帖
打印
tT
rainbow發表於 2014-6-11 21:18 | 只看該作者

各种竖排文字效果

本帖最後由 rainbow 於 2019-3-22 10:05 編輯
竖排文字的效果（一）

（此代码只适合本论坛及IE浏览器）

蝶戀花 印尼大聯歡
綠水青山故鄉好。
闊別回家，白頭神情俏。
風雲歷經總挺腰，
故里仰天會心笑。
 
 五五聯歡盛情邀，
 促膝敘舊，往事不勝聊。
 如畫景色香佳餚，
 何幸晚來共此宵。
                錢裕銘
          二〇一四年六月八日










收藏 分享

Rank: 1
2#
rainbow發表於 2014-6-11 21:23 | 只看該作者
本帖最後由 rainbow 於 2014-6-11 23:39 編輯

1#帖子的代码：
<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:20px; 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: 110%; COLOR: cyan">
綠水青山故鄉好。<br>
闊別回家，白頭神情俏。<BR>
風雲歷經總挺腰，<BR>
故里仰天會心笑。</span><BR>
<span style="FONT-SIZE: 10px; LINE-HEIGHT: 100%; COLOR: yellow">&nbsp;</span><br>
<span style="FONT-SIZE: 20pt; LINE-HEIGHT: 120%; COLOR: yellow">
&emsp;五五聯歡盛情邀，<BR>
&emsp;促膝敘舊，往事不勝聊。<BR>
&emsp;如畫景色香佳餚，<BR>
&emsp;何幸晚來共此宵。</span><BR>
<span style="FONT-SIZE: 14pt; LINE-HEIGHT: 120%; COLOR: cyan">&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;錢裕銘</span><br>
<span style="LINE-HEIGHT: 100%; FONT-SIZE: 14pt; COLOR: cyan">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;二〇一四年六月八日</span>
</div></div>
</td></tr></tbody></table>
</div>
</center>
<br><br>

TOP

Rank: 1
3#
rainbow發表於 2014-6-11 23:18 | 只看該作者

网页制作使用的竖排文字代码

本帖最後由 rainbow 於 2017-11-27 00:25 編輯

网页制作使用的竖排文字代码

TOP

Rank: 1
4#
rainbow發表於 2014-6-11 23:33 | 只看該作者
本帖最後由 rainbow 於 2014-6-11 23:37 編輯

3#帖子的网页代码：


注意：此代码不可直接贴到论坛上，必须先做成网页，再用网页转贴代码iframe贴上。

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>竖排文字效果</title>
  5. </head>
  6. <body>
  7. <div align="center" style="height: 80px; color: #E9967A; line-height: 1.5em; font-size: 40pt; font-weight: bold; filter: shadow(color=#800000,direction=135,strength=10);">竖排文字的效果</div>
  8. <p style="text-indent:40px" align=center><font size=5 color=#8000000><b>此代码只适合网页制作及IE浏览器，不适合论坛直接使用。</b></font></p>
  9. <CENTER><div style="WIDTH:640px; HEIGHT:427px"><TABLE cellspacing=0 background=http://lrg103.zpcdn.com/0/5956/38124037.b6f068.jpg width=640 height=427>
  10. <TBODY>
  11. <TR>
  12. <TD>
  13. <div style="padding-top:20px; padding-right:20px; layout-flow:vertical-ideographic">
  14. <div style="FONT-SIZE: 45pt; FONT-FAMILY: 標楷體; COLOR: blue; WIDTH: 400px; height:600px; FILTER: shadow(color=indigo); LINE-HEIGHT: 60%">蝶戀花<span style="FONT-SIZE: 22pt"> 印尼大聯歡</span><br><br>
  15. <span style="FONT-SIZE: 20pt; COLOR: cyan">
  16. 綠水青山故鄉好。<br>
  17. 闊別回家，白頭神情俏。<BR>
  18. 風雲歷經總挺腰，<BR>
  19. 故里仰天會心笑。</span><BR>
  20. <span style="FONT-SIZE: 20pt; COLOR: yellow">
  21. 五五聯歡盛情邀，<BR>
  22. 促膝敘舊，往事不勝聊。<BR>
  23. 如畫景色香佳餚，<BR>
  24. 何幸晚來共此宵。</span><BR>
  25. <span style="FONT-SIZE: 14pt; COLOR: cyan">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;錢裕銘</span><br>
  26. <span style="LINE-HEIGHT: 110%; FONT-SIZE: 14pt; COLOR: cyan">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;二〇一四年六月八日</span>
  27. </div></div>
  28. </td></tr></tbody></table>
  29. </div>
  30. </center>
  31. </body>
  32. </html>
  33. <br><br>
複製代碼

TOP

Rank: 1
5#
rainbow發表於 2014-6-12 00:26 | 只看該作者

另一种竖排文字代码

本帖最後由 rainbow 於 2014-6-12 08:35 編輯
竖排文字的效果（二）

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

花开花落的人间，
曾有的思念。
在那轮回转世中，
注定的姻缘。
烦恼有千万千，
快乐在天外天，
恩恩爱爱多少年，
一朝相对无言。
今生以前我是谁，
今生以后谁是我，
翻手是云，覆手是雨，
喜无常，爱别离，
谁知道朝朝暮暮竟是瞬息。
偶开天眼见红尘，
方知身是眼中人。
若为情爱若为真，
古井水也沸腾。
明明灭灭的人生，
我愿做一盏灯，
温暖你的寒冷，
关照你的一生。


代码：

  1. <center>
  2. <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>
  3. 花开花落的人间，<BR>
  4. 曾有的思念。<BR>
  5. 在那轮回转世中，<BR>
  6. 注定的姻缘。<BR>
  7. 烦恼有千万千，<BR>
  8. 快乐在天外天，<BR>
  9. 恩恩爱爱多少年，<BR>
  10. 一朝相对无言。<BR>
  11. 今生以前我是谁，<BR>
  12. 今生以后谁是我，<BR>
  13. 翻手是云，覆手是雨，<BR>
  14. 喜无常，爱别离，<BR>
  15. 谁知道朝朝暮暮竟是瞬息。<BR>
  16. 偶开天眼见红尘，<BR>
  17. 方知身是眼中人。<BR>
  18. 若为情爱若为真，<BR>
  19. 古井水也沸腾。 <BR>
  20. 明明灭灭的人生，<BR>
  21. 我愿做一盏灯，<BR>
  22. 温暖你的寒冷，<BR>
  23. 关照你的一生。</DIV></center>
  24. <br><br>
複製代碼

TOP

Rank: 1
6#
rainbow發表於 2014-6-12 08:08 | 只看該作者
本帖最後由 rainbow 於 2019-3-22 10:07 編輯

这是用5#楼帖子的代码制作的竖排效果。
（请用IE浏览器）

蝶戀花 印尼大聯歡
綠水青山故鄉好。
闊別回家，白頭神情俏。
風雲歷經總挺腰，
故里仰天會心笑。
 
 五五聯歡盛情邀，
 促膝敘舊，往事不勝聊。
 如畫景色香佳餚，
 何幸晚來共此宵。
錢裕銘
二〇一四年六月八日


  1. <CENTER>
  2. <div style="WIDTH:640px; HEIGHT:427px"><TABLE cellspacing=0 background=http://lrg103.zpcdn.com/0/5956/38124037.b6f068.jpg width=640 height=427>
  3. <TBODY>
  4. <TR>
  5. <TD valign=top>
  6. <DIV align=right>
  7. <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><br>
  8. <span style="FONT-SIZE: 20pt; LINE-HEIGHT: 110%; COLOR: cyan">
  9. 綠水青山故鄉好。<br>
  10. 闊別回家，白頭神情俏。<BR>
  11. 風雲歷經總挺腰，<BR>
  12. 故里仰天會心笑。</span><BR>
  13. <span style="FONT-SIZE: 10px; LINE-HEIGHT: 100%; COLOR: yellow">&nbsp;</span><br>
  14. <span style="FONT-SIZE: 20pt; LINE-HEIGHT: 120%; COLOR: yellow">
  15. &emsp;五五聯歡盛情邀，<BR>
  16. &emsp;促膝敘舊，往事不勝聊。<BR>
  17. &emsp;如畫景色香佳餚，<BR>
  18. &emsp;何幸晚來共此宵。</span><BR>
  19. <div style="padding-bottom:15px; FONT-SIZE: 14pt; LINE-HEIGHT: 120%; COLOR: cyan" align=right>錢裕銘<br>二〇一四年六月八日</div>
  20. </div></div>
  21. </td></tr></tbody></table>
  22. </div>
  23. </center>
  24. <br><br>
複製代碼

TOP

Rank: 1
7#
rainbow發表於 2014-6-12 13:06 | 只看該作者
本帖最後由 rainbow 於 2019-3-22 10:04 編輯
竖排文字的效果（三）

这是用table制作，代码只适合本论坛，可使用IE和chrome浏览器。


 
二
〇
一
四
年
六
月
八
日
錢裕銘
何幸晚來共此宵
。
如畫景色香佳餚
，
促膝敘舊
，往事不勝聊
。
五五聯歡盛情邀
，
 
故里仰天會心笑
。
風雲歷經總挺腰
，
闊別回家，白頭神情俏
。
綠水青山故鄉好
。
 
蝶戀花印
尼
大
聯
歡
 


  1. <CENTER>
  2. <div style="WIDTH:640px; HEIGHT:427px">
  3. <TABLE cellspacing=0 background=http://lrg103.zpcdn.com/0/5956/38124037.b6f068.jpg width=640 height=427>
  4. <TBODY>
  5. <TR>
  6. <TD width=280>&nbsp;</TD>
  7. <TD style="WIDTH: 27px" vAlign=bottom>
  8. <DIV style="padding-bottom:30px; FONT-SIZE: 14pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">二<BR>〇<BR>一<BR>四<BR>年<BR>六<BR>月<BR>八<BR>日</DIV></TD>
  9. <TD width=22 vAlign=bottom>
  10. <DIV style="padding-bottom:30px; FONT-SIZE: 16pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">錢裕銘</DIV></TD>
  11. <TD width=24 vAlign=top><BR>
  12. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">何幸晚來共此宵<BR>。</DIV></TD>
  13. <TD width=24 vAlign=top><BR>
  14. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">如畫景色香佳餚<BR>，</DIV></TD>
  15. <TD width=24 vAlign=top><BR>
  16. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">促膝敘舊<BR>，往事不勝聊<BR>。</DIV></TD>
  17. <TD width=24 vAlign=top><BR>
  18. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: yellow; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">五五聯歡盛情邀<BR>，</DIV></TD>
  19. <TD width=5 vAlign=top>
  20. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: red; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">&nbsp;</DIV></TD>
  21. <TD width=24 vAlign=top>
  22. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">故里仰天會心笑<BR>。</DIV></TD>
  23. <TD width=24 vAlign=top>
  24. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">風雲歷經總挺腰<BR>，</DIV></TD>
  25. <TD width=24 vAlign=top>
  26. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">闊別回家，白頭神情俏<BR>。 </DIV></TD>
  27. <TD width=24 vAlign=top>
  28. <DIV style="padding-top:20px; FONT-SIZE: 20pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: cyan; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">綠水青山故鄉好<BR>。 </DIV></TD>
  29. <TD width=10>&nbsp;</TD>
  30. <TD width=60 vAlign=top>
  31. <DIV style="padding-top:20px; FONT-SIZE: 45pt; FONT-FAMILY: 標楷體; WIDTH: 100%; COLOR: blue; FILTER: shadow(color=indigo); LINE-HEIGHT: 110%">蝶戀花<span style="FONT-SIZE: 22pt">印<BR>尼<BR>大<BR>聯<BR>歡</span></DIV>
  32. <TD width=12>&nbsp;</TD>
  33. <BR>
  34. </TD></TR></TBODY></TABLE>
  35. </div></CENTER>
  36. <br><br>
複製代碼


说明：此代码只适合本论坛，若贴到“新栏目”除了必须将代码连起来外，还必须在“綠水青山故鄉好”这句的文字属性里，加上left:-12px; position:relative来调整位置。具体代码示例请浏览： http://bazhong5069.868cn.net/t2579-topic#6237

TOP

Rank: 1
8#
rainbow發表於 2014-6-12 17:46 | 只看該作者
本帖最後由 rainbow 於 2017-11-27 00:32 編輯

网页制作使用的竖排文字代码

TOP

Rank: 1
9#
rainbow發表於 2014-6-12 18:36 | 只看該作者

8#帖子的网页代码：


注意：此代码不可直接贴到论坛上，必须先做成网页，再用网页转贴代码iframe贴上。

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>兼容IE和Chrome的竖排文字效果</title>
  5. </head>
  6. <body>
  7. <style>
  8. .vertical_text {-webkit-writing-mode: vertical-rl;writing-mode: tb-rl;}
  9. .vertical_text p {margin-right: 25px;}
  10. .horizontal_text {-webkit-writing-mode: horizontal-tb;}
  11. </style>
  12. <div align="left" style="height: 80px; color: #E9967A; line-height: 1.5em; font-size: 36pt; font-family:trebuchet ms; font-weight: bold;
  14. filter: shadow(color=#800000,direction=135,strength=10);">兼容IE和Chrome的竖排文字效果</div>
  15. <p style="text-indent:50px" align=left><font size=5 color=#ff3333><b>此网页代码只适合网页制作，不可直接贴到论坛。</b></font></p>
  16. <div id="write_mode_test" class="vertical_text">
  17. <DIV style="border:1px #0000ff solid; padding:30px; Text-align:left; font-size:20pt; font-weight:bold; color:#0000ff; line-height:120%; LEFT:
  19. 0px; WIDTH:680px; POSITION: relative" valign=bottom>
  20. <pre>
  21. 花开花落的人间，
  22. 曾有的思念。
  23. 在那轮回转世中，
  24. 注定的姻缘。
  25. 烦恼有千万千，
  26. 快乐在天外天，
  27. 恩恩爱爱多少年，
  28. 一朝相对无言。
  29. 今生以前我是谁，
  30. 今生以后谁是我，
  31. 翻手是云，覆手是雨，
  32. 喜无常，爱别离，
  33. 谁知道朝朝暮暮竟是瞬息。
  34. 偶开天眼见红尘，
  35. 方知身是眼中人。
  36. 若为情爱若为真，
  37. 古井水也沸腾。
  38. 明明灭灭的人生，
  39. 我愿做一盏灯，
  40. 温暖你的寒冷，
  41. 关照你的一生。
  42. </pre>
  43. </DIV>
  44. </div>
  45. </body>
  46. </html>
複製代碼

TOP

Rank: 1
10#
rainbow發表於 2014-6-13 11:20 | 只看該作者
本帖最後由 rainbow 於 2014-6-13 13:43 編輯

以上是从网上收集的几种竖排文字制作代码，绝大部分代码无法与IE和Chrome浏览器兼容；加上不同网站的兼容性和网站内定的行距问题各不相同，因此在不同网站上使用代码都必须从新调试参数；用做成网页的方法再转贴到论坛上比较方便。


5#帖子介绍的用Writing-mode:tb-rl的方法最简单易做，但就只能用IE浏览器浏览，无法与Chrome浏览器兼容。9#的代码是经过改进的同类代码，此套代码不能与论坛系统兼容，必须做成网页转贴。做出的网页虽然都可以在IE和Chrome显示竖排效果，但必须经过多次调试才能兼顾到两个浏览器的文字不同的定位问题。多种代码的制作效果来说没有一个是十全十美的，

TOP

Rank: 1
11#
rainbow發表於 2014-6-13 13:50 | 只看該作者
本帖最後由 rainbow 於 2014-6-13 17:16 編輯

这是用9#帖子的代码制作的，几经调试终于做出了可兼容IE和Chrome浏览器的竖排效果。


注意：网页代码不可直接贴到论坛上，必须先做成网页，再用网页转贴代码iframe贴上。

TOP

Rank: 1
12#
rainbow發表於 2014-6-19 13:16 | 只看該作者
本帖最後由 rainbow 於 2014-6-19 15:04 編輯

直接用代码将预先经《在线竖排转换器》转换得来的竖排文字套入背景图片的效果：

　 　 　 关 温 我 明 古 若 方 偶 　 谁 喜 翻 今 今 一 恩 快 烦 注 在 曾 花 
　 　 　 照 暖 愿 明 井 为 知 开 　 知 无 手 生 生 朝 恩 乐 恼 定 那 有 开 
　 　 　 你 你 做 灭 水 情 身 天 　 道 常 是 以 以 相 爱 在 有 的 轮 的 花 
　 　 　 的 的 一 灭 也 爱 是 眼 　 朝 ， 云 后 前 对 爱 天 千 姻 回 思 落 
　 　 　 一 寒 盏 的 沸 若 眼 见 　 朝 爱 ， 谁 我 无 多 外 万 缘 转 念 的 
　 　 　 生 冷 灯 人 腾 为 中 红 　 暮 别 覆 是 是 言 少 天 千 。 世 。 人 
　 　 　 。 ， ， 生 。 真 人 尘 　 暮 离 手 我 谁 。 年 ， ， 　 中 　 间 
　 　 　 　 　 　 ， 　 ， 。 ， 　 竟 ， 是 ， ， 　 ， 　 　 　 ， 　 ， 
　 　 　 　 　 　 　 　 　 　 　 　 是 　 雨 　 　 　 　 　 　 　 　 　 　 
　 　 　 　 　 　 　 　 　 　 　 　 瞬 　 ， 　 　 　 　 　 　 　 　 　 　 
　 　 　 　 　 　 　 　 　 　 　 　 息 　 　 　 　 　 　 　 　 　 　 　 　 
　 　 　 　 　 　 　 　 　 　 　 　 。 　




TOP

Rank: 1
13#
rainbow發表於 2014-6-19 13:38 | 只看該作者
本帖最後由 rainbow 於 2014-6-19 15:51 編輯

12#代码：
<center>
<div style="width: 800px; height: 600px;">
<table width="800" height="600" background="http://i1093.photobucket.com/albums/i438/hcttan/JPG/1JPG/672A547D540Dnn.png~original&#10;&#10;" bordercolor="#6666ff" border="0"><tbody><tr><td><div style="margin-left:-10px; position:relative; font-size:20px; color:#800000" align="left"><pre>
　 　 　 关 温 我 明 古 若 方 偶 　 谁 喜 翻 今 今 一 恩 快 烦 注 在 曾 花
　 　 　 照 暖 愿 明 井 为 知 开 　 知 无 手 生 生 朝 恩 乐 恼 定 那 有 开
　 　 　 你 你 做 灭 水 情 身 天 　 道 常 是 以 以 相 爱 在 有 的 轮 的 花
　 　 　 的 的 一 灭 也 爱 是 眼 　 朝 ， 云 后 前 对 爱 天 千 姻 回 思 落
　 　 　 一 寒 盏 的 沸 若 眼 见 　 朝 爱 ， 谁 我 无 多 外 万 缘 转 念 的
　 　 　 生 冷 灯 人 腾 为 中 红 　 暮 别 覆 是 是 言 少 天 千 。 世 。 人
　 　 　 。 ， ， 生 。 真 人 尘 　 暮 离 手 我 谁 。 年 ， ， 　 中 　 间
　 　 　 　 　 　 ， 　 ， 。 ， 　 竟 ， 是 ， ， 　 ， 　 　 　 ， 　 ，
　 　 　 　 　 　 　 　 　 　 　 　 是 　 雨 　 　 　 　 　 　 　 　 　 　
　 　 　 　 　 　 　 　 　 　 　 　 瞬 　 ， 　 　 　 　 　 　 　 　 　 　
　 　 　 　 　 　 　 　 　 　 　 　 息 　 　 　 　 　 　 　 　 　 　 　 　
　 　 　 　 　 　 　 　 　 　 　 　 。 　
</pre></div></td></tr></tbody></table></div></center>
<br><br>

此代码适合在IE或Chrome浏览器使用

TOP

返回列表