16、如何编辑竖排文字

欢迎您！启步学代码。

（游子学习笔记。供初学HTML代码的朋友参考）

（此帖中的一些CSS代码因为在网易博客系统不可用而被摈弃，因此在实例显示结果中出现了问题，大家可以复制代码在html浏览器中看显示结果的。）

如何编辑竖排文字

音画贴中或网页上有时要插入竖排文字，就应采取垂直布局，即文字起始于每页的右上角，其走向是向下的，换行时，下一行回到页面顶部并位于前一行的左侧。文字竖排有各种方法：图片法、软回车法和样式表（CSS）法．我试用绝对定位的方法，也可获得很好的效果．先看看用绝对定位编辑文字竖排方式：

毛主席诗词欣赏︻

采桑子

︼重阳

人生易老天难老

，岁岁重阳

。

今又重阳

，战地黄花分外香

。

一年一度秋风劲

，不似春光

。

胜似春光

，寥廓江天万里霜

。

游子学编竖排文字

（一）用 CSS 属性设置文字竖排

文字竖排的基本模式：

<DIV style="WRITING-MODE: tb-rl"> <font style=font:16pt color=0000ff><b> 毛主席诗词<br> 七律　长征<br> 红军不怕远征难，<br> 万水千山只等闲。<br> 五岭逶迤腾细浪，<br> 乌蒙磅礴走泥丸。<br> 金沙水拍云崖暖，<br> 大渡桥横铁索寒。<br> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> </p></FONT></div>

◆DIV style=定义启用CSS样式表标记．

◆WRITING-MODE:属性名称布局，有两个属值，水平lr-tb和垂直tb-rl．

◆tb-rl属值定义垂直，表示自上而下、从右向左．

显示结果：

毛主席诗词

七律　长征

红军不怕远征难，

万水千山只等闲。

五岭逶迤腾细浪，

乌蒙磅礴走泥丸。

金沙水拍云崖暖，

大渡桥横铁索寒。

更喜岷山千里雪，

三军过后尽开颜。

（二）可调整行距和字距的文字竖排的代码：

<DIV style="WRITING-MODE: tb-rl;LINE-HEIGHT: 2.0em; LETTER-SPACING: 0.2em;"> 毛主席诗词<br>

答李淑一<br>

我失骄杨君失柳，<br>

杨柳轻扬直上重霄九。<br>

问讯吴刚何所有，<br>

吴刚捧出桂花酒。<br>

寂寞嫦娥舒广袖，<br>

万里长空且为忠魂舞。<br>

忽报人间曾伏虎，<br>

泪飞顿作倾盆雨。<br>

</div>

◆LINE-HEIGHT: 2.0em 调整文字水平行距．

◆LETTER-SPACING: 0.2em　调整文字垂直距．

显示结果：

毛主席诗词

答李淑一

我失骄杨君失柳，

杨柳轻扬直上重霄九。

问讯吴刚何所有，

吴刚捧出桂花酒。

寂寞嫦娥舒广袖，

万里长空且为忠魂舞。

忽报人间曾伏虎，

泪飞顿作倾盆雨。

（三）如何定位插入竖排文字

单用CSS 属性设置文字竖排存在二个问题，即位置总是靠右边,其次是每行字多了要折行．用表格标签做一图框套装，宽度定为１00不变，高度视每行字多少而定．代码如下：

<table border="1" width="100" cellspacing="1" height="300" id="table2"> <tr> <td>　 <DIV style="WRITING-MODE: tb-rl;LINE-HEIGHT: 3.em; LETTER-SPACING: 0.2em;"> <font face=仿宋_GB2312 style=font:14pt color=#FF0000><b> 　<br> 毛主席诗词<br> 　　答李淑一<br> 我失骄杨君失柳，<br> 杨柳轻扬直上重霄九。<br> 问讯吴刚何所有，<br> 吴刚捧出桂花酒。<br> 寂寞嫦娥舒广袖，<br> 万里长空且为忠魂舞。<br> 忽报人间曾伏虎，<br> 泪飞顿作倾盆雨。　<br> </font></div> </td></tr></table> </DIV>

◆这个示例没有设定位代码时,显示位置居左．

◆如果显示位置要居中或居右，可在代码前行加定位代码．．

◆<DIV ALIGN=center>显示位置居中</DIV>．

◆<DIV ALIGN=RIGHT>显示位置居右</DIV>．

显示结果：

毛主席诗词

答李淑一

我失骄杨君失柳，

杨柳轻扬直上重霄九。

问讯吴刚何所有，

吴刚捧出桂花酒。

寂寞嫦娥舒广袖，

万里长空且为忠魂舞。

忽报人间曾伏虎，

（四）居中定位插入竖排文字

<CENTER> <table border="1" width="600" cellspacing="1" height="200" id="table2"> <tr> <td>　 <font face=黑体 size=5 color=ffff00 style="LINE-HEIGHT:150%; WRITING-MODE: tb-rl"> ︻忆江南︼白居易<br>江南好，<br>风景旧曾谙。<br>日出江花红胜火，<br>春来江水绿如蓝。<br> 能不忆江南。<br>江南忆，<br>最忆是杭州。<br>山寺月中寻桂子，<br>郡亭枕上看潮头。<br>何日更重游。<br>江南忆，<br>其次忆吴宫。<br>吴酒一杯春竹叶，<br>吴娃双舞醉芙蓉。<br>早晚复相逢。<br>梳洗罢，<br>独倚望江楼。<br>过尽千帆都不是，<br>斜晖胍胍水悠悠。<br>肠断白苹洲。<br> </div> </td></tr></table> </CENTER>

显示结果：

︻忆江南︼白居易

江南好，

风景旧曾谙。

日出江花红胜火，

春来江水绿如蓝。

能不忆江南。

江南忆，

最忆是杭州。

山寺月中寻桂子，

郡亭枕上看潮头。

何日更重游。

江南忆，

其次忆吴宫。

吴酒一杯春竹叶，

吴娃双舞醉芙蓉。

早晚复相逢。

梳洗罢，

独倚望江楼。

过尽千帆都不是，

斜晖胍胍水悠悠。

肠断白苹洲。

（五）居右定位插入竖排文字

<br> <DIV ALIGN=RIGHT> <table border="1" width="150" cellspacing="1" height="250" id="table2"> <tr> <td>　 <DIV style="WRITING-MODE: tb-rl;LINE-HEIGHT: 5.em; LETTER-SPACING: 0.2em;"> <font face=仿宋_GB2312 style=font:16pt color=#0000FF><b> 　<br> 《题临安驿》<br> －林升<br> 山外青山楼外楼，<br> 西湖歌舞几时休。<br> 暖风熏得游人醉，<br> 直把杭州作卞州。<br> 　<br> </font></div> </td></tr></table> </DIV>

◆<DIV ALIGN=RIGHT>显示位置居右</DIV>．

显示结果：

《题临安驿》

－林升

山外青山楼外楼，

西湖歌舞几时休。

暖风熏得游人醉，

直把杭州作卞州。

（六）用 CSS 定位属性设置文字竖排

用 CSS 定位属性内容相对定位和绝对定位的语句，可以获得很好的竖排效果．方法是：先设置相对定位标签，作为容器．再插入若于条绝对定位标签，加贴文字和分隔线．所有绝对标签的垂直启点TOP都设同一参数，而水平启点LEFT则按比例增减，宽度视字体大小而定．　　对定位属性的理解：绝对定位的启点必须有参照条件，网页、楼面和表格等都可作为参照条件，但必须先设置相对定位，否则，单用绝对定位内容显示的位置会走到论坛页面的顶部或别的地方．

相对定位的语句：

style="LEFT: 0px; WIDTH: 720px; POSITION: relative; TOP: 0px"

绝对定位的语句：

style="position: absolute; top: 95px; left: 350px; width:50px;"

相对定位和绝对定位的语句可单独定义使用，也可在各种标签行内套用．

定位挂贴竖排文字的代码1

<DIV style="LEFT: 550px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 毛主席诗词欣赏</DIV> <DIV style="LEFT: 500px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > ︻<br>采桑子<br>︼重阳</DIV>

<DIV style="LEFT: 450px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 人生易老天难老<br>，</DIV>

<DIV style="LEFT: 300px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 战地黄花分外香<br>。</DIV>

<DIV style="LEFT: 250px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 一年一度秋风劲<br>，</DIV>

<DIV style="LEFT: 100px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 寥廓江天万里霜<br>。</DIV></font></P>

<font style=font:13pt color=#FFFF37><b> 游子学编竖排文字</b></font></DIV></DIV>

</td></tr></table>

◆<table border="25" width=600"....>先设置一张表格作为背景．

◆<DIV ...style=POSITION: relative >定义相对定位．作为绝对文字标签容框．

◆<font style=font:22pt face=隶书 color=#FFFF37>文字标签，各行文字通用．

◆<DIV style="LEFT: 550px; WIDTH: 30px; POSITION: absolute; TOP: -130px" >绝对定位标签．

◆一条绝对定位标签中贴一行字．调整水平启点LEFT参数来增减垂直行距．

◆每一行的中的特殊符号和最后一个字要有一个过行代码<br>．

显示结果：

（博客中无法显示cSS语言效果，请复制代码在html浏览器中看效果。）

毛主席诗词欣赏

︻

采桑子

︼重阳

人生易老天难老

，

岁岁重阳

。

今又重阳

，

战地黄花分外香

。

一年一度秋风劲

，

不似春光

。

胜似春光

，

寥廓江天万里霜

。

游子学编竖排文字

定位挂贴竖排文字的代码2

<font style="position: absolute; top: 90px; left: 250px; width:50px; " style=font:20pt face=华文行楷 color=ff0000 >月落乌啼霜满天<BR>，</FONT>

<font style=font:20pt face=华文行楷 color=ff0000 style="position: absolute; top: 90px; left: 190px; width:50px; ">江枫渔火对愁眠<BR>。</FONT> <img style="position: absolute; top: 90px; left: 170px;" src="http://www.citychinese.com/bbs/UploadFile/2008-8/200883119343561141.gif%22width=3 height=220 >

<font style="position: absolute; top: 90px; left: 130px; width:50px;" style=font:20pt face=华文行楷 color=ff0000 >姑苏城外寒山寺<BR>，</FONT>

<font style="position: absolute; top: 90px; left: 70px; width:50px;" style=font:20pt face=华文行楷 color=ff0000 >夜半钟声到客船<BR>。</FONT>

◆本例是文字标签和贴图标签行内套用 CSS样式表定位语句．

◆style=　（调用样式表语句）

◆POSITION: relative（属性名称＂绝相对定位＂）．

◆position: absolute　（属性名称＂绝对定位＂）．

◆top: 90px　（垂直启点距离相对定位的顶边垂直基准 90个点）．

◆left: 250px　（水平启点距离相对定位的左边水平基准250个点．

◆width:50px　（宽度50点，用窄幅来限制文字从上向下走）．

◆注意：逗号或句号的前面应设一个过行标签<br>）．

显示结果：

︻

枫桥夜泊

︼

∣

张继

月落乌啼霜满天

，

江枫渔火对愁眠

。

姑苏城外寒山寺

，

夜半钟声到客船

。

◇ 击点打开html代码浏览器◇

原创编辑：游子

2005年10月试编 2006年06月改编

2007年04月改编 2008年11月改编

（为了让更多网友学用html代码制作音画贴，本贴欢迎转载．但是．我用了很多时间和精力编写这些资料的，转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢！）

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