欢迎您！启步学代码。

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

如何编辑竖排文字

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

毛主席诗词欣赏 ︻
采桑子
︼重阳
人生易老天难老
，岁岁重阳
。
今又重阳
，战地黄花分外香
。
一年一度秋风劲
，不似春光
。
胜似春光
，寥廓江天万里霜
。
游子学编竖排文字


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

文字竖排的基本模式：


　　◆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不变，高度视每行字多少而定．代码如下：



　　◆这个示例没有设定位代码时,显示位置居左．
　　◆如果显示位置要居中或居右，可在代码前行加定位代码．．
　　◆<DIV ALIGN=center>显示位置居中</DIV>．
　　◆<DIV ALIGN=RIGHT>显示位置居右</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



　　◆<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>．


显示结果：

毛主席诗词欣赏
︻
采桑子
︼重阳
人生易老天难老
，
岁岁重阳
。
今又重阳
，
战地黄花分外香
。
一年一度秋风劲
，
不似春光
。
胜似春光
，
寥廓江天万里霜
。
游子学编竖排文字


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



　　◆本例是文字标签和贴图标签行内套用 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代码制作音画贴，本贴 欢迎转载．但是．我用了很多时间和精力编写这些资料的，转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢！）





竖排文字内容