私のメニューバーのリンクがインデックスページで機能しない

Question

ここにリンクしたコードは機能しますが、Atom内のコンピュータでは機能しません。それはサーバーの代わりにローカルでリンクしているからですか？

2つの別々のページを作成し、上部にリンクを追加してそれらの間を移動しました。どちらのページでも、同じ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>

Answer 1

。

他の人があなたのローカルファイルにアクセスすることはできません。

ファイルにローカルでアクセスしているすべてのコンピュータでファイルを動作させる場合は、絶対パスの代わりに相対ファイルパスを使用することをお勧めします。

これは、理想的には、次のようになります。

<a href="index.html"> 

Answer 2

これを試してみてください：

<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> 

、あなたが同じディレクトリにすべての3つのファイルを持っている場合。

Answer 3

あなたは次のように試してみてください：あなたのhref属性は、「ファイル」プロトコルより具体的には、それはあなた自身のローカルハードドライブを指しているを使用してリンクを含ん

.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>