HTML图片和多行文字并列显示
上课涉及到一点HTML编程，有的时候网页上有图片和多行文字并列显示的情况，类似下面的简历那样：查阅了一些方法，才得以实现。记录在这里，以备后用，也方便后来人。首先，可以采用无边框table实现图片布局，具体方法可以参考我的另一篇博客：https://blog.csdn.net/qq_39609900/article/details/79670776本文主要介绍<img>
上课涉及到一点HTML编程，有的时候网页上有图片和多行文字并列显示的情况，类似下面的简历那样：
查阅了一些方法，才得以实现。记录在这里，以备后用，也方便后来人。
首先，可以采用无边框table实现图片布局，具体方法可以参考我的另一篇博客：
https://blog.csdn.net/qq_39609900/article/details/79670776
本文主要介绍<img>标签中绝对位置的使用。
<div>
<img style="position:absolute;margin-left:960px" src="D:\证件照.png">
</div>
在这里指定图片放置的绝对位置，左起960个像素点的位置
上面的效果，实现源码为：
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<div>
<img style="position:absolute;margin-left:960px" src="D:\证件照.png" width="118" height="165" alt="证件照">
</div>
<pre>
<font style="margin-left:350px" size="10" color="black">XXX</font><font style="margin-left:270px" size="4">北京市XXXXXXXXXXXXXXXXXXXXXXXXXXXX</font>
</pre>
<pre>
<font style="margin-left:900px" size="4" color="black">XXXXXX</font>
</pre>
<pre>
<font style="margin-left:330px" size="5" color="gray">北京XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</font><font style="margin-left:140px" size="4" color="black">TEL:XXXXXXXXXXX</font>
</pre>
<pre>
<font style="margin-left:743px" size="4">XXXXXXXXXXXXXXXXXXXXXXXXXX</font>
</pre>
</body>
</html>
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)