Question

因此，我要创建一个上课的网站，我还要再创建一个页面及其登录页面。事实是，似乎我无法像使用文本框一样移动表格和表格中的内容。我想要做的就像是Steam登录页面，我将在此处链接。基本上，我想在页面的中间放置一个框，在该框的左侧有一个用于输入用户名和密码的文本框，然后我要在框的中间沿一条细线分开两个半部分，在右侧三个框，一个用于用户名，两个用于密码。问题是我似乎还不能将我所需要的东西移到盒子的左侧。 https://store.steampowered.com/login/多数民众赞成在Steam登录站点上，它可以让您了解我想做什么。

这是我到目前为止的内容，我只想将灰色框向下移动一点，然后将我现在拥有的表格放在框的左侧，然后在框的右侧写一个新表格中间有一条分隔线。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Portal 2 Launch site</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <h1><a href="HOME.html"> <img src="logo.png" class="center"></a><h1>
  </head>

  <body>
 <!-- The navigation menu -->
<div class="navbar" style="width 100%">
  <a href="HOME.html"style="width:20%">Home</a>
  <a href="ABOUT.html"style="width:20%">About</a> 
  <a href="MEDIA.html"style="width:20%">Media</a>
  <div class="subnav" style="width:20%">
    <button class="subnavbtn" style="width: 100%">OtherGames</button>
    <div class="subnav-content">
      <a href="subHL.html">Half Life</a>
      <a href="subTF2.html">Team Fortress 2</a>
      <a href="subCS.html">Counter strike: Global Offensive</a>
    </div>
  </div>
   <a href="ACCOUNT.html" Style="width:20%">Account</a>
</div>
<center>
<div class="container">
 <a href="forgot.html" class="forgot">forgot password?</a>
  <form>
  <div class="input-wrap">
    <label>Username:</label><br>
    <input type="text">
  </div>
   <div class="input-wrap">
    <label>Password:</label><br>
    <input type="password">
  </div> 
  </form>
  <button class="submit" type="submit" form="form1" value="Submit">Submit</button 
</div>
<center>

  </body>
</html>

body {
  background-color: black;
  color: black;
  opacity: 300;
}

.container {
  display: flex;
  flex-direction: column;
  background: gray;
  border: 10px black;
  margin:0;
  width: 420px;
  padding: 20px
}
.container1 {
  display: flex;
  flex-direction: column;
  background: gray;
  border: 10px black;
  margin:0;
  width: 620px;
  padding: 20px
}
.input-wrap1 {
  width:620px;

}

form {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.input-wrap {
  margin: 5px;
}

input {
  background-color: white;
  border: 1px solid #4C4B63;
}
.submit{
background: #333;

color: white;

border-style: outset;

border-color: #0066A2;

height: 50px;

width: 100px;

font: bold 15px arial, sans-serif;

text-shadow:none;

cursor: pointer;

}
.submit:hover {

background: green;

color: #eee;

border: 1px solid #eee;


text-shadow:none;

cursor: pointer;

}

Answer 1

我为您提供了有关登录的想法的摘要。您将不得不修改它以适合您自己的样式。我给您一个link的小游戏来学习flexbox，我将其用在代码段中。

.wrapper {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: slategrey;
}

.login {
  display: flex;
  width: 400px;
  height: 300px;
  background-color: lightgrey;
  padding: 10px;
}

.side {
  flex: 1
}

.separator {
  flex: 0;
  border-left: 1px solid black;
  width: 2px;
  height: 250px;
  margin: auto 16px;
}
.side {
  flex: 1;
}

<div class="wrapper">
  <div class="login">
    <div class="side">
     <form>
       <div>
        <label>Username:</label><br>
        <input type="text">
       </div>
       <div>
        <label>Password:</label><br>
        <input type="password">
       </div> 
      </form>
      <button class="submit" type="submit" form="form1" value="Submit">Submit</button>
    </div>
    <div class="separator"></div>
    <div class="side">
     <form>
       <div>
        <label>Username:</label><br>
        <input type="text">
       </div>
       <div>
        <label>Password:</label><br>
        <input type="password">
       </div> 
       <div>
        <label>Confirm password:</label><br>
        <input type="password">
       </div> 
      </form>
      <button class="submit" type="submit" form="form2" value="Submit">Submit</button>
    </div>
  </div>
</div>

编辑表单的位置以及表单中的内容

1 个答案: