1
htmlとcssだけを使って練習用のFacebookのログインページをデザインする。ここで私はいくつかの問題に直面している。それが何であるか分からない。ここではクラス "loginArea "しかし、それはできませんので、Facebookのロゴはokeyですが、ログイン領域は本物のFacebookのページとはまったく異なります。 .loginAreaクラスでDivタグのマージンが効かない
body {
margin: 0;
padding: 0;
font-family: arial;
}
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
margin: 40px 40px 0 200px;
}
.mainArea {
max-width: 1600px;
margin: auto;
}
header.mainHeader:after {
content: "";
display: block;
clear: both;
}
header.mainHeader {
background: #3a5797;
padding: 10px 0;
color: #fff;
}
.mainHeader .logoArea {
width: 50%;
float: left;
}
.mainHeader .loginArea {
float: right;
width: 50%;
}
.loginArea .userName,
.loginArea .password {
width: 40%;
float: left;
}
.loginArea input[type="text"],
.loginArea input[type="password"] {
width: 60%;
padding: 2px;
border-width: 1px;
border-color: #29487d;
margin-bottom: 5px;
}
.loginArea .submitButton {
width: 20%;
float: left;
}
.loginArea label {
font-size: 12px;
}
label[for="keepLogin"],
.loginArea a {
font-size: 12px;
color: #9CABC6;
}
#keepLogin {
margin: 0;
}
.submitButton input {
background: #3B5998;
color: #fff;
font-weight: bold;
margin-top: 20px;
border-width: 1px;
border-color: #29487d;
padding: 5px;
}<!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 id="logo" 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><br/>
<input type="password" id="password" /><br/>
<a href="#">Forgotten you password?</a>
</div>
<div class="submitButton">
<input type="submit" value="Log In" />
</div>
</form>
</div>
</div>
</header>
</body>
</html>
私の問題は、ログイン領域の上の高さでした。幅ではありません。私はログイン領域よりも高さを小さくしたい –
あなたの開発ツールを使用すると、ロゴボックスは幅があまりにも多く消費されるので、ログイン要素を2行目に強制します。ロゴボックスから幅を取り除き、何が起こるかを見てください。 – Daniel