3

如何在 HTML 中表示歌词和相应的翻译段？

只是一个例子：

Может, поздно, может, слишком рано, 也许，为时已晚，或者，也许，早，
И о чем не думал много лет，多年来我一直没有想到，
Походить я стал на Дон-Жуана，我现在很像唐璜，真的，
Как заправский ветреный поэт。就像一个适当的轻率的诗文人。

如何以 SEO 友好和语义的方式表示它？

PS我真的很讨厌使用表格的解决方案，并且不想将原始行和翻译放在一个容器中（我认为这对谷歌来说很丑陋和不好）。

4

5 回答 5

4
于 2009-08-12T20:11:08.203 回答
2

你使用 div。您将每组歌词放在一个 div 标签中，然后使用一些 CSS 来格式化两个相邻的 div，例如：

.lyrics {
 float: left;
}

还有许多其他的 CSS 技术可以做同样的事情。

于 2009-08-12T20:04:12.273 回答
1

嗯。从语义上讲，我可以看到这些是列表或段落的论据。

我想我会选择这样的东西（为代码膨胀道歉）：

<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>
于 2009-08-12T20:18:33.663 回答
1

如前所述，使用带有 CSS 的 div 来实现您想要的特定效果，无表格。这是一个非常全面的 CSS 定位概述页面，可帮助您入门。
作为您可能使用的示例，请尝试以下操作：

<html>
<head>
<style type="text/css">
.lyrics {
   width: 200px;
   height: 100px;
   border: 1px solid black;
}
.original {
  float: left;
}
.translation {
  float: right;
}
</style>
</head>
<body>
<div class="lyrics original">(lyrics here)</div>
<div class="lyrics translation">(translation here)</div>
</body>
</html>
于 2009-08-12T20:14:44.577 回答
0

我实际上认为一张桌子在这里最有意义。

于 2009-08-13T11:38:21.533 回答