使用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/