html - 放置一些图片后无法点击我的链接

标签 html css hyperlink

我是 html 和 css 的新手,所以我有一个问题。

我正在处理一些事情,但是在我的页面上放置了一些图片后,我无法再点击我的链接。

HTML:

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>Rijschool Houben</title>
 </head>
 <body>
   <div id="header"></div>
    <div id="header-pic"><img src="image/test.png"></div>
    <p>
     <div id="nav-bar">
         <ul>
           <li>|<a href="http//www.google.nl">Home</a>|</li>
           <li><a href="contact">Info</a>|</li>
           <li><a href="portfolio">Prijzen</a>|</li>
           <li><a href="over ons">Acties</a>|</li>
           <li><a href="over ons">Machtiging</a>|</li>
           <li><a href="over ons">Theorie</a>|</li>
           <li><a href="over ons">Begeleid rijden</a>|</li>
           <li><a href="over ons">Bromfiets</a>|</li>
           <li><a href="over ons">Contact</a>|</li>
         </ul>
     </div>
   </p>
   <p>
     <div id="icon-main">
         <i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
         <i class="fa fa-paste" style="font-size:18px;"></i><a>raymond@rijschoolhouben.nl</a><br />
         <i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
     </div>
   </p>
   <p>
    <div id="img-1">
      <img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
    </div>
    <div id="img-2">
      <img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
    </div>
    <div id="img-3">
      <img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
    </div>
    <div id="img-4">
      <img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
    </div>
    <div id="img-5">
      <img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
    </div>
    <div id="img-6">
      <img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
    </div>
  </p>
 </body>
</html>

CSS:

div#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: white;
}

div#header-pic{
  position: fixed;
  height: 50px;
  left: 500px;
}
div#nav-bar{
  position: fixed;
  padding-top: 130px;
  left: 0;
  width: 100%;
  white-space: nowrap;
}

div#nav-bar ul{
  list-style: none;
  text-align: center;
  background-color: #323232;
  padding: 10px 0;
}

div#nav-bar li{
  display: inline;
}

div#nav-bar li a{
  text-decoration: none;
  color: white;
  padding: 14px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#icon-main{
  position: fixed;
  color: #323232;
  padding: 10px;
}

div#icon-main i{
  padding: 5px;
}

div#icon-main a{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#img-1 {
  position: fixed;
  left: 0;
  padding-top: 184px;
  width: 100%;
}

div#img-2 {
  position: fixed;
  padding-top: 184px;
  padding-left: 255px;
}

div#img-3 {
  position: fixed;
  padding-top: 184px;
  padding-left: 915px;
}

div#img-4 {
  position: fixed;
  padding-top: 184px;
  padding-left: 585px;
}

div#img-5{
  position: fixed;
  padding-top: 184px;
  padding-left: 1245px;
}

div#img-6 {
  position: fixed;
  padding-top: 184px;
  padding-left: 1575px;
}

我知道代码不好,但我希望有人能帮助我! 这是一个 fiddle .

-瑞安

最佳答案

我查看了您的外部代码。请将您的 HTML 和 CSS 添加到您在 Stack Overflow 中的问题。

您从外部 HTML 中获得以下代码:

<a>046-4524501</a>

不能用作链接。

你有这个代码

<a href="http//www.google.nl">Home</a>

正如您所期望的那样工作。

改变这一行:

<a>046-4524501</a>

<a href="http//www.example.com">046-4524501</a>

Where href="你希望链接到哪里"。

都是关于“href”的值

关于html - 放置一些图片后无法点击我的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34753820/

相关文章:

html - 从较小的子宽度开始,是否可以通过仅使用相对宽度缩小浏览器窗口来将其设置为等于其父宽度?

html - 从页面上的链接中删除所有下划线?

php - 关于菜单和内容最佳实践的简单 PHP 问题

java - 我可以在java applet loader消失之前加载图像吗?

html - iOS Hpple HTML 解析

javascript - 我的代码在 jquery mobile 1.0 中运行良好但在 1.4.2 中运行不正常

javascript - 在 CSS 网格布局中使用 em 或百分比

java - Android - TextView maxWidth 奇怪的问题

javascript - 悬停时 <li> 顶部的 DIV 菜单

css - 单击图像的透明区域