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

最新推荐文章于 2024-11-20 17:24:01 发布
最新推荐文章于 2024-11-20 17:24:01 发布
阅读量4k 收藏 13
点赞数 2
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chen_z_p/article/details/108198095
本文介绍了如何利用CSS的writing-mode属性实现古诗词的特色排版，详细讲解了writing-mode的属性参考、快速上手及代码实现，并提供了在线预览效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

writing-mode 实现古诗词排版

1、writing-mode属性参考

MDN 文档writing-mode

2、快速上手

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

3、实现古诗词排版

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

  • html:
<div class="poet">
  <h1
最低0.47元/天 解锁文章

200万优质内容无限畅学
使用writing-mode实现垂直书写的中文排版
weixin_41455464的博客
06-27 24
CSS的writing-mode属性可以轻松实现中文竖排效果，让网页呈现古典韵味。该属性支持vertical-rl（从右向左竖排）、vertical-lr（从左向右竖排）等多种模式，还能配合text-orientation等属性调整文字方向。竖排文字适用于古典风格网站、杂志排版等场景，使用时需注意浏览器兼容性、标点符号处理和可读性等问题。通过灵活运用writing-mode，结合Flexbox/Grid布局，可以创造出富有创意的独特排版效果，为网页增添文化底蕴和视觉层次。
**CSS** `writing-mode` 与排版：打造垂直排版与混合流文本
最新发布
weixin_41455464的博客
07-04 13
假设我们要创建一个垂直的标题，并且让标题中的每个字都旋转一定的角度，形成一种错落有致的视觉效果。别看名字挺学术，其实它能干的事情可有趣了，能让你的文字不再老老实实地横着排，想站着就站着，想斜着就斜着，简直就是文字界的“变形金刚”。它能改变文本的走向，玩转垂直排版，甚至能创造出一些意想不到的混合流文本效果，让你的网页瞬间变得与众不同。是一个强大的 CSS 属性，它可以改变文本的走向，玩转垂直排版，甚至能创造出一些意想不到的混合流文本效果。它可以让你轻松实现传统的垂直排版效果，让你的网站瞬间充满古韵。
html css 实现文字竖排模拟古籍排版
MAILLIBIN的专栏
11-17 2131
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>仿古竖排文字</title> <style type="text/css"> .verticallines{ background-color:#EEAD0E; font-f...
用CSS布局写诗
qq_43463419的博客
03-30 528
用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) ...
改变CSS世界纵横规则的writing-mode属性-----可以让文章像古诗词一样的一列一列的展示
qq_39511525的博客
03-22 303
最近项目里面有个地方展示的信息要列状的，找了半天没找到解决方法，有大神告诉我这个属性，好了直接撸码 div{ width: 32px; font-size: 32px; display:inline-block; writing-mode:tb-rl; } 没错，就是这个：writing-mode:tb-rl; IE7+浏览器支持。内容从上往下(top-bo...
运用html相关标签和css选择器实现古代诗歌页面展示
weiliang_Handan的博客
05-30 1086
运用html相关标签和css选择器实现古代诗歌页面展示
古文的优雅排版：CSS实现传统美学
cnzzs的博客
11-20 810
古文作为中华传统文化的瑰宝，不仅讲究内容的深刻，还注重形式的优美。在现代网页设计中，我们通过 CSS 来还原古文的独特排版风格，让数字时代也能展现古文的韵味。本文将从字体、排版布局、装饰性元素三个方面，讲解如何用 CSS 实现古文的优雅排版，并附上实际代码示例。一、古文排版的特点在设计古文排版时，我们需要关注以下几点：字体...
古诗词竖排阅读效果的JS与CSS实现
资源摘要信息: "从右往左读的文字正写竖排效果"是一个针对古诗词排版设计的数字资源，该资源通过特定的JavaScript特效与CSS样式实现，使得文字以传统中文书写习惯的竖向排版从右往左阅读。在现代数字媒体中，古诗词...
那些炫酷的CSS文字效果之诗词《兔》
南城
01-09 762
不知不觉已经迈入2023年了，本次分享10种不同的有关文字方面的特效，让我们一边欣赏有关《兔》相关的古诗词的同时一边走进CSS的世界。
用css写首诗,CSS原来这么神奇
weixin_39942400的博客
08-03 797
利用 CSS 的 content 属性 attr 抓取资料CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。attr(X) 将元素的X属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。url()URI值会指定一个外部资源(比...
CSS排版
我的编程世界
08-01 453
CSS排版要求设计者首先对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系，等等。以最简单的框架为例，页面有Banner、主体内容（content）、菜单导航（links）和脚注（footer）几个部分组成，各个部分分别用自己的id来标识，整体内容如下图所示： 图中的每个色块都是一个,这里直接用CSS的ID表示方法来表示各个块。页面的所有div块都属于块#con
CSS 文字、段落排版
Peak Xin's Blog
06-10 811
1、字体： 现在一般网页喜欢设置“微软雅黑”，如下代码： body{font-family:"Microsoft Yahei";} 或 body{font-family:"微软雅黑";} 注意：第一种方法比第二种方法兼容性更好一些。 2、字号、颜色： body{font-size:12px;color:#666} 3、粗体： p span{font-weight:bold
用CSS布局写诗2
qq_43463419的博客
03-30 261
用CSS布局写诗2 满江红 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330182053262.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDYzNDE5,size_16,color_FFFFFF,t_70#pic_center) ...
web前端期末大作业 html+css古诗词主题网页设计
而风不止
11-20 1552
茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
html+css练手项目3
呼啦啦啦啦啦的博客
07-13 2278
简单的综合考察的html+css的练手项目
css中的文字排版处理 writing-mode ，text-orientation， text-combine-upright， letter-spacing运用
weixin_62273193的博客
05-08 597
语法格式如下：horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottomvertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-leftvertical-lr：垂直方向内内容从上到下，水平方向从左到右sideways-rl：内容垂直方向从上到下排列sideways-lr：内容垂直方向从下到上排列CSS中的text-orientation属性用于设置字符在一行中的方向。
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
2021-09-18多颜色诗词
yanyuanhao12的博客
09-18 286
1.古诗词html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/练习1.css"/> </head> <body> <h2>望庐山瀑布</h2> <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值