导航项只能在项目下单击？

时间：2017-05-06 01:56:55

标签： php html css

首先，我知道这个问题令人困惑，我想不出任何其他方式来解释它。基本上，我出于某种原因在我的网站广告上创建了一个测试登录系统，当你将鼠标悬停在主页上时导航栏工作正常，但是在登录和注册页面上，你必须找到项目下的某个点。导航栏可以将鼠标悬停在其上或单击它。出于某种原因，主页上没有发生这种情况，只有那两页。

网站：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);
}

1 个答案:

答案 0 :(得分：1)

  1. 在索引<!DOCTYPE html>中检查您有<DOCTYPE html>的注册DOCTYPE。
  2. 引用可以互换，但使用一种类型是一种很好的做法。 "或'，而不是两者。

  3. 我已经通过index.css内容替换了register.css内容，导航栏再次运行良好。正如我所见 - register.css中的问题与：

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

    关键是，真正的问题。

    4. 例如，使用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">
    1. 你应该做的一切都是这样的。在css中使用html标签并不是一个好主意。使用id，class，并保持简单。 index.css和register.css几乎相同。您可以导入更多的css文件 - 使用该功能！只有这样css才真正有意义;）
相关问题
最新问题