【发布时间】：2019-02-19 10:30:36
【问题描述】：
我有一个登录模式，我希望有一个蓝色背景。我不明白我的 CSS 有什么问题。
我希望内容的 div 高度为 200 像素，宽度为 300 像素。我认为给它一个特定的高度和宽度可以解决问题，但它没有。
我希望我的内容在 200 x 300 像素的白色框中有白色背景，但不会显示白色 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>【问题讨论】：
-
除了答案之外，您还应该了解 linter。您缺少一个 div 的结束标签。您的 CSS 还缺少
;。它们是一个很好的工具