美文网首页
简简单单的input表单登录样式

简简单单的input表单登录样式

作者: 买信任 | 来源:发表于2019-03-13 13:52 被阅读0次

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  body{

   background: #52B1FD;

  }

  .cen{ 

   width: 400px;

   height: 400px;

   background: #E6E6E6;

      margin: 150px auto;

      border-radius:20px;

   }

  .logo{

   margin: 0 auto; 

   width:160px;

   height:100px;

   }

  .fro{

   width: 200px;

   height: 200px;

   margin: 50px auto;

  } 

  input{

   width: 150px;

   height: 30px;

   margin: 10px;

  }

  button{

   margin: 0;

   padding: 0;

   border: 1px solid transparent;  

   outline: none; 

   box-shadow:2px 2px 5px #888888;

  }

 </style>

</head>

<body>

 <div>

   <div>

        <img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png "width="160px; height="100px;>

   </div>    

    <div>

     <form action="" method="post" style="width: 300px; margin: 0 auto;">

      用户名: <input type="text" name="" value="请输入用户名"></input><br/>

      密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="" value="请输入密码"></input></br>

      <button style="width: 100px; height: 30px;border-radius:10px; background: #27C4FF;display:block;margin:30px 150px 30px auto">提交</button>

     </form>

    </div> 

 </div>

</body>

</html>

相关文章

网友评论

      本文标题:简简单单的input表单登录样式

      本文链接:https://www.haomeiwen.com/subject/lcwzpqtx.html