html - 无法为登录页面设置准确的 CSS

问题描述

我想创建一个这样的登录页面：https ://i.stack.imgur.com/smEWd.jpg

但我得到的是： https ://i.stack.imgur.com/DvpEL.jpg

import React, { useState } from "react";
import Header from "./Header";
// import { Button, FormGroup, input, label } from "react-bootstrap";
import "./Login.css";

export default function Login1(props) {
//   const [email, setEmail] = useState("");
//   const [password, setPassword] = useState("");
    const [user, setUser] = useState({email : "", password : ""})

  function validateForm() {
    return user.email.length > 0 && user.password.length > 0;
  }

  function handleSubmit(event) {
    event.preventDefault();
    
  }

  return (
    
    <div className="Login">
        <Header person = {user}/>
      <form className="modal-content animate" onSubmit={handleSubmit}>
      <div><h3 align='center'>Login</h3>
       </div>
       <div className="Container">
          
          <input type="text"
            autoFocus
            placeholder="Username"
            value={user.email}
            onChange={e => setUser({...user,email : e.target.value})}
          />
            {/* {console.log(user)} */}
        
          <br/>
          <input type="password" placeholder="Password"
            value={user.password} 
            onChange={e => setUser({...user,password : e.target.value})}
            
          />
        <br/><button disabled={!validateForm()}type="submit">
          Login
        </button> 
        </div>
        <div id="footer">
        <button className="submit1" disabled="true" type="submit">
          Sign up
        </button>
        <br/><button className ="submit1" disabled="true" type="submit">
          Forgot Password?
        </button>
        </div>
      </form>
    </div>
  );
}

@media all and (min-width: 480px) {
  .Login {
    padding: 120px 0;
  }

  .Login form {
    margin: 0 auto;
    max-width: 480px;
  }




  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 80%; /* Full width */
    height: 80%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 100px;
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 10px auto; /* 15% from the top and centered */
    border: 1px solid #888;
    border-radius: 15px;
    width: 120%; /* Could be more or less, depending on screen size */
  }
  
  
  .footer {
    background-color: #9fa9a3;
    margin: 10px auto; /* 15% from the top and centered */
    border: 1px solid #888;
    border-radius: 15px;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  

  input[type=text], input[type=password] {
    width: 100%;
    padding: 10px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .container {
    padding: 30px;
  }
  
  /* Set a style for all buttons */
  button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  h3{
    font-family:"Arial Black", Gadget, sans-serif;
    font-size: 30px;
  }

  /* Add Zoom Animation */
   .animate {
    -webkit-animation: animatezoom 0.0s;
    animation: animatezoom 0.0s
  }
  
  @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
  }
  
  @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
  } */


  form {
    border: 3px solid #f0f0f0;
  }


}

我尝试更改代码的宽度和 CSS。但我仍然无法获得确切的登录页面设计。有人可以帮我吗？

我已经添加了代码片段。我正在使用反应来做到这一点。我已经在 login.js 中完成了这个 html 代码，并附上了 CSS。

标签： htmlcssreactjs

html - 无法为登录页面设置准确的 CSS

问题描述

解决方案

推荐阅读