Href鏈接導航欄

我剛開始學習HTML，並決定嘗試構建一個簡單的博客。我決定我想要一個導航欄，鏈接到其他HTML文件。我認爲我完成了這個工作，直到我運行它並發現只有「Home」鏈接工作（這是我放入href標籤的HTML文件），其他4個鏈接顯示爲鏈接，但無法點擊。所有文件都位於同一個文件夾中。Href鏈接導航欄

<head> 

<title>Music Project</title> 

<link href="MusicProject.css" rel="stylesheet" /> 

    <div id="header"> 
    <h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1> 
    </div> 
    <div id="nav"> 
<ul> 
<li><a href="Music Project.html">Home</a></li> 
<li><a href="Artist.html">Artists</a></li> 
<li><a href="album.html">Mixtapes/Albums</a></li> 
<li><a href="suggestions.html">Suggestions</a></li> 
<li><a href="about.html">About</a></li> 
</ul> 
</div> 
</head> 

#header { 
    background-color: #888888; 
    height:380px; 
    margin:0px; 
    padding:0px; 

    } 
body { 
    background-color: #C0C0C0; 
    margin:0px; 
    padding:0px; 
} 
#main { 
    overflow: auto; 
} 
#content { 
    float:left; 
} 
#side { 
    float:left; 
} 
#nav { 
    height: 42px; 
    background-color: #888888; 
    } 
#nav ul { 
    list-style-type:none; 
    height:30px; 
    padding:0px; 
    margin:0px; 
     } 
#nav ul li { 
    float:left; 
    margin:10px; 
    width:246px; 
    text-align:center; 
    font-family:"Arial"; 
    font-size: 23px; 
    color: #00004B; 
} 
#nav ul li a { 
    display: inline; 
    width: 246px; 
}

來源

2015-09-23 Noah Hornak

嗨，歡迎來到Stack Overflow。通常，您不會在標記內實現錨鏈接，請嘗試將它放在標記中，並查看它是否適用於您。 – choz

添加@choz所說的話，你的圖像覆蓋了你有的導航鏈接，所以你目前無法點擊它們。嘗試增加'＃頭部的高度或將其全部移除。 – DPac

@choz通常？從來沒有？ – Rob

至於說你需要將你的<header>，並<content>在<body>標籤。

這應該幫助你：

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Music Project</title> 
    <link href="MusicProject.css" rel="stylesheet"> 

    <style> 
     #header { 
      background-color: #888888; 
      height: 380px; 
      margin: 0px; 
      padding: 0px; 
     } 

     body { 
      background-color: #C0C0C0; 
      margin: 0px; 
      padding: 0px; 
     } 

     #main { 
      overflow: auto; 
     } 

     #content { 
      float: left; 
     } 

     #side { 
      float: left; 
     } 

     #nav { 
      height: 42px; 
      background-color: #888888; 
     } 

      #nav ul { 
       list-style-type: none; 
       height: 30px; 
       padding: 0px; 
       margin: 0px; 
      } 

       #nav ul li { 
        float: left; 
        margin: 10px; 
        width: 246px; 
        text-align: center; 
        font-family: "Arial"; 
        font-size: 23px; 
        color: #00004B; 
       } 

        #nav ul li a { 
         display: inline; 
         width: 246px; 
        } 
    </style> 
</head> 
<body> 
    <header> 
     <div id="header"> 
      <h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1> 
     </div> 
     <div id="nav"> 
      <ul> 
       <li><a href="Music Project.html">Home</a></li> 
       <li><a href="Artist.html">Artists</a></li> 
       <li><a href="album.html">Mixtapes/Albums</a></li> 
       <li><a href="suggestions.html">Suggestions</a></li> 
       <li><a href="about.html">About</a></li> 
      </ul> 
     </div> 
    </header> 


    <content> 
     <!-- Page content here --> 
    </content> 
</body> 
</html>

Fiddle

這裏是一個鏈接來幫助你學習的基礎知識。 Link

來源

2015-09-23 02:21:40

還請查看此鏈接以瞭解更多信息。 http://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/ –

自1999年以來，沒有人應該爲新的網頁使用過渡文檔類型。元和鏈接標籤不會有一個結束的斜線。你的'header'div沒有任何作用，'align'已被棄用，你的h1標記是無效的。更不用說沒有內容元素這樣的東西了。 – Rob

你是對的，我會解決這個問題。我的錯誤，我錯誤地點擊了CS3。 –

Href鏈接導航欄

回答

相關問題