Question

我开始使用flexbox作为我的页脚，现在我的所有页面都使用表单，背景颜色现在是默认的白色。以下是我的一个页面的示例：

的login.php

＆＃13;

body {
    background-color: #211e1e;
    display: flex;
    flex-direction: column;
    height: 95vh;
}

h1 {
    color: #99cc00;
    text-align: center;
}

.content {
    flex: 1 0 auto;
}

footer {
    text-align: center;
    font-weight: lighter;
    color: #99cc00;
    font-size: 10px;
    flex-shrink: 0;
}

h3 {
    position: absolute;
    font-weight: bold;
    color: #99cc00;
    font-size: 15px;
    width: 100%;
    top: 91.5%;

}

.button {
    background-color: #211e1e;
    color: white;
    font-size: 24px;
    /*padding: 15px 50px;*/
    transition-duration: .4s;
    border: greenyellow;
    width: 250px;
    /* width of button */
    height: 50px;
    /* height of button */
}

.buttonColor:hover {
    color: black;
    background-color: greenyellow;
}

h1 {
    text-align: center;
    bottom: 25%;
}

content {
    align-items: center;
    justify-content: center;
}

.signin {
    color: #99cc00;
    margin: auto;
    font-size: 24px;
}

.loginInput {
    font-size: 24px;
}

.loginButton {
    background-color: #211e1e;
    color: white;
    font-size: 24px;
    padding: 10px 50px;
    transition-duration: .4s;
    border: greenyellow;
}

.loginButtonColor:hover {
    color: black;
    background-color: greenyellow;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="../../favicon.ico">
    <meta charset="UTF-8">
    <title>TapLovers</title>
    <link rel="stylesheet" href="../background.css">
    <link rel="stylesheet" href="login.css">
</head>

<body>
    <div class=content>
        <h1><img src="../../36x36-icon.png">apLovers</h1>
        <form class="signin">
            <input type="text" email="email" placeholder="Email" class="loginInput"><br>
            <input type="text" password="password" placeholder="Password" class="loginInput"><br>
            <input type="submit" name="submit" id="login" class="loginButton loginButtonColor" value="Login To TapLovers!" /><br><br>
            <a href="../register/register.php">
                <font color="#99cc00">Create a FREE TapLovers Account!</font>
            </a>
        </form>
    </div>
    <footer>
        <h3><img src="../../favicon.ico">apLovers</h3><br>&copy 2018 TapLovers, All Rights Reserved
    </footer>
</body>

</html>

＆＃13;

此外，我也试图使用flexbox将我的表单和标题集中在一起，而且我还没有完成任务。我不确定其他细节对这个特定问题有用。如果您需要更多详细信息，请在下面回复，我会在他们出来时回答。

编辑：编译堆栈溢出的片段显示我的背景很好。更重要的是，如果我在我的页面上使用ctrl + shift + i然后背景有效，但如果我只是在我的页面上重新加载，那么背景将变为白色。

Answer 1

我没有看到背景波动的问题。我认为这是页面加载的延迟。我添加了一些注释来帮助设置flexbox中心。

＆＃13;

/*CSS reset of browser agent. Removes the horizontal scroll currently happening in page.*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #211e1e;
	display: flex;
	flex-direction: column;
    /* No need to restrict the height.
	height: 95vh;*/
}
h1 {
	color: #99cc00;
	text-align: center;
}

.content {
	flex: 1 0 auto;
	/*make the content div flex so that the form can take the center alignment from flexbox properties. Add the centering here and avoid the margin: auto property */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

footer {
	text-align: center;
	font-weight: lighter;
	color: #99cc00;
	font-size: 10px;
	flex-shrink: 0;
}

h3 {
	position: absolute;
	font-weight: bold;
	color: #99cc00;
	font-size: 15px;
	width: 100%;
	top: 91.5%;
}

.button {
	background-color: #211e1e;
	color: white;
	font-size: 24px;
	/*padding: 15px 50px;*/
	transition-duration: .4s;
	border: greenyellow;
	width: 250px;
	/* width of button */
	height: 50px;
	/* height of button */
}
.buttonColor:hover {
	color: black;
	background-color: greenyellow;
}
h1 {
	text-align: center;
	bottom: 25%;
}

/*Add flexbox style the inputs as blocks and remove <br> from HTML*/

.signin {
	color: #99cc00;
	font-size: 24px;
	display: flex;
	flex-direction: column;
}

.signin>* {
	margin: 5px 0;
}

.loginInput {
	font-size: 24px;
}

.loginButton {
	background-color: #211e1e;
	color: white;
	font-size: 24px;
	padding: 10px 50px;
	/*Please check your animation ??
    transition-duration: .4s;*/
	/*add border size and transparency 1px solid*/
	border: 1px solid greenyellow;
}

.loginButtonColor:hover {
	color: black;
	background-color: greenyellow;
}

＆＃13;

<div class="content">
	<h1><img src="../../36x36-icon.png">apLovers</h1>
	<form class="signin">
		<input class="loginInput" placeholder="Email" type="text"> <input class="loginInput" placeholder="Password" type="text"> <input class="loginButton loginButtonColor" id="login" name="submit" type="submit" value="Login To TapLovers!"> <a href="../register/register.php"><font color="#99CC00">Create a FREE TapLovers Account!</font></a>
	</form>
</div>
<footer>
	<h3><img src="../../favicon.ico">apLovers</h3>
	<p>&copy; 2018 TapLovers, All Rights Reserved</p>
</footer>

＆＃13;

使用flexbox

1 个答案: