<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<link rel="stylesheet" href="layui/css/layui.css" ?media="all">
?? ??? ??? ?
?? ??? ?<script src="layui/layui.js"></script>
?? ??? ?<style type="text/css">
?? ??? ??? ?
?? ??? ??? ?body{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ? background-color: #2b4b6b;
?? ??? ??? ?}
?? ??? ??? ?.head{
?? ??? ??? ??? ?width:450px ;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ??? ?//background-color: #fff;
?? ??? ??? ??? ?background: ?#2b4b6b;
?? ??? ??? ??? ?border-radius: 5px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 50%;
?? ??? ??? ??? ?left: 50%;
?? ??? ??? ??? ?transform: translate(-50%,-50%);
?? ??? ??? ??? ?box-shadow:0 0 10px aliceblue;
?? ??? ??? ?}
?? ??? ??? ?.avatar_box{
?? ??? ??? ??? ?height: 130px;
?? ??? ??? ??? ?width: 130px;
?? ??? ??? ??? ?border-radius: 50%;
?? ??? ??? ??? ?border: 1px solid #eee;
?? ??? ??? ??? ?padding: 10px;
?? ??? ??? ??? ?background-color:#2b4b6b ;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?left: 50%;
?? ??? ??? ??? ?transform: translate(-50%,-50%);
?? ??? ??? ?}
?? ??? ??? ?img{
?? ??? ??? ??? ?height: 130px;
?? ??? ??? ??? ?width: 130px;
?? ??? ??? ??? ?border-radius: 50%;
?? ??? ??? ??? ?background-color: #eee;
?? ??? ??? ?}
?? ??? ??? ?.layui-form{
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ? ?bottom: 50px;
?? ??? ??? ??? ??? ??
?? ??? ??? ??? ??? ? ?padding:0 20px;
?? ??? ??? ??? ??? ? ?box-sizing: border-box;
?? ??? ??? ?}
?? ??? ??? ?.btns{
?? ??? ??? ??? ? ?display: flex;
?? ??? ??? ??? ? ?justify-content: flex-end;
?? ??? ??? ?}
?? ??? ??? ?.inputdiv{
?? ??? ??? ? ? ? ? ? ? ?display:flex;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?border: 1px solid #D2D2D2!important;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?background-color: #fff;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?//height: 38px;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?line-height: 38px;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?padding: 0px 19px;
?? ??? ??? ? ? ? ? ? ? ?border-radius: 20px;
?? ??? ??? ? ? ? ? ?}
?? ??? ??? ? ? ? ? ?.layui-input {
?? ??? ??? ? ? ? ? ? ? ?border-style: none;
?? ??? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ?</style>
?? ?</head>
?? ?<body >
?? ??? ?<div class="head">
?? ??? ??? ?<div class="avatar_box">
?? ??? ??? ? ? ? ?<img src="./img/name.jpg" ?class=" layui-anim layui-anim-scalesmall-spring">
?? ??? ? </div>
?? ??? ? <form class="layui-form" >
?? ??? ? ? <div class="layui-form-item">
?? ??? ? ? ?<div class="inputdiv">
?? ??? ? ? ? ? ? ?<i class="layui-icon layui-icon-username"></i>
?? ??? ? ? ? ? ? ?<input type="text" name="username" lay-verify="title" ?class="layui-input" >
?? ??? ? ? ? </div>
?? ??? ? ?</div>
?? ??? ??? ? <div class="layui-form-item">
?? ??? ??? ? ?<div class="inputdiv">
?? ??? ??? ? ? ? ? ?<i class="layui-icon layui-icon-password"></i>
?? ??? ??? ? ? ? ? ?<input type="text" name="username" lay-verify="title" autocomplete="off" class="layui-input" >
?? ??? ??? ? ? </div>
?? ??? ??? ? ?</div>
?? ??? ??? ? <div class="btns">
?? ??? ??? ??? ? <button type="button" ?? ?class="layui-btn layui-btn-normal">登录</button>
?? ??? ??? ??? ? <button type="button" ?? ?class="layui-btn layui-btn-normal">重置</button>
?? ??? ??? ? </div>
?? ??? ??? ? </form>
?? ??? ?</div>
?? ??? ?
?? ??? ?<script>
?? ??? ?//Demo
?? ??? ?layui.use('form', function(){
?? ??? ? ?var form = layui.form;
?? ??? ? });
?? ??? ?</script>
?? ?</body>
</html>
?
?