html css 实现文字竖排模拟古籍排版
2024-05-19 14:37:59
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古竖排文字</title>
<style type="text/css">
.verticallines{background-color:#EEAD0E;font-family:"Source Han Serif SC";height:360px;margin:1em;padding:2em;font-size:1em;writing-mode:tb-rl; -webkit-writing-mode:vertical-rl;
}
.verticallines span{color:red;font-size:2em;float:left;vartical-align:middle;
}
</style>
</head>
<body><div class="verticallines"><span>易音宝典</span>亿忆亦一易 一易亦亿忆 观世界万千音声 悟道 空即是色 色即是空 空不异色 色不异空 音声 有意义 无意义 皆因人与人 人与世界之结缘而成 同一音 于百千门语言中幻化出无数种语义 甚是奥妙 而人能分别之语音音素大抵不过百数 所以以音声连通异国他族之语义 实乃以有限为无限 以一当百 妙哉 妙哉 现举数例与众分享 以窥是法之玄机<br/><span>鹦歌狸诗</span>英文 鹦鹉聪慧 能言亦能歌 狐狸狡猾 能文亦能诗 英国之民有智勇 曾称日不落帝国 其语为英文<br/><span>柴泥字</span>中文 仓颉 伏羲 用柴棍在泥地上描绘万物 那就是最原初的中文象形文字<br/><span>兰桂芝</span>语言 如兰幽香 如桂清香 如芝润泽 人类的语言也是这样美好<br/><span>传思类神</span>翻译 传递思想 类若神明 翻译是一种神圣崇高的事业<br/></div></body>
</html>关键是要注意应用
writing-mode:tb-rl; -webkit-writing-mode:vertical-rl;
float:left;
<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古竖排文字</title>
<style type="text/css">
.verticallines{background-color:#EEAD0E99;font-family:"Source Han Serif SC";height:300px;margin:1em;padding:2em;font-size:1em;writing-mode:tb-rl; //-webkit-writing-mode:vertical-rl;
}
.bigletters{color:red;font-size:2em;display:inline-block;
}
.smallletters{font-size:1em;display:inline-block;
}
.meaning{color:#008080;
}
</style>
</head>
<body><div class="verticallines"><span class="bigletters">易音宝典</span><span class="meaning">亿忆亦一易 一易亦亿忆</span><span class="smallletters">亿忆亦一易 一易亦亿忆 观世界万千音声 悟道 空即是色 色即是空 空不异色 色不异空 音声 有意义 无意义 皆因人与人 人与世界之结缘而成 同一音 于百千门语言中幻化出无数种语义 甚是奥妙 而人能分别之语音音素大抵不过百数 所以以音声连通异国他族之语义 实乃以有限为无限 以一当百 妙哉 妙哉 现举数例与众分享 以窥是法之玄机</span><span class="bigletters">鹦歌狸诗</span><span class="meaning">英文</span><span class="smallletters">鹦鹉聪慧 能言亦能歌 狐狸狡猾 能文亦能诗 英国之民有智勇 曾称日不落帝国 其语为英文 </span><span class="bigletters">柴泥字</span><span class="meaning">中文</span><span class="smallletters">仓颉 伏羲 用柴棍在泥地上描绘万物 那就是最原初的中文象形文字 </span><span class="bigletters">兰桂芝</span><span class="meaning">语言</span><span class="smallletters">如兰幽香 如桂清香 如芝润泽 人类的语言也是这样美好</span><span class="bigletters">传思类神</span><span class="meaning">翻译</span><span class="smallletters">传递思想 类若神明 翻译是一种神圣崇高的事业</span></div></body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古竖排文字</title>
<style type="text/css">
.verticallines{background-color:#EEAD0E99;font-family:"Source Han Serif SC";height:300px;margin:1em;padding:2em;font-size:1em;writing-mode:tb-rl; -webkit-writing-mode:vertical-rl;
}
.bigletters{color:red;font-size:2em;float:left;
}
.smallletters{color:#333333;
}
.meaning{color:#008080;
}
</style>
</head>
<body><div class="verticallines"><span class="bigletters">易音宝典</span><span class="meaning">亿忆亦一易 一易亦亿忆</span><span class="smallletters">亿忆亦一易 一易亦亿忆 观世界万千音声 悟道 空即是色 色即是空 空不异色 色不异空 音声 有意义 无意义 皆因人与人 人与世界之结缘而成 同一音 于百千门语言中幻化出无数种语义 甚是奥妙 而人能分别之语音音素大抵不过百数 所以以音声连通异国他族之语义 实乃以有限为无限 以一当百 妙哉 妙哉 现举数例与众分享 以窥是法之玄机</span><br/><br/><span class="bigletters">鹦歌狸诗</span><span class="meaning">英文 </span><span class="smallletters">鹦鹉聪慧 能言亦能歌 狐狸狡猾 能文亦能诗 英国之民有智勇 曾称日不落帝国 其语为英文 </span><br/><br/><span class="bigletters">柴泥字</span><span class="meaning"> 中文 </span><span class="smallletters">仓颉 伏羲 用柴棍在泥地上描绘万物 那就是最原初的中文象形文字 </span><br/><br/><span class="bigletters">兰桂芝</span><span class="meaning"> 语言 </span><span class="smallletters">如兰幽香 如桂清香 如芝润泽 人类的语言也是这样美好</span><br/><br/><span class="bigletters">传思类神</span><span class="meaning"> 翻译 </span><span class="smallletters">传递思想 类若神明 翻译是一种神圣崇高的事业</span><br/><br/></div></body>
</html>html css 实现文字竖排模拟古籍排版相关推荐
- css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- CSS 实现文字竖排并设置间距
CSS 实现文字竖排并设置间距 <div class="vertical-title">我是竖排文字</div> 1.设置writing-mode属性 .v ...
- 在html中写竖着的文字,css实现文字竖排效果示例代码
在word.excel中可以轻松的实现文字竖排的形式,但是在html页面中呢?现今我有了这种需要,我想要的效果如下: 复制代码代码如下: 这不是被美工嵌在的文字,而是通过div加上的,该当如何来实现此 ...
- css writing-mode文字竖排
解决英文以及间距问题 文字竖排 writing-mode: vertical-rl; 解决英文竖排问题 text-orientation:upright; 字间距 letter-spacing:8px ...
- css的排版连起来跟全部竖着的区别,CSS实现文字竖排排版
使用bat/vbs/ahk对Windows下进行自动化操作 回想90年代,我们在DOS下使用各种命令链对操作进行简化和自动化,如DOS 5.0添加的DosKey,利用管道和重定向对多组命令进行链式操作 ...
- 用div+css设置文字竖排
今天需要实现文字的竖排版,网上搜了搜果然还有,实现起来也非常简单. 只用于ie的方法 1. writing-mode(设置对象书写方向) 语法:writing-mode : lr-tb.tb-rl 参 ...
- css表格文字超数量就竖排_CSS文字竖排 DIV CSS文字垂直竖列排版显示如何实现？...
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- div css纵向显示 html,css如何设置竖排文字？
有时候网页中的文字因为特别要求不能横向显示,这时候所需要的就是让文字来竖排显示,那么,网页中如何让文字竖排显示呢?接下来本篇文章将介绍css实现文字竖排显示的方法,希望对大家有所帮助. 方法一:使用w ...
- html中文案竖排怎么写,做了这个活动，感觉自己成了垂直排版css大师（文字竖排）...
前段时间协助完成作家的盘点活动,设计大大给的视觉稿如下图.最初拿到稿子时,以为是一个简单的常规活动,实际在完成这个活动的过程中有一点点小波折,自己也在这个过程中学习到了关于垂直排版的知识点,下面来跟大 ...
- css中的文字竖排和间距控制
css中的文字竖排和间距控制 文字的竖排和间距控制 竖排 代码: <DIV style="WRITING-MODE:tb-rl;TEXT-ALIGN:left">< ...
最新文章
- 持续集成之戏说Check-in Dance
- loadrunner录制0事件_LoadRunner脚本异常捕获处理
- linux系统编程：线程原语
- [HAOI 2010]软件安装
- 面试笔记——C++11新特性
- python中split_python中split()和split(' ')的区别
- linux下使用VS CODE + CMAKE 调试C++程序
- 魔兽世界阿拉索人数最多服务器,魔兽世界8.3哪个区人多_wow8.3服务器人数统计介绍_3DM网游...
- MySQL-数据操作-增删改查
- [Unity 3D] Unity 3D 性能优化 (一)
- 将大文件分割为指定大小的文件
- linux 共享内存管理,什么是物理/虚拟/共享内存——Linux内存管理小结一
- 汇编语言·易遗忘知识点汇总ing
- ubuntu wine protel 99se安装
- 第十三次博文：教你从立创EDA库导入AD库，保姆级别！
- 【U盘量产工具】windows无法完成格式化——芯邦主控CBM2098S
- 代码查重工具SIM，添加图形界面GUI，附下载链接
- 亮相SIGGRAPH 太极拳三维教学App制作揭秘
- AutoHotKey写一个改键的小脚本
- 有衬线字体和无衬线字体