html css 实现文字竖排模拟古籍排版

<!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 实现文字竖排模拟古籍排版

相关文章