CSS＆HTML移動元素

我目前正在開發一個網站項目，但是我在開發它時遇到了一些問題。基本上，現在我正在嘗試創建一個登錄頁面。我在網上遇到了相當常見的錯誤，當瀏覽器調整大小時，這會讓所有事情變得醜陋和動人。CSS＆HTML移動元素

/* 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你能幫助我:)

來源

2017-02-20 Ne7WoRK

您正在尋找***響應***。你有很長時間的閱讀。 –

你也沒有說你想要什麼？移動版本的結果相同嗎？不同的結果？ – Armin

你應該是在作弄響應

例如

/* Bordered form */ 
 

 
form { 
 
    max-width: 500px; 
 
    background-position: top center; 
 
    margin: 0 auto; 
 
} 
 

 
body { 
 
    background-image: url("/images/background.jpeg"); 
 
    background-position: top center; 
 
} 
 

 

 
/* 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 */ 
 

 

 
/* Avatar image */ 
 

 
img.avatar { 
 
    text-align: center; 
 
    width: 40%; 
 
    border-radius: 50%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 

 
/* Add padding to containers */ 
 

 

 
/* 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 class="container"> 
 
    <div class="row"> 
 

 
     <form action="action_page.php"> 
 
     <div class="imgcontainer"> 
 
      <img src="/images/treasure.jpeg" alt="Avatar" class="avatar"> 
 
     </div> 
 

 
     <div class="form"> 
 
      <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> 
 
    </div> 
 
</body>

來源

2017-02-20 14:03:27 cnsvnc

除了由cnsvnc提供的答案。

以及使用響應式工具如％值而不是固定px大小等。您可能還想查看媒體查詢。

媒體查詢允許您根據視口大小應用特定樣式。您可以在這裏瞭解更多：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

一個例子媒體查詢：

@media only screen and (max-width: 500px) { 
// your styles here 
}

另外我已經把一個簡單的例子，共同展示。嘗試在這個小提琴中調整瀏覽器的大小，並看到新的樣式得到應用。

https://jsfiddle.net/kfy3jj1q/

來源

2017-02-20 14:10:55 Brad

你可以看一看引導的網格佈局。它是最簡單和最廣泛使用的平臺，它可以幫助您避免跨瀏覽器測試代碼和覆蓋所有不同屏幕。這裏是自舉網格的鏈接系統：

http://getbootstrap.com/css/#grid（嘗試調整示例中的瀏覽器的大小）。

你只需要使用納入他們的CSS和JS文件，你很好去。

來源

2017-02-20 14:28:01 Prateek

CSS＆HTML移動元素

回答

相關問題