Fatal编程技术网
  • html/
  • Html 在页脚中添加指向图像的链接

Html 在页脚中添加指向图像的链接

html css image

Html 在页脚中添加指向图像的链接,html,css,image,footer,Html,Css,Image,Footer,我的页脚包含三张图片，我想添加一个链接到（coyright and companysite），一旦你点击图片，它会带你到我尝试过的网站，我在这里找到了不同的方法，但它对我不起作用。我应该补充什么 页面代码： <body> <div id="wrap"> <div id="header"> </div> <div id="main"> <div id="content"

我的页脚包含三张图片，我想添加一个链接到（coyright and companysite），一旦你点击图片，它会带你到我尝试过的网站，我在这里找到了不同的方法，但它对我不起作用。我应该补充什么

页面代码：

<body>
<div id="wrap">

        <div id="header">

        </div>

    <div id="main">

        <div id="content">

        </div>
    </div>

</div>



<div id="footer">


    <div id="img-1">


    </div>

</div>


</body>
只需将您的img标签包装在链接标签中，如下所示：

<a href="my_url.html"><img src="my_img.jpg></a>
然后图像的任何部分都将是可单击的链接。



<div id="img-1" onclick="window.location='http://www.google.com'" style="cursor:pointer">

 </div>
您必须在锚元素中添加图像，如图所示：

<div id="footer">

   <div id="img-1">
      <a href="yourUrl1"><img src="yourImage1"/></a>
      <a href="yourUrl2"><img src="yourImage2"/></a>
      <a href="yourUrl3"><img src="yourImage3"/></a>
   </div>

</div>
就是这样。

看起来您正在将所有图像作为背景放置在一个div中。请使用三个单独的图像：

<div id="footer">
    <div id="img-1">
         <a href="url1.html"><img src="../img/footer.png" alt="" /></a>
         <a href="url2.html"><img src="../img/companysite.png" alt="" /></a>
         <a href="url3.html"><img src="../img/copyright.png" alt="" /></a>
    </div>
</div>
改变

<div id="img-1">
</div>
进入

链接网站有两种方法。（如果使用html）

1.使用锚定标记（最喜欢的方法）
2.使用window.location功能

<div onclick="window.location='http://www.yahoo.com'" style="cursor:pointer"></div>

首先，您需要澄清，在一个HTML页面上，您不能使用多个相同的名称ID标记，否则您的页面上会出现W3C验证错误

为了实现您所期望的目标，如下所示：

//这是您的HTML代码

<div id="footer">
    <div id="img-1">
         <a href="copyrights.html">CopyRights</a>
    </div>
    <div id="img-2">
         <a href="company.html">Company</a>
    </div>
</div>

**//Here is your CSS Code**
#footer {
    position: relative;
    margin-top: -200px;     height: 200px;
    clear:both;
    bottom:0;
    height:200px;
    background : url('../img/footer.png') center no-repeat
    } 

#img-1 {
   url('../img/companysite.png') left no-repeat;
    }
#img-2 {
   url('../img/copyright.png') right no-repeat,  ;
    }


**//这是你的CSS代码**
#页脚{
位置：相对位置；
边缘顶部：-200px；高度：200px；
明确：两者皆有；
底部：0；
高度：200px；
背景：url（'../img/footer.png'）中心不重复
} 
#img-1{
url（'../img/companysite.png'）没有重复；
}
#img-2{
url（'../img/copyright.png'）正确无重复；
}
您尝试了哪些方法？您需要对代码再进行一次编辑；-）：<代码>@Broco对不起，我看不出有什么不同？我错过了什么？在jpg之后的引用；-）我宁愿使用
a
标记。这就是它们的用途，也更好地用于SEO目的。感谢您的新想法在上述代码中检查您的图像路径为../before图像路径意味着进入一个文件夹并查找图像文件夹。如果您在html或php文件所在的同一文件夹中有images文件夹，则删除../并且您的路径应如下所示：url（'img/companysite.png'）不重复；希望它能工作，因为我还没有测试代码 
<a href="your desired link">
    <div id="img-1">
    </div>
</a>

<a href="targetUrl.html">Your element tags like p,span,img,... </a>

<div onclick="window.location='http://www.yahoo.com'" style="cursor:pointer"></div>

<div id="footer">
    <div id="img-1">
         <a href="copyrights.html">CopyRights</a>
    </div>
    <div id="img-2">
         <a href="company.html">Company</a>
    </div>
</div>

**//Here is your CSS Code**
#footer {
    position: relative;
    margin-top: -200px;     height: 200px;
    clear:both;
    bottom:0;
    height:200px;
    background : url('../img/footer.png') center no-repeat
    } 

#img-1 {
   url('../img/companysite.png') left no-repeat;
    }
#img-2 {
   url('../img/copyright.png') right no-repeat,  ;
    }