HTML结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>卡片</title>
</head>
<body>
<div class="yilumi">
<img src=images/伊路米.jpg alt="伊路米" />
</div>
<div class="萌">
<img src=images/萌.png alt="萌" />
</div>
<div class="文字">
<p>伊路米·揍敌客,奇犽的大哥,揍敌客家族长子。擅长用念力易容,常用的招数为针人。
表情很少变化,很难揣摩出他心里在想什么。是个非常优秀的职业杀手,做事很有原则。</p>
</div>
<div class="花">
<img src=images/花.png alt="花" />
</div>
</div>
<div class="小花">
<img src=images/小花.png alt="小花" />
</div>
</body>
</html>
css样式:
.yilumi{
margin-top:30px;
margin-left:500px;
border:1px solid #000;
width:322px;
height:550px;
background-color:rgb(30,50,65);
border-radius:10px;
box-shadow: 10px 10px 5px #888888;
}
.yilumi img{
width:270px;
height:300px;
margin-left:50px;
margin-top:1px;
border-radius:10px;
}
.萌{
position:absolute;
left:500px;
top:40px;
}
.文字{
position:absolute;
left:530px;
top:360px;
width:280px;
height:250px;
color:white;
text-indent:35px;
}
.花{
position:absolute;
left:740px;
top:490px;
width:10px;
height:20px;
}
.花 img{
max-width:100px;
}
.小花{
position:absolute;
left:790px;
top:470px;
width:10px;
height:20px;
}
.小花 img{
max-width:30px;
}