2017-10-16 99 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的答案。