先上效果
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>
网友评论