IMWeb小白-卡片作业

最新推荐文章于 2023-02-16 00:15:39 发布

qq_30407907

最新推荐文章于 2023-02-16 00:15:39 发布

阅读量320

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_30407907/article/details/70254990

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;
}

效果如下：

这里写图片描述

qq_30407907

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMWeb小白-卡片作业

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=imag
复制链接

扫一扫