1. 首页
  2. 问答
  3. 导航项目只能在该项目下点击？

导航项目只能在该项目下点击？

2017-05-06 62 views
0

首先我知道这个问题很混乱，我想不出任何其他解释方式。基本上，我出于某种原因在我的网站广告上制作了一个测试登录系统，当您将鼠标悬停在主页上时，导航栏可以正常工作，但在登录和注册页面上，您必须找到该项目下的某个位置导航栏能够悬停在它上面或点击它。出于某种原因，这不是在主页上发生的，而只是这两页。导航项目只能在该项目下点击？

网站：http://www.abyssallogin.hol.es/

的index.php

<?php 
    session_start(); 

    require 'login/database.php'; 

    if(isset($_SESSION['user_id'])){ 
     $records = $conn->prepare('SELECT id,username,password FROM users WHERE id = :id'); 

     $records->bindParam(':id', $_SESSION['user_id']); 

     $records->execute(); 

     $results = $records->fetch(PDO::FETCH_ASSOC); 

     $user = NULL; 

     if(count($results) > 0){ 
      $user = $results; 
     } 
    } 
?> 

<DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Login Test</title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> 
    </head> 
    <body> 
     <?php if(!empty($user)): ?> 

      <nav class="navigation"> 
       <div class="navigation-logo">Website</div> 
       <ul> 
        <li><a href="#" class="navigation-item">Home</a></li> 
        <li><a href="#" class="navigation-item">Deposit</a></li> 
        <li><a href="#" class="navigation-item">Withdraw</a></li> 
        <li><a href="#" class="navigation-item">Free Coins</a></li> 
        <li><a href="#" class="navigation-item">Support</a></li> 
       </ul> 
       <form id="button" action='login/logout' method='POST'><button class="btn" name='logout' type='submit'>Logout</button></form> 
      </nav> 
      <span class="login-message">You are now logged in.</span> 

     <? else: ?> 

      <nav class="navigation"> 
       <div class="navigation-logo">Website</div> 
       <ul> 
        <li><a href="index" class="navigation-item">Home</a></li> 
        <li><a href="#" class="navigation-item">Deposit</a></li> 
        <li><a href="#" class="navigation-item">Withdraw</a></li> 
        <li><a href="#" class="navigation-item">Free Coins</a></li> 
        <li><a href="#" class="navigation-item">Support</a></li> 
       </ul> 
       <form id="button" action='login/login' method='POST'><button class="btn" name='login' type='submit'>Login</button></form> 
      </nav> 
      <span class="login-message">You are not currently logged in.</span> 

     <? endif; ?> 
    </body> 
</html>

的login.php

<?php 
    session_start(); 

    if(isset($_SESSION['user_id'])){ 
     header("Location: /"); 
    } 

    require 'database.php'; 

    $message = ''; 

    if(!empty($_POST['username']) && !empty($_POST['password'])): 
     $records = $conn->prepare('SELECT id,username,password FROM users WHERE username = :username'); 

     $records->bindParam(':username', $_POST['username']); 

     $records->execute(); 

     $results = $records->fetch(PDO::FETCH_ASSOC); 

     if(count($results) > 0 && password_verify($_POST['password'], $results['password'])){ 
      $_SESSION['user_id'] = $results['id']; 
      header("Location: /"); 
     } else { 
      $message = 'Incorrect username or password.'; 
     } 
    endif; 
?> 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Login Test</title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" href="../css/login.css"> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> 
    </head> 
    <body> 
     <nav class="navigation"> 
      <div class="navigation-logo">Website</div> 
      <ul> 
       <li><a href="../index" class="navigation-item">Home</a></li> 
       <li><a href="#" class="navigation-item">Deposit</a></li> 
       <li><a href="#" class="navigation-item">Withdraw</a></li> 
       <li><a href="#" class="navigation-item">Free Coins</a></li> 
       <li><a href="#" class="navigation-item">Support</a></li> 
      </ul> 
      <form id="button" action='login' method='POST'><button class="btn" name='login' type='submit'>Login</button></form> 
     </nav> 
     <form action="login" method="POST"> 
      <input type="text" placeholder="Username" name="username"> 
      <input type="password" placeholder="Password" name="password"> 
      <input type="submit" name="login" value="Login"> 
      <span class="register-text">Don't have an account? <a href="register">Register Here</a></span> 
     </form> 
    </body> 
</html>

Register.php

<?php 
    session_start(); 

    if(isset($_SESSION['user_id'])){ 
     header("Location: /"); 
    } 

    require 'database.php'; 

    if(!empty($_POST['username']) && !empty($_POST['password'])): 

     $sql = "INSERT INTO users (username, password) VALUES (:username, :password)"; 

     $stmt = $conn->prepare($sql); 

     $stmt->bindParam(':username', $_POST['username']); 

     $hash = password_hash($_POST['password'], PASSWORD_BCRYPT); 

     $stmt->bindParam(':password', $hash); 

     if($stmt->execute()): 
      $message = ''; 
      header("Location: login"); 
     else: 
      $message = ''; 
     endif; 

    endif; 
?> 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Login Test</title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" href="../css/register.css"> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> 
    </head> 
    <body> 
     <nav class="navigation"> 
      <div class="navigation-logo">Website</div> 
      <ul> 
       <li><a href="../index" class="navigation-item">Home</a></li> 
       <li><a href="#" class="navigation-item">Deposit</a></li> 
       <li><a href="#" class="navigation-item">Withdraw</a></li> 
       <li><a href="#" class="navigation-item">Free Coins</a></li> 
       <li><a href="#" class="navigation-item">Support</a></li> 
      </ul> 
      <form id="button" action='login' method='POST'><button class="btn" name='login' type='submit'>Login</button></form> 
     </nav> 
     <form action="register" method="POST"> 
      <input type="text" placeholder="Username" name="username"> 
      <input type="password" placeholder="Password" name="password"> 
      <input type="password" placeholder="Confirm Password" name="confirm_password"> 
      <input type="submit" name="register" value="Register"> 
      <span class="register-text">Already have an account? <a href="login">Login Here</a></span> 
     </form> 
    </body> 
</html>

Index.css

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
} 

.navigation { 
    width: 100%; 
    height: 70px; 
    color: rgb(255, 255, 255); 
    background-color: rgb(40, 40, 40); 
} 

.navigation > .navigation-logo { 
    float: left; 
    height: 40px; 
    font-size: 28px; 
    line-height: 35px; 
    padding: 15px 30px; 
} 

.navigation > ul { 
    margin: 0px; 
    float: right; 
    padding: 0px; 
    margin-right: 190px; 
    list-style-type: none; 
} 

.navigation > ul > li { 
    float: left; 
} 

.navigation > ul > li > .navigation-item { 
    height: 40px; 
    margin-left:15px; 
    line-height: 40px; 
    padding: 15px 0px; 
    margin-right: 15px; 
    position: relative; 
    display: inline-block; 
    text-decoration: none; 
    color: rgb(255, 255, 255); 
} 

.navigation > ul > li > .navigation-item:before { 
    left: 0px; 
    content: ""; 
    width: 100%; 
    height: 2px; 
    bottom: 20px; 
    position: absolute; 
    visibility: hidden; 
    background-color: rgb(215, 85, 80); 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 

.navigation > ul > li > .navigation-item:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

.navigation > ul > li > .navigation-item:hover { 
    color: rgb(215, 85, 80); 
} 

#button { 
    top: 0px; 
    right: 0px; 
    margin-right: 15px; 
    position: absolute; 
} 

.btn { 
    float: right; 
    outline: none; 
    cursor: pointer; 
    font-size: 22px; 
    margin-top:15px; 
    margin-left:20px; 
    margin-right:20px; 
    padding: 5px 35px; 
    border-radius: 5px; 
    position: relative; 
    display: inline-block; 
    text-decoration: none; 
    color: rgb(255, 255, 255); 
    transition: all 0.3s ease-in-out; 
    background-color: rgb(40, 40, 40); 
    border: 2px solid rgb(255, 255, 255); 
} 

.btn:hover { 
    color: rgb(40, 40, 40); 
    background-color: rgb(255, 255, 255); 
} 

.login-message { 
    color: rgb(0, 0, 0); 
}

Login.css

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
} 

.navigation { 
    width: 100%; 
    height: 70px; 
    color: rgb(255, 255, 255); 
    background-color: rgb(40, 40, 40); 
} 

.navigation > .navigation-logo { 
    float: left; 
    height: 40px; 
    font-size: 28px; 
    line-height: 35px; 
    padding: 15px 30px; 
} 

.navigation > ul { 
    margin: 0px; 
    float: right; 
    padding: 0px; 
    margin-right: 190px; 
    list-style-type: none; 
} 

.navigation > ul > li { 
    float: left; 
} 

.navigation > ul > li > .navigation-item { 
    height: 40px; 
    margin-left:15px; 
    line-height: 40px; 
    padding: 15px 0px; 
    margin-right: 15px; 
    position: relative; 
    display: inline-block; 
    text-decoration: none; 
    color: rgb(255, 255, 255); 
} 

.navigation > ul > li > .navigation-item:before { 
    left: 0px; 
    content: ""; 
    width: 100%; 
    height: 2px; 
    bottom: 20px; 
    position: absolute; 
    visibility: hidden; 
    background-color: rgb(215, 85, 80); 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 

.navigation > ul > li > .navigation-item:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

.navigation > ul > li > .navigation-item:hover { 
    color: rgb(215, 85, 80); 
} 

#button { 
    top: 0px; 
    right: 0px; 
    margin-right: 15px; 
    position: absolute; 
} 

.btn { 
    float: right; 
    outline: none; 
    cursor: pointer; 
    font-size: 22px; 
    margin-top:15px; 
    margin-left:20px; 
    margin-right:20px; 
    padding: 5px 35px; 
    border-radius: 5px; 
    position: relative; 
    display: inline-block; 
    text-decoration: none; 
    color: rgb(255, 255, 255); 
    transition: all 0.3s ease-in-out; 
    background-color: rgb(40, 40, 40); 
    border: 2px solid rgb(255, 255, 255); 
} 

.btn:hover { 
    color: rgb(40, 40, 40); 
    background-color: rgb(255, 255, 255); 
} 

form { 
    position: absolute; 
    right: 0px; 
    left: 0px; 
    top: 40%; 
} 

input[type="text"], input[type="password"] { 
    border: 2px solid rgb(40, 40, 40); 
    margin: 10px auto; 
    display: block; 
    outline: none; 
    padding: 10px; 
    width: 300px; 
} 

input[type="submit"] { 
    transition: 0.3s all ease-in-out; 
    outline: 2px solid rgb(40, 40, 40); 
    background: rgb(40, 40, 40); 
    color: rgb(255, 255, 255); 
    margin: 0px auto; 
    margin-top: 10px; 
    cursor: pointer; 
    display: block; 
    padding: 10px; 
    width: 320px; 
    border: 0px; 
} 

input[type="submit"]:hover { 
    outline: 2px solid rgb(40, 40, 40); 
    background: rgb(255, 255, 255); 
    color: rgb(40, 40, 40); 
} 

.register-text { 
    color: rgb(40, 40, 40); 
    text-align: center; 
    margin-top: 10px; 
    display: block; 
} 

.register-text a { 
    color: rgb(40, 40, 40); 
}

Register.css

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
} 

.navigation { 
    width: 100%; 
    height: 70px; 
    color: rgb(255, 255, 255); 
    background-color: rgb(40, 40, 40); 
} 

.navigation > .navigation-logo { 
    float: left; 
    height: 40px; 
    font-size: 28px; 
    line-height: 35px; 
    padding: 15px 30px; 
} 

.navigation > ul { 
    margin: 0px; 
    float: right; 
    padding: 0px; 
    margin-right: 190px; 
    list-style-type: none; 
} 

.navigation > ul > li { 
    float: left; 
} 

.navigation > ul > li > .navigation-item { 
    height: 40px; 
    margin-left:15px; 
    line-height: 40px; 
    padding: 15px 0px; 
    margin-right: 15px; 
    position: relative; 
    display: inline-block; 
    text-decoration: none; 
    color: rgb(255, 255, 255); 
} 

.navigation > ul > li > .navigation-item:before { 
    left: 0px; 
    content: ""; 
    width: 100%; 
    height: 2px; 
    bottom: 20px; 
    position: absolute; 
    visibility: hidden; 
    background-color: rgb(215, 85, 80); 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 

.navigation > ul > li > .navigation-item:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

.navigation > ul > li > .navigation-item:hover { 
    color: rgb(215, 85, 80); 
} 

#button { 
    top: 0px; 
    right: 0px; 
    margin-right: 15px; 
    position: absolute; 
} 

.btn { 
    float: right; 
    outline: none; 
    cursor: pointer; 
    font-size: 22px; 
    margin-top:15px; 
    margin-left:20px; 
    margin-right:20px; 
    padding: 5px 35px; 
    border-radius: 5px; 
    position: relative; 
    display: inline-block; 
    text-decoration: none; 
    color: rgb(255, 255, 255); 
    transition: all 0.3s ease-in-out; 
    background-color: rgb(40, 40, 40); 
    border: 2px solid rgb(255, 255, 255); 
} 
.btn:hover { 
    color: rgb(40, 40, 40); 
    background-color: rgb(255, 255, 255); 
} 

form { 
    position: absolute; 
    right: 0px; 
    left: 0px; 
    top: 40%; 
} 

input[type="text"], input[type="password"] { 
    border: 2px solid rgb(40, 40, 40); 
    margin: 10px auto; 
    display: block; 
    outline: none; 
    padding: 10px; 
    width: 300px; 
} 

input[type="submit"] { 
    transition: all 0.3s ease-in-out; 
    outline: 2px solid rgb(40, 40, 40); 
    background: rgb(40, 40, 40); 
    color: rgb(255, 255, 255); 
    margin: 0px auto; 
    margin-top: 10px; 
    cursor: pointer; 
    display: block; 
    padding: 10px; 
    width: 320px; 
    border: 0px; 
} 

input[type="submit"]:hover { 
    outline: 2px solid rgb(40, 40, 40); 
    background: rgb(255, 255, 255); 
    color: rgb(40, 40, 40); 
} 

.register-text { 
    color: rgb(40, 40, 40); 
    text-align: center; 
    margin-top: 10px; 
    display: block; 
} 

.register-text a { 
    color: rgb(40, 40, 40); 
}

来源

2017-05-06 Abyssal

回答

1
  1. 检查DOCTYPE，注册表中有<!DOCTYPE html>，索引号<DOCTYPE html>。
  2. 引号是可以互换的，但是最好使用一种类型。 "或'，而不是他们两个。

  3. 我已经用index.css内容替换register.css内容，并且导航栏再次正常工作。正如我所看到的 - 问题在register.css与那：

    form { 
position: absolute; 
right: 0px; 
left: 0px; 
top: 40%; 
}

    而这一点是关于这一点，真正的问题。

使用form而不是类，例如，您正在更改两个（sic！）表单。首先，你想要的，其次在<nav class="navigation">！只要使用类，而这样做，一切都会好;）

例如，register.css：

.registerForm { 
    position: absolute; 
    right: 0px; 
    left: 0px; 
    top: 40%; 
    }

和寄存器HTML：

<form class="registerForm" action="http://www.abyssallogin.hol.es/login/register" method="POST">
  • 你应该这样做的一切。在CSS中使用html标签并不是一个好主意。使用id，class，并保持简单。 index.css和register.css几乎相同。您可以导入更多的css文件 - 使用该功能！只有那么css真的有意义;）
    •

    来源

    2017-05-06 02:31:01 Sylogista

    +0

    好吧，以便似乎工作，但仍然有一个问题。现在在我的登录页面上，表单一直位于顶部。你可以去同一个链接并查看它。 – Abyssal

    +0

    哦，来吧...你甚至不读你写的代码吗？你有在''clas =''，而不是''class =''... – Sylogista

    +0

    Omfg抱歉，男人哈哈，我甚至没有看到。谢谢您的帮助。 – Abyssal

    相关问题

     相关问题