我的菜單欄鏈接在我的索引頁上不起作用

我在這裏鏈接的代碼有效，但不在我的Atom內的計算機上。是因爲我在本地鏈接而不是服務器？我的菜單欄鏈接在我的索引頁上不起作用

我做了兩個單獨的頁面，並在頂部添加鏈接以在它們之間翻轉。在這兩個頁面上，我使用了與複製和粘貼相同的CSS，但是在索引頁面上，鏈接無法正常工作，而服務頁面正常工作？

.header{ 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -webkit-filter: brightness(130%); 
 
    min-height: 70vh; 
 
    overflow: hidden; 
 
} 
 

 
.menu{ 
 
    width: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.header ul li a:hover{ 
 
    background: white; 
 
    color: gray; 
 
} 
 

 

 
.header ul li{ 
 
    float: left; 
 
    list-style: none; 
 
    padding: 10px 10px; 
 
} 
 

 
.menu ul li a{ 
 
    text-decoration: none; 
 
    padding: 10px 10px; 
 
    margin: 0; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    display: flex; 
 
    transition: all .5s ease; 
 
    border-radius: 4px; 
 
    color: Blue; 
 
} 
 

 
.title{ 
 
    clear: both; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: auto; 
 
} 
 

 
.title h1{ 
 
    background: -webkit-linear-gradient(left, #0d78f7,navy); 
 
    font-size: 40px; 
 
background: -webkit-linear-gradient(left, #0d78f7, navy); 
 
background: -o-linear-gradient(left, #0d78f7, navy); 
 
background: -moz-linear-gradient(left, #0d78f7, navy); 
 
background: linear-gradient(left, #0d78f7, navy); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
display:flex; 
 
justify-content: center; 
 

 
}

<div class="header"> 
 
     <ul class="menu"> 
 
     <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/index.html">Home</a></li> 
 
     <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/services.html">Services</a></li> 
 
     <li>Contact</li> 
 
     </ul> 
 
     <div class="title"> 
 
     <h1>ONLOOKER DESIGNS</h1> 
 
     </div> 
 
    </div>

來源

2017-08-03 Ryan

究竟是什麼你的問題，我不明白這一點......你不應該複製和過去的每個頁面上相同的CSS代碼。搜索如何將.css樣式文件鏈接到您的HTML頁面，它允許您鏈接靜態style.css頁面，該頁面將在一個位置包含所有css代碼，而不是在每個頁面上覆制它。 –

不確定是什麼你確切地問。所以鏈接在服務器上工作，但不是在本地？它應該是相反的。 – Brxxn

停止使用文件系統來引用任何內容 - 使用相對URL。 – CBroe

href屬性包括使用「文件」的協議，更具體地說，它是指向自己的本地硬盤驅動器的鏈接。

其他人將無法訪問您的本地文件。

現在，如果您希望文件在每臺本地訪問文件的計算機上都能正常工作，我推薦您使用相對文件路徑而不是絕對路徑。

這理想是這樣的：

<a href="index.html">

來源

2017-08-03 14:03:53

試試這個：

<div class="header"> 
     <ul class="menu"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li>Contact</li> 
     </ul> 
     <div class="title"> 
     <h1>ONLOOKER DESIGNS</h1> 
     </div> 
</div>

，如果你在同一個目錄下的所有三個文件。

來源

2017-08-03 14:00:54

你應該嘗試這樣的：

.header{ 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -webkit-filter: brightness(130%); 
 
    min-height: 70vh; 
 
    overflow: hidden; 
 
} 
 

 
.menu{ 
 
    width: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.header ul li a:hover{ 
 
    background: white; 
 
    color: gray; 
 
} 
 

 

 
.header ul li{ 
 
    float: left; 
 
    list-style: none; 
 
    padding: 10px 10px; 
 
} 
 

 
.menu ul li a{ 
 
    text-decoration: none; 
 
    padding: 10px 10px; 
 
    margin: 0; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    display: flex; 
 
    transition: all .5s ease; 
 
    border-radius: 4px; 
 
    color: Blue; 
 
} 
 

 
.title{ 
 
    clear: both; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: auto; 
 
} 
 

 
.title h1{ 
 
    background: -webkit-linear-gradient(left, #0d78f7,navy); 
 
    font-size: 40px; 
 
background: -webkit-linear-gradient(left, #0d78f7, navy); 
 
background: -o-linear-gradient(left, #0d78f7, navy); 
 
background: -moz-linear-gradient(left, #0d78f7, navy); 
 
background: linear-gradient(left, #0d78f7, navy); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
display:flex; 
 
justify-content: center; 
 

 
}

<div class="header"> 
 
     <ul class="menu"> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="services.html">Services</a></li> 
 
     <li>Contact</li> 
 
     </ul> 
 
     <div class="title"> 
 
     <h1>ONLOOKER DESIGNS</h1> 
 
     </div> 
 
    </div>

來源

2017-08-03 14:00:54

我的菜單欄鏈接在我的索引頁上不起作用

回答

相關問題