我有一个登录模式，我希望背景为蓝色。我不明白我的CSS有什么问题。
我希望内容的div高度为200px，宽度为300px。我认为给它指定特定的高度和宽度可以解决此问题，但事实并非如此。
我希望我的内容在200px x 300px的白色框中具有白色背景，但是白色的bakcgound不会显示。
* {
margin: 0;
padding: 0;
}
html,
body {
box-sizing: border-box;
overflow: hidden;
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
background: url("images/newnewgirls.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
}
.container2 {
width: 80%;
margin: auto;
text-align: center;
}
header {
padding: 1em;
margin: 0;
}
header #branding {
float: left;
}
header #branding img {
width: 55%;
}
header nav {
float: right;
margin-top: 0.5em;
}
header nav li {
display: inline;
padding: 1em;
}
header nav li a {
text-decoration: none;
}
#login-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#login-content {
border: 10 px solid black;
height: 300px;
width: 500px background-color:white;
text-align: center;
}
input[type=text],
input[type=password] {
display: block;
margin: 0 auto;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16" href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png" alt="resolvelogo"></a>
</div>
<nav>
<li><a href="indexresolve.html">Home</a></li>
<li><a href="howitworks.html">How It Works</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><button id="login" class="button">Log In</button></li>
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
<section>
<div class="container2">
<div>
<h1>Guys</h1>
<h2>dhkjsdhkjh duhfsduhfdiu fudshfisduhus usihfksdjfhsdiuh ushfkjdshfidsu kjhfudihf dihakdhf djkhksdj idhjdsshf siudhk shadjkhfisdu fskjahfdudd jkshfiusdh feuidhdhsui dsduhskdj.</h2>
<button>Get Started</button>
</div>
<div>
<h1>Ladies</h1>
<h2>Resolve is an easy and fun way to make quick cash while you help guys turn into men you would date! Give them honest feedback that would help them improve. Receive five dollars for every review! </h2>
<button id="login">Get Started</button>
</div>
<div class="appad">
<h2>App Coming Soon!</h2>
</div>
</div>
<script src="resolve.js"></script>
</body>
</html>
答案 0 :(得分：3)
您的CSS有两个错误。
#login-content，而不是.login-content。因为它是一个ID。width之后，您缺少分号。#login-content {
border: 10 px solid black;
height: 300px;
width: 500px;
background-color: white;
text-align: center;
}
具有更改的工作摘要：
*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
overflow:hidden;
height:100%;
}
body{
min-height:100%;
min-width:100%;
background: url("images/newnewgirls.jpg");
background-size:100% 100%;
background-repeat: no-repeat;
background-position:center center;
position:relative;
}
.container{
height:100%;
width:100%;
overflow:hidden;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin:0;
}
header #branding{
float:left;
}
header #branding img{
width:55%;
}
header nav{
float:right;
margin-top:0.5em;
}
header nav li{
display:inline;
padding:1em;
}
header nav li a{
text-decoration:none;
}
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}
#login-content{
border: 10 px solid black;
height:300px;
width:500px;
background-color:white;
text-align:center;
}
input[type=text], input[type=password]{
display:block;
margin: 0 auto;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16" href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png" alt="resolvelogo"></a>
</div>
<nav>
<li><a href="indexresolve.html">Home</a></li>
<li><a href="howitworks.html">How It Works</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><button id="login" class="button">Log In</button></li>
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
<section>
<div class="container2">
<div>
<h1>Guys</h1>
<h2>dhkjsdhkjh duhfsduhfdiu fudshfisduhus usihfksdjfhsdiuh ushfkjdshfidsu kjhfudihf dihakdhf djkhksdj idhjdsshf siudhk shadjkhfisdu fskjahfdudd jkshfiusdh feuidhdhsui dsduhskdj.</h2>
<button>Get Started</button>
</div>
<div>
<h1>Ladies</h1>
<h2>Resolve is an easy and fun way to make quick cash while you help guys turn into men you would date! Give them honest feedback that would help them improve. Receive five dollars for every review! </h2>
<button id="login">Get Started</button>
</div>
<div class="appad">
<h2>App Coming Soon!</h2>
</div>
</div>
<script src="resolve.js"></script>
</body>
</html>
答案 1 :(得分：1)
该元素具有ID login-content，而不是类。在CSS上将.login-content更改为#login-content。