Question

我正在尝试教自己引导程序，但我遇到了一个奇怪的问题：我的导航栏似乎有一些链接指向不存在的东西。

在导航栏上方，我有一个社交媒体联系人列表，但最后一个列表项（instagram）似乎是在导航栏中创建超链接。现在，社交媒体列表和导航栏列表位于完全独立的容器中，Instagram <a>标记已关闭，<li>和<ul>标记已关闭。

当我查看浏览器开发人员工具时，它会显示其他不在我的HTML中的Instagram链接，所以我很茫然。我肯定错过了什么。网站是coledavidson.ca/web（它还在开发中，不要判断）。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Cole Davidson</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">

<!--HEADER SECTION-->
    <div id="header">
    <div class="row">
        <span align="center"></center><div class="col-sm-9 header-img"><div class="header-img-box"><img src="images/Cole%20Davidson%20-%20White.png"></div></div></span>
    <div class="col-sm-3 social-media">
    <ul>
        <li><a href="mailto:coledavidson103@gmail.com"><img src="images/sm-icons/email.png"</a></li>
        <li><a href="http://twitter.com/cole_davidson"><img src="images/sm-icons/twitter.png"</a></li>
        <li><a href="http://facebook.com/cole.jorden.davidson"><img src="images/sm-icons/fb.png"</a></li>
            <li><a href="http://linkedin.com/cole.davidson"><img src="images/sm-icons/linkedin.png"</a></li>
        <li><a href="http://instagram.com/coledavidson103"><img src="images/sm-icons/instagram.png"</a></li>
    </ul>
    </div>
    </div>
    </div>

<!--NAV BAR SECTION-->
    <div class="row">
    <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="dropdown active">
          <a class="dropdown-toggle" data-toggle="dropdown" href="index.html">About
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="about/education.html">Education</a></li>
            <li><a href="about/employment.html">Employment</a></li>
            <li><a href="about/volunteerism">Volunteerism</a></li> 
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="services/graphic.html">Graphic Design</a></li>
            <li><a href="services/web.html">Web Design</a></li>
            <li><a href="services/nationbuilder.html">NationBuilder</a></li>
            <li><a href="services/digital.html">Digital Strategy</a></li> 
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio/graphics.html">Graphic Design</a></li>
            <li><a href="portfolio/web.html">Web Design</a></li> 
          </ul>
        </li>
      </ul>
    </div>
    </nav>
        </div>

<!--PAGE CONTENT SECTION-->    
    <div class="row">
    <div class="col-sm-12"><h1>Page Title goes here.</h1></div>
    </div>
    <div class="row">
            <div class="col-sm-12"><p>Page content goes here.</p></div>
    </div>

<!--FOOTER SECTION-->
    <div class="row"><div class="col-sm-12"><p>Footer content goes here.</p></div>
    </div>


</div>    
</body>
</html>

CSS：

/*This is the stylesheet for coledavidson.ca. This website also uses the bootstrap stylesheets.*/
/*Author: Cole Davidson*/

body {
    background-image: url(images/about-bg.jpg);
    background-repeat:no-repeat;
background-size: auto;
background-position:center;
    height: 100%;
}

.header-img img {
    width: 75%;
    height: auto;
}

.social-media ul {
    list-style: none;
}

.social-media img {
    width:30px;
    height:auto;
}

提前致谢！

Answer 1

这里你错过了'＆gt;' <img src="">

中的标记

引导程序导航栏中的链接错误

1 个答案: