如何代表lyrics和corresponding translation strophe in HTML?
只是一个例子:
也许是太晚了,也许是太早了,也许是太晚了,也许是太晚了,
多年来没有想到的,它没有打扰我的年龄,
我看起来像唐胡安,我resemble now Don Juan,真的,
像一个有风的诗人。像一个闪光的人。
如何代表它在SEO friendly和semantic途径?
P.S.I really hate solution with tables and don't want to put original line and translated in one container)(
最佳答案
嗯。从语义上讲,我可以看到这些是列表或段落的论点。
我我想我应该这样做(为代码膨胀道歉):
<style>
.song
{
background: #444;
overflow: auto;
zoom: 1.0;
padding-bottom: 1em;
border: 1px solid #000;
}
.song .lyrics
{
float: left;
color: #ddd;
margin: 1em;
width: 20em;
}
.song #russian.lyrics { background: #009; }
.song #english.lyrics { background: #090; }
.song .lyrics p { margin: .5em .2em; }
</style>
<div class="song">
<div id="russian" class="lyrics">
<p>Может, поздно, может, слишком рано,</p>
<p>И о чем не думал много лет,</p>
<p>Походить я стал на Дон-Жуана,</p>
<p>Как заправский ветреный поэт.</p>
</div>
<div id="english" class="lyrics">
<p>Maybe, it's too late or, maybe, early,</p>
<p>It has not occurred to me for years,</p>
<p>I resemble now Don Juan, really,</p>
<p>Like a proper flippant man of verse.</p>
</div>
</div>