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

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

 
 

<!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 >
以下是案例中的图片!


猜你喜欢

转载自blog.csdn.net/weixin_42139375/article/details/80649492