注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

琳达 博客

海外游子

 
 
 

日志

 
 

【转载】16:如何编辑竖排文字  

2014-08-04 11:53:12|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自格林浪人《16:如何编辑竖排文字》
欢迎您!启步学代码。

(游子学习笔记。 供初学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 属性设置文字竖排存在二个问题,即位置总是靠右边,其次是每行字多了要折行.用表格标签做一图框套装,宽度定为100不变,高度视每行字多少而定.代码如下:

<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

<table border="25" width=600" cellspacing="3" cellpadding="0" bgcolor="#FF3399" height="350" bordercolor="#000666"> <tr> <td> <DIV id=table1 style="LEFT: 0px; WIDTH: 600px; POSITION: relative; TOP: 0px"> <font style=font:22pt face=隶书 color=#FFFF37> <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: 400px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 岁岁重阳<br>。</DIV> <DIV style="LEFT: 350px; 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: 200px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 不似春光<br>。</DIV> <DIV style="LEFT: 150px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 胜似春光<br>,</DIV> <DIV style="LEFT: 100px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 寥廓江天万里霜<br>。</DIV> </font> <DIV style="LEFT: 30px; WIDTH: 30px; POSITION: absolute; TOP: -50px" > <font style=font:15pt 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>.


显示结果:

毛主席诗词欣赏

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



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

<table id=table1 style="LEFT: 0px; WIDTH: 720px; POSITION: relative; TOP: 0px"background="http://pic.nipic.com/2008-01-02/200812144757987_2.jpg" cellspacing="2" height="380"bordercolor="#008000"border="25"> <tr> <td> <font style="position: absolute; top: 95px; left: 350px; width:50px;" style=font:20pt face=华文行楷 color=ff0000 >︻<BR>枫桥夜泊<BR>︼</FONT> <font style="position: absolute; top: 90px; left: 310px; width:50px;" style=font:20pt face=华文行楷 color=ff0000 > <BR> <BR> <BR> <BR>∣<BR>张 继</FONT> <img style="position: absolute; top: 90px; left: 290px;" src="http://www.citychinese.com/bbs/UploadFile/2008-8/200883119343561141.gif"width=3 height=220 > <font style="position: absolute; top: 90px; left: 250px; width:50px; " style=font:20pt face=华文行楷 color=ff0000 >月落乌啼霜满天<BR>,</FONT> <img style="position: absolute; top: 90px; left: 230px;" src="http://www.citychinese.com/bbs/UploadFile/2008-8/200883119343561141.gif"width=3 height=220 > <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"width=3 height=220 > <font style="position: absolute; top: 90px; left: 130px; width:50px;" style=font:20pt face=华文行楷 color=ff0000 >姑苏城外寒山寺<BR>,</FONT> <img style="position: absolute; top: 90px; left: 110px;" src="http://www.citychinese.com/bbs/UploadFile/2008-8/200883119343561141.gif"width=3 height=220 > <font style="position: absolute; top: 90px; left: 70px; width:50px;" style=font:20pt face=华文行楷 color=ff0000 >夜半钟声到客船<BR>。</FONT> <img style="position: absolute; top: 90px; left: 50px;" src="http://www.citychinese.com/bbs/UploadFile/2008-8/200883119343561141.gif"width=3 height=220 > </b></FONT></DIV> </td></tr></table>

  ◆本例是文字标签和贴图标签行内套用 CSS样式表定位语句.
  ◆style= (调用样式表语句)
  ◆POSITION: relative(属性名称"绝相对定位").
  ◆position: absolute (属性名称"绝对定位").
  ◆top: 90px (垂直启点距离相对定位的顶边垂直基准 90个点).
  ◆left: 250px (水平启点距离相对定位的左边水平基准250个点.
  ◆width:50px (宽度50点,用窄幅来限制文字从上向下走).
  ◆注意:逗号或句号的前面应设一个过行标签<br>).


显示结果:


枫桥夜泊
 
 
 
 

张 继
16:如何编辑竖排文字 - 格林浪人 - 格林浪人 欢迎您! 月落乌啼霜满天
16:如何编辑竖排文字 - 格林浪人 - 格林浪人 欢迎您! 江枫渔火对愁眠
16:如何编辑竖排文字 - 格林浪人 - 格林浪人 欢迎您! 姑苏城外寒山寺
16:如何编辑竖排文字 - 格林浪人 - 格林浪人 欢迎您! 夜半钟声到客船
16:如何编辑竖排文字 - 格林浪人 - 格林浪人 欢迎您!




击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
2010年7月11日 格林浪人整编

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

  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017