<!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 实现文字竖排模拟古籍排版》对你有帮助,请点赞、收藏,并留下你的观点哦!