态。。
我正在设计实践的Facebook登录页面。仅使用html和csss。。但是CSS不起作用。这是我的HTML代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Facebook- Log In or Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<header class="mainHeader">
<div class="mainArea">
<div class="logoArea">
<img src="media/6cVHHozUQSt.png" alt=""/>
</div>
<div class="loginArea">
<form action="#">
<div class="userName">
<label for="user">Email or Phone </label> <br/>
<input type="text" id="user"/><br/>
<input type="checkbox" id="keepLogin"/>
<label for="keepLogin"> Keep me Logged In</label>
</div>
<div class="password">
<label for="password">Password </label>
<input type="password" id="password"/>
<a href="#">Forgotten you password?</a>
</div>
<div class="submitButton">
<input type="submit" value="Log In"/>
</div>
</form>
</div>
</div>
</header>
</body>
</html>
这是CSS
body{
margin:0;
padding:0;
}
header.mainHeader:after{
content:"";
display: block;
clear: both;
}
header.mainHeader{
background:#3a5797;
}
.mainHeader .logoArea{
width: 50%;
float: left;
}
.mainHeader .loginArea{
float:right;
width:50%;
}
.loginArea .username, .loginArea .password{
width: 40%;
float: left;
}
.loginArea .submitButton{
width: 20%;
float: left;
}
问题是案例不敏感，使用 .userName代替 .username
body {
margin: 0;
padding: 0;
}
header.mainHeader:after {
content: "";
display: block;
clear: both;
}
header.mainHeader {
background: #3a5797;
}
.mainHeader .logoArea {
width: 50%;
float: left;
}
.mainHeader .loginArea {
float: right;
width: 50%;
}
.loginArea .userName,
.loginArea .password {
width: 40%;
float: left;
}
.loginArea .submitButton {
width: 20%;
float: left;
}<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Facebook- Log In or Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header class="mainHeader">
<div class="mainArea">
<div class="logoArea">
<img src="media/6cVHHozUQSt.png" alt="" />
</div>
<div class="loginArea">
<form action="#">
<div class="userName">
<label for="user">Email or Phone </label> <br/>
<input type="text" id="user" /><br/>
<input type="checkbox" id="keepLogin" />
<label for="keepLogin"> Keep me Logged In</label>
</div>
<div class="password">
<label for="password">Password </label>
<input type="password" id="password" />
<a href="#">Forgotten you password?</a>
</div>
<div class="submitButton">
<input type="submit" value="Log In" />
</div>
</form>
</div>
</div>
</header>
</body>
</html>在您的CSS中，此行
.loginArea .username,
应该是
.loginArea .userName,
在这里您有一个示例使用CSS display属性：
.paral {
display: inline-block;
}<div class="logoArea">
<img src="media/6cVHHozUQSt.png" alt=""/>
</div>
<div class="loginArea">
<form action="#">
<div class="paral">
<label for="user">Email or Phone </label> <br/>
<input type="text" id="user"/><br/>
</div>
<div class="paral">
<label for="password">Password </label> <br/>
<input type="password" id="password"/> <br />
</div>
<div class="paral">
<input type="submit" value="Log In"/>
</div>
</form>
</div> 1-用户名！=用户名2-输入宽度不够3-不要在表格中使用 <br>
body {
margin: 0;
padding: 0;
}
header.mainHeader:after {
content: "";
display: block;
clear: both;
}
header.mainHeader {
background: #3a5797;
}
.mainHeader .logoArea {
width: 50%;
float: left;
}
.mainHeader .loginArea {
float: right;
width: 50%;
}
.loginArea .userName,
.loginArea .password {
width: 45%;
float: left;
}
.loginArea .submitButton {
width: 10%;
float: left;
}<header class="mainHeader">
<form action="#">
<div class="mainArea">
<div class="logoArea">
<img src="media/6cVHHozUQSt.png" alt="" />
</div>
<div class="loginArea">
<div class="userName">
<label for="user">Email or Phone </label>
<input type="text" id="user" name="user" />
</div>
<div class="password">
<label for="password">Password </label>
<input type="password" id="password" />
</div>
<div class="submitButton">
<input type="submit" value="Log In" />
</div>
</div>
</div>
<div class="mainArea2">
<label for="keepLogin"> Keep me Logged In</label>
<input type="checkbox" id="keepLogin" />
</div>
</form>
</header>