博客列表 >3月12日表单及CSS样式练习

3月12日表单及CSS样式练习

未来已来的博客
未来已来的博客原创
2019年03月15日 15:31:52619浏览
登陆表单案例练习

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>登陆页面</title>
 <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
 <style type="text/css">
 *{margin:0px;padding: 0px;}
 body{
   background:black
  }
 div{
  height:300px;
  width:400px;
  border:1px solid blue;
  margin:200px auto;
  background: rgba(188,185,198,0.4);
  border-radius: 10px;
  text-align: center;
 }
 img{

  width:80px;
  margin-top: 30px;
  border-radius: 50%;
 }
 input{
  margin:10px auto;
  height:30px;
  width:300px;
  border-radius:10px;

 }
 button{
  height:35px;
  width:200px;
 border:none;
 background: red;
 margin:10px auto;
 border-radius:10px;
 color: #fff;

 }
 </style>
</head>
<body>
 <div>
<img src="http://img4.duitang.com/uploads/item/201412/24/20141224224554_SuYth.thumb.700_0.jpeg">
<form action="#" method="get">
<input type="text" name="" placeholder="请输入用户名"><br>
<input type="password" name="" placeholder="请输入密码"><br>
<button>登陆</button>
</form>
 </div>
</body>
</html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议