Question

我想在我的页面上创建这个记事本的CSS / HTML版本：

notepad

我在考虑使用这样一个简单的表：

<div id="notepad">
        <table> 
            <thead id="tbl_header">Comments</thead>     
            <tr></tr>
            <tr>
                <td class="col1">Dot</td>
                <td class="col2">Text for column 2</td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr> 
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                     <td class="col3"></td>
            </tr>
        </table>    
    </div>

所以我在想的是切割图形。有顶部，是<thead>的bg img。然后只创建一行作为行（将有两个图形，一个用于col1和col2 - 所以当创建一个新行时，将填充两列的bg），以便它可以根据需要垂直缩放。然后，对于最后一组，我还有两个图形。一个是col1。一个用于col2（这是常规行但宽度稍窄）并且卷曲将是col3。

我是否有可扩展的方法，使用CSS＆amp;仅限HTML（没有JS或jQuery）？

感谢。

P.S。或者是否有另一种方法来创建同样的东西，而不必使用bg图像 - 只使用CSS？

Answer 1

使用表来执行此操作可能不正确（我假设您的“记事本”未填充表格数据）;相反，一个简单的HTML5 <section>就足够了：

<section class="notepad">
    <header><h1>Comments</h1></header>
    <!-- Your text here -->
    <footer>&nbsp;</footer>
</section>

使用适当的CSS，这很容易设计成“记事本”：

.notepad, .notepad>* {
    margin: 0;
    padding: 0;
    overflow: auto;
}
.notepad {
    background: url('middle-part.png');
}
.notepad header {
    background: url('top-part.png');
}
.notepad footer {
    background: url('curl-part.png');
    float: right;
    /* Set a correct size as well. */
}

未测试;可能需要一些调整。请务必正确设置line-height，以便文本不会与行行重叠。如果您使用的是HTML4（甚至是XHTML，耸肩），只需使用<div>替换HTML5特定的元素。

Answer 2

您似乎希望内容具有垂直节奏。要实现这一点非常艰苦，但这样做是值得的。基本上，您选择一个行高，然后使所有内容的垂直高度都是您选择的行高的倍数。这是一个可以更好地解释它的链接以及我使用的一些工具：

如何像记事本一样设置表格？

2 个答案: