在一个<a>标签中加上一个<img>标签内容，即可让该<img>拥有一个超链接。然后可以在后面继续写文字，此文字就会显示成超链接，点击该文字即可进入超链接。下面实例：
<a href="www.baidu.com">
<img border="0" src="/i/eg_buttonnext.gif" /></a>
扩展资料格式标志标签：
<p></p>创建一个段落 （英文全称：Paragraphs）
<p align="">将段落按左、中、右对齐
<br/>定义新行
<blockquote></blockquote>从两边缩进文本。
<dl></dl>定义列表（英文全称：DefinitionList）。
<dt>放在每个定义术语词前（定义术语、英文全称：DefinitionTerm）。
<dd>放在每个定义之前（定义说明、英文全称：DefinitionDescription）。
<ol></ol>创建一个标有序的列表，默认前面有数字，从数字“1”开始计数，依次叠加，也可以设置为字母或从任何自然数开始计数的列表项。
参考资料HTML-百度百科
我看了一下你的代码，你想要的效果跟你的代码对不上的。
你可以这么分解： 一个图片+文字说明是一行
这一行里分2列 一列是图片 一列是文字 全部靠左流动。文字说明又分为2行 。
如图：
代码如下：
<html><head>
<title>div</title>
<style type="text/css">
.line{
height: 80px
clear: both
background-color: #ccc
padding: 5px
}
.leftimg{
width: 70px
height: 70px
float: left
background-color: #ddd
}
.righttxt{
float: left
}
.righttxt dd{
height: 30px
margin: 0 5px 5px 5px
background-color: #ddd
}
</style>
</head>
<body>
<div id="con">
<div class="line">
<div class="leftimg">
图片
</div>
<div class="righttxt">
<dd>右边边第一行</dd>
<dd>右边第二行</dd>
</div>
</div>
</div>
</body>
</html>
从设计图到网页的实现，主要是思考怎么分块。只要弄清楚了怎么分块，就跟搭积木一样，组合起来就是了。
希望我的答案能帮到你。
1、网页中添加图片html代码，使用 <img src="图片地址.jpg"><img>标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。另外也可以添加高度width 和 高度height alt等属性标签。
比如：<img src="图片地址.jpg" width="300" height="200" alt="图片说明或标题">
2、网页中为图片添加链接，直接为图片添加href。
<a href="链接地址"><img src="图片地址.jpg"></a>
<a>标签的 href 属性用于指定超链接目标的 URL。
href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。
如果用户选择了 <a>标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）