欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

帶有移動響應復選框輸入的導航欄不起作用

CSS
阮建安1年前9瀏覽0評論

我用html和css為一個開始項目制作了這個簡單的組合網站，但我似乎無法通過復選框輸入打開響應導航欄。這是一個兩到三頁的網站，我有每一頁單獨的代碼。 (這是我第一次使用堆棧溢出，所以我不知道把代碼放在哪里) 非常感謝幫助。

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>JUST GODDAMN WORK</title>
    
</head>
<body>
    <header>
    <nav>
        
        <label for="check" class="checkbtn">
            <input type="checkbox" id="check" role="button">
            <i class="fa fa-bars"></i>
        </label>
        <h1 class="logo">
            GRAPHICAL STUDIOS
        </h1>
        <div class="nav-links">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="projects.html">PROJECTS</a></li>
            <li><a href="">ABOUT</a></li>
        </ul>
    </nav>
</header>
    <div class="image">
        <img class="main-image"  src="7510724.png" alt="">
        <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>
    
    </div>

</body>
</html>

CSS樣式表代碼-

*{
    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;
}
ul{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    list-style: none;
    display: flex;
    margin-top: -2.5vw;
    column-gap: 2vw;
    font-size: 1.5vw;
    font-weight: 600;
    float: right;
    margin-right: 30px;
    position: static;

}
nav li a:hover{
    background-color: #ffab35;
    border-radius: 5px;
    transition: all .5s;
}

.main-image{
    display: flex;
    float: right;
    max-width: 60vw;
    margin-top: 10vw;
    position: relative;
}
@media screen and (max-width:660px){
    .main-image{
        align-items: center;
        justify-content: center;
        float: none;
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 10vw;
        margin-bottom: -20vw;
        max-width: 80vw;
    }
}


.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 screen and (max-width:796px) {
    #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;
    }  
    ul {
        margin-top: -8vw;
        position: absolute;
        left: 100%;
        width: 100%;
        height: 3vh;
        justify-content: center;
        align-items: center;
        top: 60px;
        background-color: #eec533;
        transition: all .5s;
    }
}

如果您稍微調整一下您的HTML，并添加缺少的& lt/div & gt；對于導航鏈接，你可以使用純CSS來完成。

將復選框移出標簽后，就可以使用波浪號和checked偽類了。

代字號表示父代的下一個子代。

所以#check:checked ~ label ~。logo ~。導航鏈接意味著，當復選框被選中時，下一個標簽，然后下一個標志，然后下一個導航鏈接將應用CSS。

.nav-links {
  display: none
}

#check:checked ~ label ~ .logo ~ .nav-links {
  display: block;
}

<nav>

  <input type="checkbox" id="check" role="button">
  <label for="check" class="checkbtn"><i class="fa fa-bars">BARS</i></label>
  <h1 class="logo">
    GRAPHICAL STUDIOS
  </h1>
  <div class="nav-links">
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="projects.html">PROJECTS</a></li>
      <li><a href="">ABOUT</a></li>
    </ul>
  </div>
</nav>