CSS实现的网页中文字排版的几种方式

上一篇 / 下一篇  2007-08-31 17:38:11 / 个人分类:网站制作

 1.文字倒排(逆时针转90度)<br><br>
<span style="font-family:@宋体;color:red">尽人事 顺天命</span>
<br><br>
2.文字正写竖排,中文竖排,从右往左读<br><br>
<div style="layout-flow: vertical-ideographic;height:399;float:right;">
在暗蓝色的海上,海水在欢快地泼溅<br>
我们的心是自由的,我们的思想无边<br>
这全是我们的帝国,它的权力到处通行<br>
我们的旗帜就是王笏,谁碰到都得服从<br>
我们过着粗犷的生涯,在风暴动荡里<br>
从劳作到休息,什么样的日子都有乐趣<br>
噢,谁能体会出?可不是你,娇养的奴仆<br>
可不只有“无路之路”的游荡者才能知道?<br>
在红色的酒杯中旋起我们的记忆<br>
当胜利的伙伴们终于把财物平分<br>
谁不落泪,当回忆暗淡了每人的前额:<br>
现在,那倒下的勇士该会怎样地欢欣!<br></div>
<br><br>
3.文字倒写竖排<br><br>
<br>
<script. langauge="javascript">
      var Num = 0;
      function showText(){
          var strText = '文字还有倒着竖排的?';
          var Div = document.all['oDiv'];
          oDiv. innerHTML = strText.substr(0, oNum);
          Num = (oNum>strText.length) ? 0 : oNum+1 ;
          window.setTimeout('showText()', 500);
      }
      window.onload = function(){ window.setTimeout('showText();', 500); }
</script>
<div id="oDiv" style="width:25px;height:180px;direction:rtl;unicode-bidi:bidi-override;layout-flow:vertical-ideographic;text
-align:right;"></div>
<br>
4.中文竖排,从左往右读:<br>
<style>div {display:inline;color:red; font:11pt 华文行楷; writing-mode:tb-rl;}</style>
<div>下定决心,</div>
<div>不怕牺牲,</div>
<div>排除万难,</div>
<div>争取胜利!</div>
<br><br>
<div style="width:5px;float:left;"><font face="@隶书" size="5px" color="red">只要你坚持不懈什么样的结果都有可能</font></div>
<div style="position:absolute;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);float:right;"><font face="华文行楷" size="5px" color="blue">只要你坚持不懈什么样的结果都有可能</div>

 

1.文字倒排(逆时针转90度)

尽人事 顺天命

2.文字正写竖排,中文竖排,从右往左读

在暗蓝色的海上,海水在欢快地泼溅
我们的心是自由的,我们的思想无边
这全是我们的帝国,它的权力到处通行
我们的旗帜就是王笏,谁碰到都得服从
我们过着粗犷的生涯,在风暴动荡里
从劳作到休息,什么样的日子都有乐趣
噢,谁能体会出?可不是你,娇养的奴仆
可不只有“无路之路”的游荡者才能知道?
在红色的酒杯中旋起我们的记忆
当胜利的伙伴们终于把财物平分
谁不落泪,当回忆暗淡了每人的前额:
现在,那倒下的勇士该会怎样地欢欣!


3.文字倒写竖排


var Num = 0; function showText(){ var strText = '文字还有倒着竖排的?'; var Div = document.all['oDiv']; oDiv. innerHTML = strText.substr(0, oNum); Num = (oNum>strText.length) ? 0 : oNum+1 ; window.setTimeout('showText()', 500); } window.onload = function(){ window.setTimeout('showText();', 500); }
4.中文竖排,从左往右读:
div {display:inline;color:red; font:11pt 华文行楷; writing-mode:tb-rl;}下定决心,
不怕牺牲,
排除万难,
争取胜利!


只要你坚持不懈什么样的结果都有可能
只要你坚持不懈什么样的结果都有可能

TAG:

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2008-06-11  
1234567
891011121314
15161718192021
22232425262728
2930     

我的存档

数据统计

  • 访问量: 200
  • 日志数: 8
  • 建立时间: 2007-08-31
  • 更新时间: 2007-08-31

RSS订阅

Open Toolbar