上课涉及到一点 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>
来源: https://www.2cto.com/kf/201803/732663.html