我已经完成了登录表单模板，但我有几个问题需要改进。
首先，我希望LOGO图像能够适应窗口，这样你就可以随时看到所有这些（不会被切断）
其次，我希望一切都能适应更小的窗口（可能是移动的）。目前，一旦窗口达到一定大小，一切都会变得无组织。我的想法是Logo＆amp;颜色（左侧部分）移动到顶部，所有文本捆绑在彼此之上。
下面我将包括所有使用的代码和当前状态的屏幕截图。
谢谢！
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Belper</title>
<meta name="author" content="Mathieu Larocque">
<title>Bepler</title>
<!-- Meta and Opengraph tags -->
<meta name="description" content="Material Design Login Form for Mediahawkz.com">
<meta name="keywords" content="html, html5, css, css3, material, form, login, google material design, material design, mediahawkz, mediahawkz.com">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Main content -->
<main role="main">
<div class="mediahawkz-login">
<div class="div-left"></div>
<div class="div-right">
<div class="rkmd-form login">
<h2 class="form-title">Login</h2>
<form id="login" action="" method="POST" onsubmit="return false;">
<div class="form-field">
<label class="field-label" for="emailid">Email ID</label>
<input id="emailid" type="text" name="emailid" class="field-input">
<i class="material-icons md-18">error_outline</i>
</div>
<div class="form-field">
<label class="field-label" for="pass">Password</label>
<input id="pass" type="password" name="pass" class="field-input">
<i class="material-icons md-18">error_outline</i>
</div>
<div class="form-row">
<div class="msg">
<!-- <span class="error">We can't find that email address. Have you registered?.</span> -->
</div>
</div>
<div class="form-row clearfix">
<div class="remember float-left">
<input type="checkbox" name="rem" id="rem">
<label for="rem">Stay Signed in</label>
</div>
<button id="submit" class="rkmd-btn btn-lightBlue ripple-effect float-right">LOGIN</button>
</div>
<div class="form-row clearfix">
<a href="#" data-tab="reset" class="link float-right toggle" onclick="return false;">Forgot your password?</a>
</div>
</form>
</div>
<div class="rkmd-form reset" style="display: none;">
<h2 class="form-title">Reset password</h2>
<form id="reset" action="" method="POST" onsubmit="return false;">
<div class="form-row">
<span class="default">You will receive a link to create a new password via email.</span>
</div>
<div class="form-field">
<label class="field-label" for="emailid">Email ID</label>
<input id="emailid" type="text" name="emailid" class="field-input">
<i class="material-icons md-18">error_outline</i>
</div>
<div class="form-row">
<div class="msg">
</div>
</div>
<div class="form-row clearfix">
<button id="reset" class="rkmd-btn btn-lightBlue ripple-effect float-right">RESET PASSWORD</button>
</div>
<div class="form-row clearfix">
<a href="#" data-tab="login" class="link float-right toggle" onclick="return false;">Login</a>
</div>
</form>
</div>
<div class="copyright">
<p> Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved. </p>
</div>
</div>
</div>
</main>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
*, *::after, *::before {
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #03a9f4;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.link {
color: #575757;
font-size: 14px;
}
.mediahawkz-login {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: auto;
height: auto;
background-color: #f9f9f9;
}
.mediahawkz-login .div-left {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50%;
height: 100%;
background-color: #6fa7f7;
background-image: url("http://inddc.in/webroot/assets/img/sample/shortcode/logo/1.png");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 25%;
}
.mediahawkz-login .div-right {
overflow: auto;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
height: 100%;
}
.mediahawkz-login .copyright {
margin-top: 10%;
text-align: center;
}
.mediahawkz-login .copyright p {
color: #575757;
font-size: 13px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: '';
display: table;
line-height: 0;
clear: both;
}
.rkmd-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 35px;
line-height: 35px;
padding: 0 1.5rem;
color: #424242;
font-size: 15px;
font-weight: 600;
font-family: 'Roboto', sans-serif;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 2px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rkmd-btn:hover {
text-decoration: none;
}
.rkmd-btn.btn-lightBlue {
color: #FFF;
background-color: #03a9f4;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}
.rkmd-btn.btn-lightBlue:hover {
box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.275);
background-color: #23b9fc;
}
.ripple-effect {
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;
}
.ripple-effect .ripple {
display: block;
position: absolute;
border-radius: 100%;
background: rgba(255, 255, 255, 0.5);
-webkit-transform: scale(0);
transform: scale(0);
pointer-events: none;
}
.ripple-effect .animated {
-webkit-animation: ripple 0.6s linear;
animation: ripple 0.6s linear;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
.rkmd-form {
max-width: 355px;
margin: 16% auto 0;
}
.rkmd-form .form-title {
margin: 0;
padding: 0;
color: #03a9f4;
font-size: 30px;
font-weight: 300;
}
.rkmd-form .form-row {
display: block;
margin-top: 0.925em;
}
.rkmd-form .remember {
margin-top: 6px;
}
.rkmd-form .form-field {
position: relative;
height: 72px;
margin-top: 1em;
padding: 16px 0 8px 0px;
}
.rkmd-form .form-field i {
display: none;
margin-top: 5px;
float: right;
}
.rkmd-form .form-field::after, .rkmd-form .form-field::before {
content: '';
position: absolute;
left: 0px;
bottom: 8px;
width: 100%;
height: 1px;
background-color: #cdcdcd;
}
.rkmd-form .form-field::after {
background-color: #03a9f4;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.rkmd-form .form-field.focused::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.rkmd-form .field-label {
position: relative;
display: block;
color: #575757;
font-size: 15px;
line-height: 16px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.rkmd-form .field-input {
position: relative;
display: block;
color: #575757;
width: 100%;
height: 32px;
font-size: 15px;
line-height: 16px;
margin: 0;
padding: 4px 0;
border: none;
outline: none;
background-color: transparent;
}
.rkmd-form .has-label .field-label {
-webkit-transform: translateY(0) scale(0.85);
transform: translateY(0) scale(0.85);
}
.rkmd-form .focused .field-label {
color: #03a9f4;
}
.rkmd-form input[type="checkbox"] + label:before {
display: inline-block;
width: 1em;
color: #6e6e6e;
margin: 0 10px 0 0;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: -6px;
-webkit-transition: -webkit-transform 0.1s ease;
transition: -webkit-transform 0.1s ease;
transition: transform 0.1s ease;
transition: transform 0.1s ease, -webkit-transform 0.1s ease;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
}
.rkmd-form input[type="checkbox"] {
position: absolute;
visibility: hidden;
}
.rkmd-form input[type="checkbox"] + label {
cursor: pointer;
color: #575757;
}
.rkmd-form input[type="checkbox"] + label:before {
content: "\e835";
}
.rkmd-form input[type="checkbox"]:checked + label:before {
content: "\e834";
color: #03a9f4;
}
.rkmd-form input[type="checkbox"]:active:not(:disabled) + label:before {
-webkit-transform: scale3d(0.88, 0.88, 1);
transform: scale3d(0.88, 0.88, 1);
}
.rkmd-form input[type="checkbox"]:disabled + label:before {
content: "\e909";
cursor: not-allowed;
color: rgba(0, 0, 0, 0.157);
}
.rkmd-form .form-field[error]::after, .rkmd-form .form-field[error]::before {
background-color: #f44336 !important;
}
.rkmd-form .form-field[error] .field-label {
color: #f44336 !important;
}
.rkmd-form .form-field[error] i {
display: block;
color: #f44336 !important;
}
.rkmd-form .msg {
min-height: 20px;
}
.rkmd-form .error {
display: block;
margin: 0;
padding: 0;
color: #f44336 !important;
font-size: 14px;
}
.rkmd-form .default {
color: #575757 !important;
font-size: 14px;
}
JS
$(document).ready(function() {
$(".rkmd-form").rkmd_form();
$(".ripple-effect").rkmd_rippleEffect();
});
(function($) {
$.fn.rkmd_form = function() {
var self, formField, formInput;
self = $(this);
formField = self.find(".form-field");
formInput = self.find(".field-input");
formInput.on("focus", function() {
$(this)
.parent()
.addClass("focused has-label");
});
formInput.on("blur", function() {
if ($(this).val() == "") {
$(this)
.parent()
.removeClass("has-label");
}
$(this)
.parent()
.removeClass("focused");
});
formInput.each(function() {
self = $(this);
if (self.val().length > 0) {
self.parent().addClass("has-label");
}
});
};
$.fn.rkmd_rippleEffect = function() {
var btn, self, ripple, size, rippleX, rippleY, eWidth, eHeight;
btn = $(this).not("[disabled], .disabled");
btn.on("mousedown", function(e) {
self = $(this);
if (e.button === 2) {
return false;
}
if (self.find(".ripple").length === 0) {
self.prepend('<span class="ripple"></span>');
}
ripple = self.find(".ripple");
ripple.removeClass("animated");
eWidth = self.outerWidth();
eHeight = self.outerHeight();
size = Math.max(eWidth, eHeight);
ripple.css({ width: size, height: size });
rippleX = e.clientX - self.offset().left - size / 2;
rippleY = e.clientY - self.offset().top - size / 2;
ripple.css({ top: rippleY + "px", left: rippleX + "px" });
ripple.addClass("animated");
});
};
})(jQuery);
$("#submit").on("click", function() {
var form = $("#login");
var emailid = form.find("#emailid");
var pass = form.find("#pass");
if (emailid.val() == "") {
emailid.parent().attr("error", "");
} else {
emailid.parent().removeAttr("error");
}
if (pass.val() == "") {
pass.parent().attr("error", "");
} else {
pass.parent().removeAttr("error");
}
});
$("#reset").on("click", function() {
var form = $("#reset");
var emailid = form.find("#emailid");
if (emailid.val() == "") {
emailid.parent().attr("error", "");
} else {
emailid.parent().removeAttr("error");
}
});
$(".toggle").on("click", function() {
var tab = $(this).data("tab");
var parents = $(this)
.parents(".rkmd-form")
.hide();
$("." + tab).show();
});
模板信用转到MediaHawkz.com，我对编码很新，并在免费模板网站上使用此模板。
答案 0 :(得分：1)
您的徽标问题可以通过切换背景大小来解决：封面背景大小包含：
.mediahawkz-login .div-left {
...
background-size: contain;
...
}
移动部分（称为＆＃34;响应式＆＃34;）通过一些简单的技巧完成。这里解释得太多了，但基本原则是：
使用@media查询更改不同尺寸设备的设计规则：
.mediahawkz-login .div-left {
float:left;
width: 100%;
min-height:100px;
}
@media (min-width:600px){
.mediahawkz-login .div-left {
width:50%;
min-height:100%;
}
首先设计移动设备，然后使用媒体查询更改较大屏幕的布局。这被称为＆＃34;移动优先＆＃34;设计，如果你这样思考，代码会变得更加混乱。
使用css＆＃34; float＆＃34;使左右元素相互移动的元素。您的模板（顺便说一下，它没有非常好的CSS）使用绝对定位...并不总是响应式设计的好选择。
这是一个标识和定位固定的代码笔。我只需要改变css中的2个元素; .mediahawkz-login .div-left和.mediahawkz-login .div-right。水平或垂直向下收缩窗口，看看会发生什么......