我做了這個響應(yīng)式導(dǎo)航條，但是我的項目頁面的第二個鏈接不起作用。現(xiàn)在我已經(jīng)將完全相同的代碼復(fù)制到項目的html頁面，但是那些頁面上的鏈接可以工作，但是不能在主頁上工作。我不知道怎么樣？ 請幫幫我！
主頁的HTML代碼-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<link rel='stylesheet'>
<title>Portfilio</title>
</head>
<body>
<header>
<nav>
<input type="checkbox" id="check" role="button">
<label for="check" class="checkbtn"><i class="fa fa-bars"></i></label>
<h1 class="logo">
GRAPHICAL STUDIOS
</h1>
<div class="nav-links">
<ul class="links">
<li><a href="index">HOME</a></li>
<li><a href="projects.html">PROJECTS</a></li>
</ul>
</div>
</nav>
</header>
<div class="image">
<img class="main-image" src="7510724.png" alt="">
</div>
<h1 class="heading">
DESIGNS THAT FEAL<br>
AS GOOD AS THEY<br>
LOOK
</h1>
<p>WE MAKE THE DESIGNS THAT STAND OUT TO THE AUDIENCE WHICH IN TURN HELP YOUR BRAND GROW!
IF YOU ARE IN NEED OF ANY TYPE OF DESIGN, FEEL FREE TO CONTACT US ON FIVERR.WE MAKE THE DESIGNS THAT STAND OUT TO THE AUDIENCE WHICH IN TURN HELP YOUR BRAND GROW!
IF YOU ARE IN NEED OF ANY TYPE OF DESIGN, FEEL FREE TO CONTACT US ON FIVERR.
</p>
<a class="button" href="https://www.fiverr.com/studio6graphic">
CONTACT NOW!
</a>
</body>
</html>項目頁面的HTML代碼-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<link rel='stylesheet'>
<title>Projects</title>
</head>
<body>
<nav>
<input type="checkbox" id="check" role="button">
<label for="check" class="checkbtn"><i class="fa fa-bars"></i></label>
<h1 class="logo">
GRAPHICAL STUDIOS
</h1>
<div class="nav-links">
<ul class="links">
<li><a href="index.html" id="active">HOME</a></li>
<li><a href="">PROJECTS</a></li>
<li><a href="">ABOUT</a></li>
</ul>
</div>
</nav>
<div class="designs">
<img class="img-one" src="1.jpg" alt="">
<img class="img-two" src="2.jpg" alt="">
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
nav{
height: 6cqw;
width: 100%;
background-color: #FCCE29;
align-items: center;
}
.logo{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 3cqw;
font-weight: 1000;
color: aliceblue;
padding-top: 1.2vw ;
margin-left: 2vw;
justify-content: center;
align-items: center;
}
a{
color: aliceblue;
text-decoration: none;
text-transform: none;
}
.links {
display: flex;
list-style: none;
column-gap: 2rem;
}
.nav-links{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-top: -2.5vw;
font-size: 1.5vw;
font-weight: 600;
float: right;
margin-right: 1rem;
}
nav li a:hover{
background-color: #ffab35;
border-radius: 5px;
transition: all .5s;
}
.main-image{
display: flex;
float: right;
max-width: 50rem;
margin-top: 1rem;
position: relative;
}
@media screen and (max-width:796px){
.main-image{
float: none;
position: relative;
margin-left: 2rem;
margin-right: 2rem;
max-width: 40rem;
}
}
.image{
overflow: hidden;
}
.heading{
font-family: "Oswald";
font-weight: 900px;
font-size: 70px;
margin-left: 5vw;
margin-right: 5vw;
margin-top: 115px;
line-height: 85px;
}
p{
font-family: "Oswald";
margin-top: 60px;
margin-left: 5vw;
margin-right: 5vw;
font-size: 15PX;
}
.button{
margin-top: 60px;
border-radius: 5px;
font-size: 15px;
color: black;
font-family: "Oswald";
display: flex;
display: inline-block;
margin-left: 5vw;
text-align: center;
display: grid;
align-items: center;
justify-content: center;
height: 6vh;
width: 17vh;;
border: #FCCE29;
background-color: #FCCE29;
}
.img-one{
width: 35vw;
margin: 10px;
padding: 10px;
padding-left: 200px;
padding-top: 100px;
display: flex;
float: left;
justify-content: center;
align-self: center;
}
.img-two{
width: 35vw;
margin: 10px;
padding: 10px;
padding-right: 200px;
padding-top: 100px;
display: flex;
float: right;
justify-content: center;
align-self: center;
}
.checkbtn{
display: none;
}
#check{
display: none;
}
@media (max-width: 796px) {
a{
color: #fff;
}
nav{
justify-content: center;
align-items: center;
text-align: center;
}
.nav-links{
float: none;
margin-top: 1vw;
height: 3.8rem;
line-height: 1.25rem;
width: 100%;
background-color: rgb(246, 224, 58);
}
.links{
float: none;
position: relative;
display: block;
}
#check{
cursor: pointer;
}
.checkbtn{
display: block;
font-size: 2vw;
margin-left: 2vw;
color: #fff;
float: left;
margin-top: 2vw;
position: relative;
float: right;
margin-right: 2vw;
cursor: pointer;
}
.nav-links {
display: none
}
#check:checked ~ label ~ .logo ~ .nav-links {
display: block;
}
}