简洁大气上档次的登录页面

最新推荐文章于 2022-02-08 00:34:30 发布

pinkdown

最新推荐文章于 2022-02-08 00:34:30 发布

阅读量1.9k

点赞数 5

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44764207/article/details/103774541

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
 </head>
 <style>
  body{
   margin:0;
   padding:0;
   background:#487eb0;
  }
  .signup-form{
   width:300px;
   padding:20px;
   text-align: center;
   background: url("./static/jpg/02.png");
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   overflow:hidden;
  }
  .sign-form h1{
   margin-top: 100px;
   font-family: 'Permanent Marker',cursive;
   font-size: 40px;
  }
  .signup-form input {
   display: block;
   width: 100%;
   padding:0 16px;
   height:44px;
   text-align: center;
   box-sizing: border-box;
   outline: none;
   border: none;
   font-family: "montserrat",sans-serif;
  }
  .txtb{
   margin:20px 0;
   background: rgba(255,255,255,.5);
   border-radius: 6px;
  }
  .signup-btn{
   margin-top: 60px;
   margin-bottom: 20px;
   background: #487eb0;
   color:white;
   border-radius: 44px;
   cursor: pointer;
   transition:0.8s;
  }
  .signup-btn:hover{
   transform:scale(0.96);
   background: rgba(0,0,0.3);
  }
  .signup-form a{
   text-decoration: none;
   color:white;
   font-family: "montserrat",sans-serif;
   font-size: 14px;
   padding: 10px;
   transition:0.8s;
   display: block;
   border-radius: 44px;
  }
  .signup-form a:hover{
   transform:scale(0.96);
   background: rgba(0,0,0.3);
  }
 </style>
 <body>
  <div class="signup-form">
   <form action="index.html" method="post">
    <h1>Sign Up</h1>
    <input type="text" placeholder="用户名" class="txtb"/>
    <input type="email" placeholder="邮箱" class="txtb"/>
    <input type="password" placeholder="密码" class="txtb"/>
    <input type="submit" value="创建用户" class="signup-btn"/>
    <a href="#">登录</a>
   </form>
  </div>
 </body>
</html>

具体什么效果，请自行尝试哟，亲，相信不会让你失望的

pinkdown

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
简洁大气上档次的登录页面

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <style&gt...
复制链接

扫一扫