您现在的位置:首页 >> 前端 >> 内容

HTML图片和多行文字并列显示基础讲解

时间:2018/3/24 10:47:58 点击:

  核心提示:上课涉及到一点HTML编程,有的时候网页上有图片和多行文字并列显示的情况,类似下面的简历那样:查阅了一些方法,才得以实现。记录在这里,以备后用,也方便后来人。首先,可以采用无边框table实现图片布局...

上课涉及到一点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>

Tags:HT TM ML L图 
作者:网络 来源:long_sir_k