网页制作,前端基础展示图片和文档

上面是图片效果,下面是简单的实现代码!最后面有素材图片一张!仅供参考!



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.p {
padding: 20px;
height: 302px;
width: 602px;
border: 1px solid black;
line-height: 24px;
}
.p img {
float: left;
}
.p p {
width:394px;
margin-top:0px;
margin-left:20px;
float:left;
font-size:14px;
line-height:24px
}
</style>
</head>
<body>


<div class="p">

<img src="demo.png" alt="可爱">
<p>
&nbsp;&nbsp;&nbsp;&nbsp; 爱,是两个人的事,彼此信任,方可长久。
这个世界对我很公平,让我在千里之外还能牵挂你,这或许是我前世修来的福以至于今生遇见你。距上次见面后已经有两月时间,我不知道你是否想过我?是否心里牵挂我?或许有,或许没有,无所谓,我不在乎你的这些,因为有我想你就够了。
自从给你过完生日后,我回来都在想一个问题,我该如何来爱你?
但到现在我都没有想明白,或许我对你的了解太少了,我不知道该如何爱你,因为我不想自私的去爱你!<br>&nbsp;&nbsp;&nbsp;&nbsp;只想和你快乐的相爱。
</p>

</div>
</body>
</html>
以下是案例中的图片!

网页制作,前端基础展示图片和文档

相关文章:

  • 2021-09-26
  • 2022-12-23
  • 2021-12-26
  • 2021-12-26
  • 2022-03-02
  • 2022-01-07
  • 2021-12-11
  • 2021-10-12
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-06-12
  • 2021-12-19
  • 2021-11-29
  • 2021-11-19
  • 2021-06-06
相关资源
相似解决方案