ログイン画面の書式設定

私はHTMLとCSSの方が新しいです。私はまた、非常に基本的な質問があることを知っています。私はログインフロントエンドを作成しようとしていますが、私が使用しているコードは以下の通りです。コードはHTMLとCSSだけログイン画面の書式設定

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t form { 
 
\t \t \t \t border: 6px solid #f1f1f1; 
 
\t \t \t } 
 

 
\t \t \t input[type=text]{ 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t padding: 12px 12px; 
 
\t \t \t \t margin: 16px 0; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t border: 2px solid #ccc; 
 
\t \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 

 
\t \t \t input[type=password] { 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t padding: 12px 12px; 
 
\t \t \t \t margin: 16px 0; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t border: 2px solid #ccc; 
 
\t \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 

 
\t \t \t button { 
 
\t \t \t \t background-color: #4CAF50; 
 
\t \t \t \t color: white; 
 
\t \t \t \t padding: 14px 20px; 
 
\t \t \t \t margin: 8px 0; 
 
\t \t \t \t border: none; 
 
\t \t \t \t cursor: pointer; 
 
\t \t \t \t width: 10%; 
 
\t \t \t } 
 

 
\t \t \t button:hover { 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t } 
 

 
\t \t \t .cancelbtn { 
 
\t \t \t \t width: auto; 
 
\t \t \t \t padding: 10px 18px; 
 
\t \t \t \t background-color: #f44336; 
 
\t \t \t } 
 

 
\t \t \t .imgcontainer { 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t margin: 12px 40px 12px 0; 
 
\t \t \t } 
 

 
\t \t \t .container { 
 
\t \t \t \t padding: 20px; 
 
\t \t \t } 
 

 
\t \t \t span.psw { 
 
\t \t \t \t float: right; 
 
\t \t \t \t padding-top: 16px; 
 
\t \t \t } 
 

 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <center> 
 
\t \t \t <h2>Inventory Update Interface Login</h2> 
 
\t \t </center> 
 
\t \t <form method="post"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <label> 
 
\t \t \t \t \t <b>Username</b> 
 
\t \t \t \t </label> 
 
\t \t \t \t <input type="text" placeholder="Enter Username" name="uname" required> 
 
\t \t \t \t <label> 
 
\t \t \t \t \t <b>Password</b> 
 
\t \t \t \t </label> 
 
\t \t \t \t <input type="password" placeholder="Enter Password" name="psw" required> 
 
\t \t \t \t <button type="submit">Login</button> 
 
\t \t \t </div> 
 
\t \t </form> 
 
\t </body> 
 
</html>

を使用して書かれているが、問題は、私は長さが若干小さく、画面やテキストフィールドの中央にボックスを作りたいということです。少し早いですがお礼を！

出典

2017-04-27 nishant kumar

このCSSを追加

.container{ 
    max-width:600px; 
    border: 6px solid #f1f1f1; 
    margin:0 auto; 
}

form {} 
 

 
.container { 
 
    max-width: 600px; 
 
    border: 6px solid #f1f1f1; 
 
    margin: 0 auto; 
 
} 
 

 
input[type=text] { 
 
    width: 100%; 
 
    padding: 12px 12px; 
 
    margin: 16px 0; 
 
    display: inline-block; 
 
    border: 2px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 12px; 
 
    margin: 16px 0; 
 
    display: inline-block; 
 
    border: 2px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 10%; 
 
} 
 

 
button:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 12px 40px 12px 0; 
 
} 
 

 
.container { 
 
    padding: 20px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
}

<center> 
 
    <h2>Inventory Update Interface Login</h2> 
 
</center> 
 
<form method="post"> 
 
    <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> 
 
    </div> 
 
</form>

出典

2017-04-27 10:39:42

ありがとうございました –

TRY THIS 


<style> 
     form { 
      border: 6px solid #f1f1f1; 
     } 

     input[type=text]{ 
      width: 100%; 
      padding: 8px 8px; 
      margin: 16px 0; 
      display: inline-block; 
      border: 2px solid #ccc; 
      box-sizing: border-box; 
     } 

     input[type=password] { 
       width: 100%; 
       padding: 8px 8px; 
       margin: 16px 0; 
       display: inline-block; 
       border: 2px solid #ccc; 
       box-sizing: border-box; 
     } 

     button { 
      background-color: #4CAF50; 
      color: white; 
      padding: 15px 35px 15px; 
      margin: 8px 0; 
      border: none; 
      cursor: pointer; 
      width: 10%; 
      text-align: center; 
      vertical-align: middle; 
     } 

     button:hover { 
      opacity: 0.8; 
     } 

     .cancelbtn { 
      width: auto; 
      padding: 10px 18px; 
      background-color: #f44336; 
     } 

     .imgcontainer { 
      text-align: center; 
      margin: 12px 40px 12px 0; 
     } 

     .container { 
      padding: 20px; 
      margin-left: 25%; 
      margin-right: 25%; 

     span.psw { 
      float: right; 
      padding-top: 16px; 
     } 

    </style>

出典

2017-04-27 10:46:49

-1

@nishantクマー私はちょうどあなたが「幅与えている理由という目的を学ぶためにお願いしたいと思います書式設定から一部：10 ％; " "ボタン"に？提案：代わりに "min-width：Xpx"を使用することを検討することができます。ここで「x」はお客様の要件に応じて任意の数値になります。

出典

2017-04-27 10:51:07 sanjay

ログイン画面の書式設定

答えて

関連する問題