免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

css竖排文字

本帖最後由 rainbow 於 2021-1-14 21:25 編輯

此代码必须用chrome浏览器才能正确显示

    卜算子.西山恋

漫步西山上,
邀友赏翠微。
松青柏绿山石秀,
花艳野蝶飞。
密林清如洗,
枝上小莺啼。
泉流汩汩伴山风,
醉景不思归。


本帖最後由 rainbow 於 2022-10-23 08:45 編輯

《狮子山下》

人生中有欢喜
难免亦常有淚
我哋大家在狮子山下相遇上
总算是欢笑多于唏噓
人生不免崎岖
难以絕无挂虑
既是同舟
在狮子山下且共济
抛弃区分求共对
放开彼此心中矛盾
理想一起去追
同舟人誓相随
无畏更无惧
同处海角天边
携手踏平崎岖
我哋大家
用艰辛努力写下
那不朽香江名句


  1. <center><div style="width:730"><section style="background-image:url('https://2img.net/h/i2.kknews.cc/TyLUO2ku2wsvHJGo17JonCduO5jHHuRX_FQGRWlKB0Q/0.jpg');background-color:#ddeedd; background-repeat:no-repeat;background-position: center top; background-size:cover; width:700px;height:337px; border-radius:30px"><section  align=right><section style="padding-top:40px; padding-right:0px; Writing-mode:tb-rl; Text-align:left; POSITION: relative; WIDTH: 700px; height:330px" valign=bottom>
  2. <span style="FONT: normal 22px/145% Microsoft YaHei; COLOR: #ff0080"><br>
  3. 《狮子山下》
  4. <br><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. 那不朽香江名句</span>
  23. </section></section></section>
  24. </div></center>
  25. <br><br>
複製代碼


TOP

此代码只适合chrome浏览器

  1. <style type="text/css">.背景{
  2. width: 680px; height: 450px; /*背景图片宽高*/
  3. border-radius: 30px; /*背景图片圆角半径*/
  4. background-image:url(https://www.oldkids.cn/upload/2018/05/07/blog_20180507132646097.gif);
  5. overflow: hidden;/*清除浮动,使溢出部分隐藏*/
  6. }
  7. .文字{
  8. position: relative; /*相对定位*/
  9. left:200px; top:50px;
  10. writing-mode:vertical-rl;
  11. text-align:up;
  12. font-size: 33px;
  13. color: cyan;
  14. }
  15. </style>
  16. <div style="margin-left:60px">
  17. <div class="背景">
  18. <div class="文字">
  19. <div>&nbsp;&nbsp;&nbsp;&nbsp;卜算子.西山恋<br />
  20. <br />
  21. 漫步西山上,<br />
  22. 邀友赏翠微。<br />
  23. 松青柏绿山石秀,</div>
  24. 花艳野蝶飞。<br />
  25. 密林清如洗,<br />
  26. 枝上小莺啼。<br />
  27. 泉流汩汩伴山风,<br />
  28. 醉景不思归。<br />
  29. </div>
  30. </div>
  31. </div><br><br>
複製代碼

此代码必须“禁用 URL 識別”



TOP

返回列表