<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四月，你好</title>
<style>
.poster{
margin: auto;
width:520px ;
background:linear-gradient(to bottom,#ffeec1,#ff9ab3);
height:900px;
text-align: center;
padding: 20px;
}
.poster>img{
width: 100%;
height: 500px;
}
.poster_font{
display: flex;
justify-content: space-between;
width: 100%;
background: linear-gradient(to bottom right,#f7aeae,#ff6b7c);
height: 400px;
margin-top: -4px;
}
.font_item{
width: 180px;
margin:15px 0 0 15px;
}
.font_item>.hello_april{
width: 70px;
height: 70px;
border: 2px solid #fcf0d0;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
font-size: 45px;
color: #fffefd;
font-weight: 600;
font-family: "方正姚體";
margin-top:10px;
}
.font_enjoy>i{
font-size: 28px;
color: #fcf0d0;
letter-spacing: 10px;
font-family: Arial;
padding-top: 80px;
font-family: Helvetica;
margin-right: 20px;
}
.life_font{
text-decoration: underline;
overflow: hidden;
width: 75px;
display: inline-block;
vertical-align: bottom;
margin-left: 12px;
}
.cur_date{
font-size: 60px;
color: #fff7dc;
text-align: right;
font-family: Times New Roman;
position: relative;
top:50px;
height: 200px;
}
.cur_date>span{
position: absolute;
/* top: 2px; */
}
.cur_date>.left{
left: 100px;
top: -12px;
}
.cur_date>.right{
right: 55px;
top: 35px;
}
.slash{
border: 1px solid transparent;
border-right: 1.5px solid #fff7dc;
transform: rotate(40deg);
display: inline-block;
height: 100px;
right: 86px;
top:-5px;
}
.cur_date> .ellipses_left{
font-size: 35px;
left: 50px;
top: 80px;
letter-spacing: 4px;
}
.cur_date> .ellipses_right{
font-size: 35px;
top: 100px;
right: 15px;
letter-spacing: 4px;
}
.poster_left_bottom{
padding-top:30px ;
}
.poster_left_bottom>div{
color: #fff7dc;
font-size: 23px;
font-family: "方正姚體";
text-align: left;
padding-left: 15px;
line-height: 1.8em;
}
</style>
</head>
<body>
<div class="poster">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1261598212,2989183449&fm=15&gp=0.jpg" alt="">
<div class="poster_font">
<div class="font_item">
<span class="hello_april">四</span>
<span class="hello_april">月</span>
<span class="hello_april">你</span>
<span class="hello_april">好</span>
<div class="poster_left_bottom">
<div>——</div>
<div>擁抱生活</div>
<div>陽光總在風雨後</div>
</div>
</div>
<div class="font_enjoy">
<i>enjoy</i>
<i class="life_font">life</i>
<div class="cur_date">
<span class="left">21</span>
<span class="slash"></span>
<span class="right">4</span>
<span class="ellipses_left">..........</span><br>
<span class="ellipses_right">..........</span>
</div>
</div>
</div>
</div>
</body>
</html>
素材源於： https://juejin.im/post/5e9c1119e51d45470e2bef5e#heading-0 裏的一張海報