每次我删除了我的连接DB,我的CSS开始有问题。

问题描述 投票:0回答:1

这是登录的phphtml文件

<?php
require'User.php';
// $user = new User();

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <LINK rel="stylesheet" type="text/css" href="./css/main.css">
    <LINK rel="stylesheet" type="text/css" href="./css/login.css">
    <title>Document</title>
</head>

<body>
    <div class="row">
        <div class="flex-row">
            <div class="half-size meet-side">
            </div>
            <div class="half-size form-side">
                <div class="bgc"></div>
                <div class="form">
                    <div class="form-wrapper">

                        <h1>Please Log in your Account</h1>
                        <form action="" method="POST">
                            <div class="input">
                                <input type="email" class="field" placeholder="Please enter your E-Mail"
                                    name="email"><br>
                                <input type="password" class="field" placeholder="Please enter your Password"
                                    name="password"><br>
                                <input type="submit" class="btn" value="send" name="submit">
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

</html>

这里是连接.php

class DBConnection{
    static protected $db;
    function __construct(){
        if(self::$db = new PDO(DBCON, USR,PSW)){
            echo 'true';
        }else{
            // echo 'error';
        }
    }
}

$db = new DBConnection(); 

和css是


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.row{
    width: 100%;
    height: 100%;
    /* border: .5px solid ; */
}

.flex-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
.half-size{
    width: 50%;
    /* border: 1px solid; */
    height: 100%;
}

.form{
    text-align: center;
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-items: center;
}


form{
    /* border: 1px solid; */
    margin-left: 20%;}

.input{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 10%;

}

input{
    width: 75%;
    padding: 10px 0px;
    background: transparent;
}
::placeholder{
    color: rgb(255, 238, 238);
}
.field{
    border: none !important;
    border-bottom: 1px solid !important;
}

:focus{
    outline: none !important;
}

.btn{
    border-radius: 30px;
    border: 1px solid #3ca6d8;
    padding: 8px;
    background: #3ca6d8;
    color: white;
    font-size: 18px;
    box-shadow: 0px 2px 10px 1px #3ca6d8;
}
.form-wrapper{
    /* border: 1px solid; */
    padding: 10%;
    z-index: 2;
    background: #ffffff78;
    border-radius: 30px;
}

.form-side{
    background:url('../images/login/form-side.jpg');
    position: relative;
    box-shadow: 9px 15px 33px 22px #69585873
}

.meet-side{
    background:url('../images/login/meet-side.jpg');
    background-size: 100% 100%;
    position: relative;
}

.bgc{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000008f;
    z-index: 1;

}

每次我删除require_once 'Connection.php';我的css开始变得疯狂。

与连接。在这里输入图片描述

没有连接 : 请在此输入图片说明

开发者工具与连接无关我尝试了所有的东西,它只是不为我工作。

php html css pdo
1个回答
0
投票

检查元素来找出问题,在chrome上,按Cmd+Shift+C打开开发者工具的检查元素模式,如果开发者工具已经打开,则切换检查元素模式。

你可以把页面的截图发给我们,这样我们就可以看到了。

© www.soinside.com 2019 - 2024. All rights reserved.