この前に同様の投稿を作成したことは知っていますが、回答が得られなかったので、もう一度試して、誰かがここで私を助けてくれるかどうかを確認したいと思いました。基本的に、私のCSS要素は重複しています（具体的には、ログインボックス、縦線、サイドテキストクラス）。この問題を回避するためにパーセンテージを使用してみましたが、実際にはうまくいきませんでした。
また、メディアクエリを使用すると、コンピューターのWebブラウザーアプリケーションでサイズ変更が正確になりません。メディアクエリを使用する場合、ユーザーがウィンドウブラウザのサイズを変更する場合、最小幅をどのように設定するかをどのように知ることができますか？
これが私がこれまでに持っている私のコードです...
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0, 0, 0, 0);
color: white;
top: 50%;
left: 33%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color: darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color: darkgrey;
transition: 0.3s;
}
.email-input-field input:focus+i,
.password-input-field input:focus+i {
color: dodgerblue;
}
.login-box .email-input-field,
.password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.vertical-line {
border-left: 1px solid darkgrey;
width: 1px;
height: 170px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.side-text {
width: 200px;
height: 80px;
top: 50%;
left: 63%;
position: absolute;
transform: translate(-50%, -50%);
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="login-box">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" autocomplete="off">
<i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" autocomplete="off">
<i class="fa fa-lock fa-lg" aria-hidden="true"></i>
</div>
<input type="submit" name="submit" value="Login">
</form>
</div>
<div class="vertical-line"></div>
<div class="side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>どうもありがとうございます！
迅速な解決策：
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title> Admin Login </title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0,0,0,0);
color: white;
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color:darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color:darkgrey;
transition: 0.3s;
}
.email-input-field input:focus + i, .password-input-field input:focus + i {
color:dodgerblue;
}
.login-box .email-input-field, .password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"], input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.splitter {
border-left: 1px solid darkgrey;
width:1px;
height: 170px;
box-sizing: border-box;
margin: 0 20px;
}
.side-text {
width: 200px;
height: 80px;
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
.wrapper {
display: flex;
align-items: center;
height: 100vh;
justify-content: center;
}
@media (max-width: 640px) {
.wrapper {
flex-direction: column;
}
.splitter {
border-top: 1px solid darkgrey;
height:1px;
width: 170px;
margin: 20px 0;
}
.side-text {
text-align: center;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class = "login-box">
<form action = "Login.php" method = "POST">
<div class = "email-input-field">
<input type = "email" name = "emailPost" placeholder = "Email" autocomplete = "off">
<i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
</div>
<div class = "password-input-field">
<input type = "password" name = "passwordPost" placeholder = "Password" autocomplete = "off">
<i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
</div>
<input type = "submit" name = "submit" value = "Login">
</form>
</div>
<div class = "splitter"></div>
<div class = "side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
</div>
</body>
</html>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加