【CSS】writing-mode实现古诗词排版

最新推荐文章于 2023-05-08 11:39:36 发布
最新推荐文章于 2023-05-08 11:39:36 发布
阅读量3.8k 收藏 14
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_z_p/article/details/108198095
版权
本文介绍了如何利用CSS的writing-mode属性实现古诗词的特色排版，详细讲解了writing-mode的属性参考、快速上手及代码实现，并提供了在线预览效果。
摘要由CSDN通过智能技术生成

writing-mode 实现古诗词排版

1、writing-mode属性参考

MDN 文档writing-mode

2、快速上手

该属性主要有三个可选值：horizontal-tb(默认), vertical-lr, vertical-rl。

3、实现古诗词排版

使用vertical-rl的排版特性，即可简单实现古诗词的排版样式。直接上代码。

  • html:
<div class="poet">
最低0.47元/天 解锁文章
czpcalm
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的writing-mode文字排版属性使用教程
09-24
CSS的writing-mode属性是...CSS的writing-mode属性除了在日常网页设计中可用于实现创意排版外，在制作电子书或处理多语言内容时同样有其重要价值。开发者应当注意该属性对不同浏览器的兼容性问题，并在项目中谨慎使用。
CSS 文字、段落排版
Peak Xin's Blog
06-10 771
1、字体： 现在一般网页喜欢设置“微软雅黑”，如下代码： body{font-family:"Microsoft Yahei";} 或 body{font-family:"微软雅黑";} 注意：第一种方法比第二种方法兼容性更好一些。 2、字号、颜色： body{font-size:12px;color:#666} 3、粗体： p span{font-weight:bold
用CSS布局写诗
qq_43463419的博客
03-30 445
用CSS布局 TWO ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330181519472.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDYzNDE5,size_16,color_FFFFFF,t_70#pic_center) ...
html css 实现文字竖排模拟古籍排版
MAILLIBIN的专栏
11-17 1863
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>仿古竖排文字</title> <style type="text/css"> .verticallines{ background-color:#EEAD0E; font-f...
CSS_嵌入式书写方式_文字控制三属性_实体化三属性_显示模式_css的三种书写模式_选择器_编写一个百度的主页_Unit_3;
qq_38053395的博客
07-13 1433
Topic 1 ：CSS的第一个书写方式 ：CSS不属于标签；css的一个小案例：代码示例：&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS体验&lt;/title&gt; &lt;!----设置为css的纯文本模式-----&gt; &am
html+css练手项目3
呼啦啦啦啦啦的博客
07-13 1974
简单的综合考察的html+css的练手项目
那些炫酷的CSS文字效果之诗词《兔》
南城
01-09 648
不知不觉已经迈入2023年了，本次分享10种不同的有关文字方面的特效，让我们一边欣赏有关《兔》相关的古诗词的同时一边走进CSS的世界。
Web(六)CSS3语法-CSS样式规则
m0_63324772的博客
11-28 548
标签作用，标签中通过style属性为文本添加样式，添加顺序为： （1）字体设置为楷体；2.设置背景图像的大小，使其保持纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。3.外部样式文件设置的样式可通过点击编辑器窗口左上角的“代码文件”查看。3.上述样式设置顺序： （1）设置背景图 （2）设置背景图的大小。1.按照要求的效果在标签中运用CSS样式，编辑唐诗“静夜思”1.为网页设置背景图，图像的url地址为。（2）文本水平居中对齐；（2）文本水平居中对齐。（1）字体设置为楷体；（3）行间距设置为2。
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
background-blend-mode:CSS 属性 background-blend-mode 的示例
06-04
总结，`background-blend-mode`是CSS中的一个强大特性，它让设计师能够在背景图像上实现更多的创意和个性化的视觉效果。通过理解和熟练运用这些混合模式，我们可以为网页带来更丰富、更具吸引力的视觉体验。不过，在...
深入理解CSS background-blend-mode的作用机制
01-19
1.background-blend-mode 本身就带有隔离特性，也就是一个元素应用 background-blend-mode 背景混合模式，最终的效果只会受当前元素的背景图像和背景颜色影响，不会受视觉上处于当前区域其他任意元素影响。...
atom-vim-mode-plus：改进了vim-mode
01-30
CSS选择器和键映射的范围不同于vim-mode，不兼容。 内部代码库非常不同。 因此，问题和PR应该直接发送到vim-mode-plus。 不要向官方vim模式报告vim-mode-plus的问题或PR。 从v1.9.0起不再支持基于CoffeeScript的vim...
css中的文字排版处理 writing-mode ，text-orientation， text-combine-upright， letter-spacing运用
weixin_62273193的博客
05-08 479
语法格式如下：horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottomvertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-leftvertical-lr：垂直方向内内容从上到下，水平方向从左到右sideways-rl：内容垂直方向从上到下排列sideways-lr：内容垂直方向从下到上排列CSS中的text-orientation属性用于设置字符在一行中的方向。
CSS学习
qq_37534947的博客
01-05 1154
文章目录1.初识CSS31.1、什么是CSS1.2、CSS的发展史1.3、CSS的基本语法1.4、引入CSS方式1.5、CSS基本选择器1.6、CSS高级选择器1、层次选择器2、结构伪类选择器3、属性选择器1.7、小结2.美化网页元素2.1、为什么使用CSS2.2、字体样式2.3、文本样式2.4、文本阴影2.5、超链接伪类2.6、列表样式2.7、背景样式2.8、CSS渐变样式2.9、小结3.盒子模型3.1、什么是盒子模型总结 1.初识CSS3 本章目标： 会使用行内样式、内部样式表和外部样式表三种方式
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
css 文本排版方向，古文式排版等
全易
10-12 923
语法： writing-mode: horizontal-tb 或者 vertical-rl 或者 vertical-lr 或者 sideways-rl 或者 sideways-lr; 解释： horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-...
css样式规则
前景
10-28 3791
  1  《七步诗》 一、案例描述  考核知识点 CSS样式规则 练习目标 熟练掌握CSS样式规则。 灵活运用CSS行内式的引用方法。 需求分析 使用CSS对网页进行修饰时，首先需要了解CSS样式规则及引入CSS样式表的方法，本案例按照CSS样式规则的格式并使用CSS行内式的方法输出一首《七步诗》。 案例分析 效果如图3-1所示。     《七步诗》效果 具体实现步骤如下： ...
web前端期末大作业 html+css古诗词主题网页设计
而风不止
11-20 1436
茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
顶尖电子称条码秤LS系列称固件，最新固件，固件
最新发布
08-28
顶尖电子称条码秤LS系列称固件，最新固件，固件
writing-mode优化
06-03
`writing-mode` 属性可以实现文字竖列显示，但是在不同的浏览器上可能存在兼容性问题，因此我们可以做一些优化来提高浏览器兼容性。 1. 使用浏览器前缀 不同的浏览器可能需要不同的前缀来支持 `writing-mode` 属性。你可以使用 `-webkit-`、`-moz-`、`-ms-` 和 `-o-` 前缀来确保兼容性。 以下是一个示例 CSS 代码： ```css .vertical-text { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; } ``` 在上述代码中，我们使用了 `-webkit-` 和 `-ms-` 前缀来支持 Safari 和 IE 浏览器，同时也使用了标准的 `writing-mode` 属性。 2. 使用 SVG SVG 可以实现高度可定制化的图形，并且可以在所有现代浏览器中使用。因此，你可以使用 SVG 来实现文本的竖列显示。 以下是一个示例 SVG 代码： ```html <svg width="100" height="100"> <text x="50" y="50" transform="rotate(-90 50 50)">竖列文本</text> </svg> ``` 在上述代码中，我们使用了 `<text>` 元素来定义文本，并使用 `transform` 属性将文本旋转了 -90 度，从而实现了竖列显示。 需要注意的是，SVG 的文本渲染与 HTML 中的文本渲染不同，因此你需要做一些额外的样式调整来实现所需的效果。 综上所述，你可以根据具体情况选择 `writing-mode` 属性或 SVG 来实现文本的竖列显示，并使用前缀来提高浏览器兼容性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值