CSS样式的段落,带有段落编号和旁注

  • 本文关键字:段落 编号 样式 CSS html css
  • 更新时间 :
  • 英文 :


我想在网上放一篇带有段落编号和旁注的文本。我用哈克贝利-芬恩作为测试:看http://jsfiddle.net/29Mdt/.

我想把段落编号放在左边的空白处,把旁注放在右边的空白处。使用HTML中的表非常容易做到这一点,但我正在尝试使用CSS,而且我是CSS的初学者。前面关于段落编号的问题可以在这里找到,但我觉得这些回答根本没有帮助。

提前感谢您的帮助。

一种方法:

.chapter {
    counter-reset: paragraph;
    padding-left: 20px;
}
.page p {
    width: 400px;
}
.page p:before {
    position: absolute;
    margin-left: -20px;
    color: #CCC;
    content: counter(paragraph);
    counter-increment: paragraph;
}
.sidenote {
    position: absolute;
    margin-left: 420px;
    font-size: 14px;
    color: #E22;
    width: 100px;
}

HTML:

<body class="chapter">
    <div class="page">
        <h1>Tom Sawyer</h1>
        <p>You don't know about me...</p>
        <!-- sidenote to the paragraph following the aside tag -->
        <aside class="sidenote">The widow she cried over me...</aside>
        <p>Now the way that the...</p>
    </div>
</body>

最新更新