关于html：如何向“ div”添加“ a href”链接？


How To Add An “a href” Link To A “div”?

我需要知道如何将href链接添加到div吗？ 您是否将href标签放在整个" buttonOne" div周围？ 还是应该在" linkedinB" div周围或内部？

这是我的HTML：

1
    <img src="img/linkedinB.png" width="40" height="40">
相关讨论

您不能在标签周围加上标签吗？

1
            <img src="img/linkedinB.png" width="40" height="40">
相关讨论

尝试用javascript实现：

1
2
3
4
some stuff
<script type="text/javascript">
    function myhref(web){
      window.location.href = web;}

在这种情况下，这没关系，因为两个div之间没有内容。

任一种都会使浏览器向下滚动到它。

a元素如下所示：

1
buttonOne

要么：

1
linkedinB

尝试创建一个名为overlay的类，并对其应用以下CSS：

1
a.overlay { width: 100%; height:100%; position: absolute; }

确保将其放置在定位的元素中。

现在，只需在要可链接的div中放置带有该类的标签：

1
       <img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>

PhilipK的建议可能有用，但无法验证，因为您无法将块元素(div)放在内联元素(a)内。当您的网站未通过验证时，W3C Ninja's就会为您服务！

另一种建议是尝试避免内联样式。

我会说：

1
                <img src="img/linkedinB.png" width="40" height="40">

但是，它仍然是一个链接。如果您想将链接更改为按钮，则应将#buttonone重命名为#buttonone a {您的CSS此处}。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<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>
Flat and Modern Buttons
Border Stylin'

See the movies list
Avail a free rental day

</html>