竖排显示诗歌的一种思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水调歌头</title>
</head>
<style type="text/css">
body{
background: url(/s/s_017_bEO_2.jpg);
}
article{
padding: 100px 120px;
}
div{
width:1.5em;
line-height:1em;
float:right;
font:bold 30px/36px KaiTi;
}
div.poem{
font-size: 42px;
}
div.author{
font-size: 28px;
}
a{
color: inherit;
text-decoration: none;
}
</style>
<body>
<article>
<div class="poem">水 调 歌 头</div>
<div class="author"><a href="/wiki/%E8%8B%8F%E8%BD%BC">蘇軾</a></div>
<div></div>
<div>丙辰中秋 歡飲達旦 大醉 </div>
<div>作此篇兼懷子由</div>
<div></div>
<div>明月幾時有 </div>
<div>把酒問青天 </div>
<div>不知天上宮闕 </div>
<div>今夕是何年 </div>
<div>我欲乘風歸去 </div>
<div>唯恐瓊樓玉宇 </div>
<div>高處不勝寒 </div>
<div>起舞弄清影 </div>
<div>何似在人間 </div>
<div></div>
<div>轉朱閣 </div>
<div>低綺戶 </div>
<div>照無眠 </div>
<div>不應有恨 </div>
<div>何事長向別時圓 </div>
<div>人有悲歡離合 </div>
<div>月有陰晴圓缺 </div>
<div>此事古難全 </div>
<div>但願人長久 </div>
<div>千里共嬋娟 </div>
</article>
</body>
</html>