0
私は現在ウェブサイトプロジェクトを行っていますが、開発中にいくつかの問題が発生しました。基本的に、今はログインページを作成しようとしています。ブラウザのサイズを変更すると、すべてが醜く動くようになります。CSS＆HTML移動要素
前： enter image description here
後：enter image description here
/* Bordered form */
form {
margin-left: 220px;
margin-right: 220px;
background-position: top center;
}
body{
background-image: url("/images/background.jpeg");
background-position: top center;
min-width:450px;
max-width:960px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
background-position : top center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Center the avatar image inside this container */
.imgcontainer {
padding-top: 60px;
position: relative;
left: 17%;
top: 200%;
width: 150%;
text-align: center;
font-size: 18px;
}
/* Avatar image */
img.avatar {
text-align: center;
width: 40%;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Add padding to containers */
.container {
padding: 20px;
margin-left: 232px;
margin-right: 200px;
min-width:450px;
max-width:960px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="login.css" media="screen" />
<title>Admin Panel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id = form >
<form action="action_page.php">
<div class="imgcontainer">
<img src="/images/treasure.jpeg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<span class="psw"><a href="#">Forgotten password?</a></span>
</div>
</form>
</div>
</body>私はnow.Iまで書いたコードは問題があると感じているされて掲示以下のコード本当に小さくて愚かですが、私はそれを見ません。私はこれに似た話題が多いことを知っていますが、2時間は私が答えなかったあなたが私を助けることができるuseful.Hope :)
あなたは***反応性***を探しています。あなたは先読みが長いです。 –
あなたはまた、正確に何が欲しいと言っていませんでしたか？モバイル版の場合も同じですか？異なる結果は？ – Armin