Fatal编程技术网
  • html/
  • Html 如何添加一个"；a href"；链接到A"；div"；？

Html 如何添加一个"；a href"；链接到A"；div"；？

html

Html 如何添加一个"；a href"；链接到A"；div"；？,html,href,add,Html,Href,Add,我需要知道如何将a href链接添加到div？您是否将a href标记放在整个“buttonOne”div的周围？还是应该在“linkedinB”分区的周围或内部 这是我的HTML： <div id="buttonOne"> <div id="linkedinB"> <img src="img/linkedinB.png" width="40" height="40"> </div> </div> 在这种情况下，这无关

我需要知道如何将a href链接添加到div？您是否将a href标记放在整个“buttonOne”div的周围？还是应该在“linkedinB”分区的周围或内部

这是我的HTML：

<div id="buttonOne">
  <div id="linkedinB">
    <img src="img/linkedinB.png" width="40" height="40">
  </div>
</div>
在这种情况下，这无关紧要，因为两个
div
s之间没有内容

任何一个都会让浏览器向下滚动到它

a
元素如下所示：

<a href="mypageName.html#buttonOne">buttonOne</a>
或：
我想说：

 <a href="#"id="buttonOne">
            <div id="linkedinB">
                <img src="img/linkedinB.png" width="40" height="40">
            </div>
      </div>
然而，它仍然是一个链接。如果您想将链接更改为按钮，您应该将#buttonone重命名为#buttonone a{your css here}。

您不能用a标记将其环绕吗

  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>
尝试使用javascript实现以下功能：

<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
    function myhref(web){
      window.location.href = web;}
</script>

一些东西
函数myhref（web）{
window.location.href=web；}
尝试创建名为
overlay
的类，并对其应用以下css：

a.overlay { width: 100%; height:100%; position: absolute; }
确保将其放置在已定位的图元中

现在只需放置一个
PhilipK的建议可能有效，但无法验证，因为不能将块元素（
div
）放置在内联元素（
a
）中。当你的网站没有验证时，W3C忍者会来找你

另一个建议是尽量避免内联样式。

您的解决方案似乎不适合我，我有以下代码。如何将链接放入最后两个div。 


/*进口*/
@导入url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
字体系列：“流沙”，无衬线；
字体大小：粗体；
文本对齐：居中；
文本转换：大写；
-webkit过渡：所有0.25秒轻松；
-moz转换：所有0.25秒的易用性；
-ms转换：所有0.25秒的易用性；
-o型过渡：所有0.025秒缓解；
}
/*颜色*/
#奥拉{
背景色：#e67e22；
}
#红色的{
背景色：#e74c3c；
}
#奥拉布{
背景色：白色；
边框：5px实心#e67e22；
}
#雷德{
背景色：白色；
边框：5px实心#e74c3c；
}
/*结束颜色*/
.B{
宽度：240px；
高度：55px；
保证金：自动；
线高：45px；
显示：内联块；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
} 
#奥拉布：悬停{
背景色：#e67e22；
}
#悬停{
背景色：#e74c3c；
}
#鞭子：悬停{
背景色：#ecf0f1；
}
/*边界的尽头
.反转：悬停{
-webkit过滤器：倒置（1）；
-moz滤波器：反转（1）；
-ms过滤器：反转（1）；
-o型滤波器：反向（1）；
}
平面和现代按钮
边界样式'
查看电影列表
免费租用一天
几分钟前，这篇文章有一些CSS，我创建了一个CSS。享受吧！曾经有一段时间，标签是超文本上的锚。因此，div周围没有锚，因为它们不是真正的内容，而是内容包装器。年轻男孩跳过了以前的互联网时代…：）这会在ie8中产生问题，这是因为语义不正确：因为语义不正确。请参阅：在HTML5中，在
中使用
回答是正确的。签出上面@zhirzh链接的更新页面。此外，当
标签包围
时，几乎不可能对其进行样式设置。 
a.overlay { width: 100%; height:100%; position: absolute; }

<div id="buttonOne">
  <a class="overlay" href="......."></a>
    <div id="linkedinB">
       <img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
    </div>
 </div>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
  font-family: "Quicksand", sans-serif; 
  font-weight: bold; 
  text-align: center;  
  text-transform: uppercase; 
  -webkit-transition: all 0.25s ease; 
  -moz-transition: all 0.25s ease; 
  -ms-transition: all 0.25s ease; 
  -o-transition: all 0.025s ease; 
}

/* Colors */

#ora {
  background-color: #e67e22; 
}

#red {
  background-color: #e74c3c; 
}

#orab {
  background-color: white; 
  border: 5px solid #e67e22; 
}

#redb {
  background-color: white; 
  border: 5px solid #e74c3c; 
}
/* End of Colors */

.B {
  width: 240px; 
  height: 55px; 
  margin: auto; 
  line-height: 45px; 
  display: inline-block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  -o-box-sizing: border-box; 
} 

#orab:hover {
  background-color: #e67e22; 
}

#redb:hover {
  background-color: #e74c3c; 
}
#whib:hover {
  background-color: #ecf0f1; 
}

/* End of Border

.invert:hover {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -ms-filter: invert(1);
  -o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2> 

<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>

</html>