php - 导航项只能在元素下点击？-6ren

php - 导航项只能在元素下点击？

转载作者：太空宇宙更新时间：2023-11-04 08:45:26

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

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

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

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

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

索引.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);
}

登录.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);
}

注册.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);
}

最佳答案

检查DOCTYPE，在注册时你有<!DOCTYPE html> , 在索引 <DOCTYPE html> .
引号可以互换，但最好使用一种类型。 "或 ' ，而不是两者。
我已将 register.css 内容替换为 index.css 内容，并且导航栏再次正常工作。如我所见 – 问题出在 register.css 中:
```
form {
position: absolute;
right: 0px;
left: 0px;
top: 40%;
}
```
这就是真正的问题所在。

使用 form例如，您正在更改两种(原文如此!)形式，而不是类。首先是你想要的，其次是 <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 才真正有意义 ;)

关于php - 导航项只能在元素下点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43815917/

文章推荐： python - 无法删除特定扩展名的文件

文章推荐：链接静态库时，typedef 结构会导致名称冲突吗？

文章推荐： python - 在 Python 中使用管道执行 shell 命令

文章推荐： c - 连续调用同一数组时出现奇怪的段错误

javascript - 点击 child 不会触发 parent 点击
当点击content 时，我想触发我的alert。我的 content 中可以有任意数量的子元素，所以我不想对每个元素都进行硬编码。我想也许我可以监听对该父元素的点击，然后每次点击子元素都会触发我的操
objective-c - 检测 Cocoa 应用程序中的用户事件(点击、点击……)
对于 Mac 应用程序，我想检测应用程序中的用户事件，因此我可以定期让 Web 服务知道用户在端点上仍然处于事件状态。在 Cocoa Touch 中，我会覆盖 UIApplication 的 sen
Javascript-点击
第一次在这里发帖，但天知道我一直使用这个网站来搜索问题 :P 好吧，我现在遇到了自己的问题，我似乎无法轻松地在 Google 上搜索，在玩了大约 2 小时后，我终于决定发布一个问题，看看你们是怎么想的
AngularJS 点击 TouchStart
Angular 触控 ngTouch导致在触摸释放时发生点击。有没有办法让点击发生在触摸开始？ fast-click下面的指令似乎可以在触摸屏上执行我想要的操作，但它不适用于鼠标点击。 myApp.
Flutter - 点击/触摸区域如何工作？
1) 如果我有这个，当我点击子 Container 时它不会打印'tap': Container( color: Colors.red, child: GestureDetector(
jquery解除绑定(bind)点击
我简直要发疯了，只是想从 jQuery 中的事件中解除 onclick 处理程序的绑定(bind)，以便稍后可以将其绑定(bind)到另一个函数。我已将代码隔离在测试页中，因此除了核心之外什么都没有
jquery - 如何在jquery中触发Live()点击
我有一个有趣的情况。我需要触发实时点击，因为简单的点击不起作用。这就是我所拥有的: $('.text').trigger('click'); 但我需要这样的东西: $('.text').trigge
javascript - 点击 'Confirm'后没有出现警告窗口
这是我的作业，这是我第一次做表单验证。以下代码分别是我的HTML代码和JavaScript代码。 HTML 代码: First N
magento - 如何获取特定产品的浏览/点击
正如标题所示，如何获取 Magento 中特定产品的浏览量/点击量/展示次数。欢迎任何帮助。最佳答案这个简单的示例将为您提供在您指定的日期+其查看次数之间查看过的产品列表: $fromDate =
java - fragment 点击
我正在创建一个应用程序，但在其中遇到错误。我想在按钮上添加 OnclickListner。该按钮位于 fragment 类上。从这个 fragment 类我想继续另一个类。代码如下: fragment
点击 PHP "continue"
我在数组中有一些值。首先，我想在 View 中显示该数组的前两个值，接下来我想在某些按钮单击操作后显示剩余的值，并将数组索引增加 1。例如:一次点击显示第三个值，然后另一次点击显示第四个值。我怎样才
jquery - 如何查看CMD+点击
在下面的代码片段中，如果在链接上执行“CMD+CLICK”，则不会显示 alert('CMD')。这是为什么？我想在用户按下 CMD 按钮(或 Windows 上的 CTRL 键)+单击 href
javascript - 点击()开始加载
我希望在单击链接时开始加载一些内容。在单击该链接之前，我不希望它使用任何带宽。另外如何实现几乎所有灯箱中都能看到的旋转光标动画？最佳答案使用$.ajax()函数动态加载内容。对于动画，请找到一个
javascript - 点击 'a'打开两个链接
我有如下的 DOM: users 当用户点击按钮时，它会将新的“td”附加到“tr”。它运作良好。问题:单击“a”我想打开两个链接。最好的方法是首先将当前页面重定向到另一个页面，然后
javascript - 显示数组项一次(点击)
这是我正在尝试做的.. 点击按钮会显示一个随机数组项。数组项只能显示一次。目前我已经将代码设置为: 点击随机数组项显示。按钮点击继续循环，没有结束。按钮点击多次显示元素。这是代码的链接 ht
C# 编程鼠标移动/点击
我想创建...基本上是一个宏程序。点击记录后，它会记录所有鼠标(可能最终是键盘)事件。然后你可以保存，然后播放，鼠标应该移动并点击在相同的地方当你录制它时它会发生。我知道如何获取全局鼠标事件，但我不
android - ListView 点击？
我有一个关于将 onClick 添加到 ListView 的问题，我已经尝试尽可能多地遵循 Android NotePad 教程，但是对于我的布局我不太明白如何添加它。这是 Activity 类，它
javascript - 点击/点击不适用于触摸屏
我正在使用一个网站以表格的形式显示信息。用户可以单击表格中的行来更改它们的颜色，我还有一个按钮允许用户暂停页面的刷新，这样就不会添加新信息。这两个功能都适用于桌面，但不适用于触摸屏。我的第一个想法是触
javascript - 点击标签时的事件顺序
所以我的网站上有一个正常的链接，我想为它添加跟踪。我可以设想很多方法来做到这一点，但我已经确定通过编写一个小的 jquery 函数并在我的标签中放置一个小片段来实现这一点非常简单: click me!
Android - ImageButton 点击
我正在尝试使我的图片按钮看起来不错。我尝试了几种不同的方法，但它们看起来都不对。这是一个圆形图像，我想让它看起来像是可以按下的。这是我到目前为止所得到的。 android:textAppearance

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 导航项只能在元素下点击？