<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body,h1,footer,main,div{
margin: 0;
padding: 0;
}
body{
display: flex;
flex-flow:column;
min-height: 100vh;
}
main{
flex:1;
}
.input_control{
360px;
margin: 20px auto;
}
input[type="text"],#btn1,#btn2{
box-sizing: border-box;
text-align:right;
font-size: 1.4em;
height: 2.7em;
border-radius: 4px;
border:1px solid #c8cccf;
color: #6a6f77;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
100%;
}
input[type="text"]:focus{
border: 1px solid #ff7496;
}
footer{
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
color:#fff;
/* height: 100px; */
box-sizing: border-box;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
</header>
<main>
<form action="" method="get">
<div class="input_control">
<input type="text" class="form_input" placeholder="Enter vendor key here"/>
</div>
<div class="input_control">
<input type="text" class="form_input" placeholder="Enter room name here"/>
</div>
<div class="input_control">
<input type="text" class="form_input" placeholder="Input key here if use encryption"/>
</div>
<div class="input_control">
<a id="btn1"><b></b>Join</a>
</div>
<div class="input_control">
<a id="btn2"><b></b>Video Options</a>
</div>
</form>
</main>
<footer>
<p>@ 2015 No right reserved.</p>
<p>Made with by an anoymous pastafarian</p>
</footer>
</body>
</html>
摘自https://blog.csdn.net/qq_35718410/article/details/52149894