Question

每当我调整html页面大小时，元素就开始相互重叠。我试图通过使用百分比而不是像素来避免这种情况。这是我到目前为止的代码，任何想法？你觉得设计顺便怎么样？ :)奇怪的是，中间的垂直线是调整窗口大小时的位置，但其他一切都没有。

*:focus {
        outline: none;
    }
    
        body {
    	background: #ced4da;
    	margin: 0;
    	padding: 0;
    	font-family: sans-serif;
        }
    
        .login-box {
    	width: 300px;
    	height: 170px;
    	background: rgba(0,0,0,0);
    	color: white;
    	top: 50%;
    	left: 33%;
    	position: absolute;
    	transform: translate(-50%,-50%);
    	box-sizing: border-box;
    	padding-top: 12.5px;
        }
    
        .email-input-field {
    	position: relative;
        }
    
        .password-input-field {
      	position: relative;
        }
    
       .email-input-field i {
    	position: absolute;
    	left: 0;
    	top: 4px;
    	padding: 9px 8px;
    	color:darkgrey;
    	transition: 0.3s;
    }
    
    .password-input-field i {
    	position: absolute;
    	left: 0;
    	top: 4px;
    	padding: 9px 12px;
    	color:darkgrey;
    	transition: 0.3s;
    }
    
       .email-input-field input:focus + i, .password-input-field input:focus + i {
    	 color:dodgerblue;
        }
    
        .login-box .email-input-field, .password-input-field {
     	 margin-bottom: 10px;
        }
    
       .login-box input[type="email"], input[type="password"] {
    	 border: none;
    	 background: white;
    	 height: 40px;
    	 font-size: 12px;
    	 width: 83%;
    	 padding-left: 50px;
       }
    
        .login-box input[type="submit"] {
    	 border: none;
    	 background-color: #3DBB96;
    	 color: white;
    	 outline: none;
    	 height: 40px;
    	 width: 100%;
    	 font-size: 15px;
    	 font-weight: lighter;
        }
    
       ::placeholder {
        color: grey;
       }
    
        .vertical-line {
         border-left: 1px solid darkgrey;
         width:1px;
         height: 170px;
         top: 50%;
         left:50%;
         position:absolute;
         transform: translate(-50%,-50%);
         box-sizing: border-box;
       }
    
        .side-text {
    	  top: 50%;
          left:63%;
          position:absolute;
          transform: translate(-50%,-50%);
          line-height: 100%;
        }
    
        .side-text p {
    	  font-weight: lighter;
        }
    
        .side-text h1 {
    	  font-weight: normal;
        }

<!DOCTYPE html>
    <html>
    <head>
    	<title> Admin Login </title>
    	<link rel="stylesheet" type="text/css" href="css/Login.css">
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    	<div class = "login-box">
    		<form>
    			<div class = "email-input-field">
    				<input type = "email" name = "emailPost" placeholder = "Email">
    				<i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
    			</div>
    			<div class = "password-input-field">
    				<input type = "password" name = "passwordPost" placeholder = "Password">
    				<i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
    			</div>
    			<input type = "submit" name = "submit" value = "Login">
    		</form>
    	</div>
    	<div class = "vertical-line"></div>
    	<div class = "side-text">
    		<h1> COLD OPS </h1>
    		<p> ADMINISTRATION PANEL </p>
    	</div>
    </body>
    </html>

Answer 1

制作自适应网页时，请在所有网页中添加以下元素:(在head标记内）实施例

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

当我调整页面大小时，为什么我的元素会重叠。我正在使用百分比

1 个答案: