HTML图片和多行文字并列显示基础讲解
上课涉及到一点html,有的时候网页上有图片和多行文字并列显示的情况,类似下面的简历那样:
查阅了一些方法,才得以实现。记录在这里,以备后用,也方便后来人。
首先,可以采用无边框table实现图片布局。
本文主要介绍<img>标签中绝对位置的使用。
<p>
<img style="position:absolute;margin-left:960px" src="d:\证件照.png">
</p>
在这里指定图片放置的绝对位置,左起960个像素点的位置
上面的效果,实现为:
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<p>
<img style="position:absolute;margin-left:960px" src="d:\证件照.png" width="118" height="165" alt="证件照">
</p>
<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>
上一篇: node版本管理工具n包使用教程详解
下一篇: html中base标签的作用(代码讲解)