css自制图书封面效果

先上效果

image

image.png
1 HTML骨架

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

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

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

<ul class='items'>
<li class='item'>
<div class='item-banner'>
<div class='item-header'>生活中总是充满了乐趣</div>
<div class='item-name'>聊聊我的大学室友</div>
<div class='item-author'>@张三著</div>
</div>
<div class='item-description'>那些回忆，那些事。。。</div>
</li>
</ul>
当前效果图

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

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.items .item {
width: 230px;
height: 320px;
background: #ccc;
list-style: none;
text-align:center;
}

    .item-banner {
        background: #666;
        color: #FFF;
    }
    .item-header {
        font-size: 12px;
        line-height: 52px;
    }
    .item-name {
        font-size: 22px;
        line-height: 74px;
    }
    .item-author {
        font-size: 14px;
        text-indent: 7em;
        padding-bottom: 70px;
    }
    .item-description {
        background: #eee;
        height: 104px;
        line-height: 76px;
        text-indent: 3em;
        font-size: 12px;
    }
</style>

</head>
<body>
<ul class='items'>
<li class='item'>
<div class='item-banner'>
<div class='item-header'>生活中总是充满了乐趣</div>
<div class='item-name'>聊聊我的大学室友</div>
<div class='item-author'>@张三著</div>
</div>
<div class='item-description'>那些回忆，那些事。。。</div>
</li>
</ul>
</body>
</html>

css自制图书封面效果

推荐阅读更多精彩内容