css自制图书封面效果

先上效果

image

image.png
1 HTML骨架

一张封面，需要有这么几个信息：

1.梗概
2.文章名称
3.作者
4.简介

我们来把这些东西填上去，然后随便编一点数据

• 
  
  
  

  生活中总是充满了乐趣

  
  

  聊聊我的大学室友

  
  

  @张三 著

  
  
  
  
  那些回忆，那些事。。。
  
  

当前效果图

image

2 添加图书封面整体样式
.items .item {
width: 230px;
height: 320px;
background: #ccc;
list-style: none;
text-align:center;
}

image

3 banner部分添加背景色，文字颜色
.item-banner {
background: #666;
color: #FFF;
}

image

4 header部分的文字调整
.item-header {
font-size: 12px;
line-height: 52px;
}

image

5 文章名称的样式调整

image

6 作者区域字体样式调整
.item-author {
font-size: 14px;
text-indent: 7em;
padding-bottom: 70px;
}

image

7 简介部分
.item-description {
background: #eee;
height: 104px;
line-height: 76px;
text-indent: 3em;
font-size: 12px;
}

image

全部代码

• 
  
  
  

  生活中总是充满了乐趣

  
  

  聊聊我的大学室友

  
  

  @张三 著

  
  
  
  
  那些回忆，那些事。。。