2017-10-16 63 views
0

一个网页的网址无法正常工作。我制作了共同标题的html(header.html)。 我在它一个页面的网址无法正常工作

{% load static%} 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="{% static 'header.css' %}"> 
<header class="clearfix"> 
     <h1 class="title">WEB SITE</h1> 
     <ul class="top-menu"> 
      <li class="top-menu-item"><a class="icon_head" href="send">SEND</a></li> 
      <li class="top-menu-item"><a class="icon_head" href="see">SEE</a></li> 
      <li class="top-menu-item"><a class="icon_head" href="know">KNOW</a></li> 
      </ul> 
     <a class="logout_button" href="logout_view">LOGOUT</a> 
</header> 

index.html中写道,header.html中的念想

<html lang="ja"> 

<head> 
    <meta charset="UTF-8"> 
    <link href="/static/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="/static/accounts/detail.css"> 
    <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css"> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 

    <title>WEB SITE</title> 
</head> 

<body class="relative"> 

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="/static/accounts/header.css"> 
{% load static%} 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="{% static 'header.css' %}"> 
    <header class="clearfix"> 
      <h1 class="title">WEB SITE</h1> 
         <ul class="top-menu"> 
       <li class="top-menu-item"><a class="icon_head" href="send">SEND</a></li> 
       <li class="top-menu-item"><a class="icon_head" href="see">SEE</a></li> 
       <li class="top-menu-item"><a class="icon_head" href="know">KNOW</a></li> 
       </ul> 
      <a class="logout_button" href="logout_view">LOGOUT</a> 
    </header> 

    <main> 
     <div class="container"> 
      <p>Hello World</p> 
     </div> 
    </main> 

    <footer> 
     <div class="footers"> 
     <ul class="bottom-menu"> 
       <li class="bottom-menu-item"><a class="bottom_index" href="">XOXO</a></li> 
     </ul> 
     </div> 
    </footer> 
</body> 

</html> 

当我把标头的发送&查阅&知道链接,他们的工作正常。 在另一方面,我在写detail.html像

<html lang="ja"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css"> 
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script> 
<title>WEB SITE</title> 
<body class="relative"> 
<header class="clearfix"> 
    <h1 class="title">WEB SITE</h1> 
    <ul class="top-menu"> 
     <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i> 
     </li> 
     <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i> 
     </li> 
     <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head" 
                       href="know">KNOW</a></i></li> 
    </ul> 
    <a class="logout_button" href="logout_view">LOGOUT</a> 
</header> 

<main> 
    <div class="container"> 
     <div class="detailimg col-xs-8"> 
      <div class="relative_ele"> 
       <div class="image"> 
        <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=results.jpg" 
         width="500px" height="300px" alt="SEE"> 
       </div> 
       <div class="vertical-center-container "> 
        <p class="hthree">I LOVE YOU</p> 
        <p class="hthree_small">I MISS YOU</p> 
       </div> 
      </div> 
      <div class="table-padding"> 
       <table border="0 " class="table table-bordered "> 
        <thead> 
        <tr> 
         <th class="index " colspan="4 " bgcolor=pink>ITEMS</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
         <td bgcolor="#FFEEFF " rowspan="2" align="center ">XOXO1</td> 
         <td align="center "> 
          <a class="index" href="results1">XOXO2</a> 
         </td> 

         <td bgcolor="#FFEEFF " rowspan="4" align="center ">XOXO3</td> 
         <td align="center "> 
          <a class="index" href="results2">XOXO4</a> 
         </td> 
        </tr> 

        </tbody> 
       </table> 
      </div> 
    </div> 
</main> 
<footer> 
     <div class="footers"> 
     <ul class="bottom-menu"> 
       <li class="bottom-menu-item"><a class="bottom_index" href="">XOXO</a></li> 
     </ul> 
     </div> 
</footer> 

</body> 

</html> 

但是当我把标头的发送&查阅&知道链接,他们没有工作和错误happens.For例如,SEND index.html中的链接,它发送http://localhost:8000/accounts/send即可。 但是发送链接detail.html发送http://localhost:8000/accounts/detail/sendhttp://localhost:8000/accounts/detai l是为了访问detail.html的url。 我真的不明白为什么会发生这种情况。我不能将header.html用于index.html & detail.html?我应该如何解决这个问题?

回答

0

<a href="send">Send</a>href属性“发送”是相对 url:浏览器通过将其附加到当前页面url来解析它。

这通常不是你想要的行为。解决方案是提供从站点根目录的绝对路径。因此,如果“发送”页面的位置http://localhost:8000/accounts/send然后构造URL领先/,像这样:

<a href="/send">Send</a>

,浏览器将永远正确解析URL。

另请参阅this question的答案。