html - 使用 div 和 CSS 构建书籍封面

Question

是否可以使用一些div和css来制作一个像下面这样的书的封面(忽略橙色背景)带有可编辑的标题，我在网上查到的大多数书的封面都不是这样的。我知道可能问了很多，但我真的很感激任何帮助。

Answer 1

是的。

<div style="width:400px; height:800px">
    <div style="display: table; width:400px; height: 100px; overflow: hidden;">
        <div style="display: table-cell; vertical-align: middle; background-color:blue;">
            <h4 style="color:white;text-align:center">
                <i style="color:yellow">image</i>Training book header text
            </h4>                       
        </div>
    </div>
    <div style="display: table; width:400px; height: 250px; overflow: hidden;">
        <div style="display: table-cell; vertical-align: middle;">
        <h1 style="text-align:center">Training book body text</h1>
        </div></div>
<div style="display: table; width:400px; height: 100px;">
        <div style="display: table-cell; vertical-align: middle; background-color:grey;">
            <h4 style="color:white;text-align:center">
                Training book footer text<i style="color:yellow; float:right">image</i>
            </h4>                       
        </div>
    </div>
</div>

https://jsfiddle.net/457567wy/