如何创建:社交登录表单
学习如何使用 CSS 创建社交媒体登录表单。
响应式社交登录表单
如何创建社交登录表单
第一步 - 添加 HTML:
使用 <form> 元素来处理输入。您可以在我们的 PHP 教程中了解更多相关信息。
然后为每个字段添加输入控件或社交媒体链接:
<div class="container"> <form action="/action_page.php"> <div class="row"> <h2 style="text-align:center">Login with Social Media or Manually</h2> <div class="vl"> <span class="vl-innertext">or</span> </div> <div class="col"> <a href="#" class="fb btn"> <i class="fa fa-facebook fa-fw"></i> Login with Facebook </a> <a href="#" class="twitter btn"> <i class="fa fa-twitter fa-fw"></i> Login with Twitter </a> <a href="#" class="google btn"> <i class="fa fa-google fa-fw"></i> Login with Google+ </a> </div> <div class="col"> <div class="hide-md-lg"> <p>Or sign in manually:</p> </div> <input type="text" name="username" placeholder="Username" required> <input type="password" name="password" placeholder="Password" required> <input type="submit" value="Login"> </div> </div> </form> </div> <div class="bottom-container"> <div class="row"> <div class="col"> <a href="#" style="color:white" class="btn">Sign up</a> </div> <div class="col"> <a href="#" style="color:white" class="btn">Forgot password?</a> </div> </div> </div>
第二步 - 添加 CSS:
* {box-sizing: border-box} /* 设置容器的样式 */ .container { position: relative; border-radius: 5px; background-color: #f2f2f2; padding: 20px 0 30px 0; } /* 设置输入字段和链接按钮的样式 */ input, .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; margin: 5px 0; opacity: 0.85; display: inline-block; font-size: 17px; line-height: 20px; text-decoration: none; /* 删除锚的下划线 */ } input:hover, .btn:hover { opacity: 1; } /* 为 Facebook、Twitter 和 google 按钮添加适当的颜色 */ .fb { background-color: #3B5998; color: white; } .twitter { background-color: #55ACEE; color: white; } .google { background-color: #dd4b39; color: white; } /* 设置提交按钮的样式 */ input[type=submit] { background-color: #04AA6D; color: white; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* 两列布局 */ .col { float: left; width: 50%; margin: auto; padding: 0 50px; margin-top: 6px; } /* 清除列后的浮动 */ .row:after { content: ""; display: table; clear: both; } /* 垂直线 */ .vl { position: absolute; left: 50%; transform: translate(-50%); border: 2px solid #ddd; height: 175px; } /* 垂直线内的文字 */ .inner { position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 50%; padding: 8px 10px; } /* 在中大屏幕上隐藏一些文本 */ .hide-md-lg { display: none; } /* 底部容器 */ .bottom-container { text-align: center; background-color: #666; border-radius: 0px 0px 4px 4px; } /* 响应式布局 - 当屏幕宽度小于 650px 时,使两列堆叠在而不是并排 */ @media screen and (max-width: 650px) { .col { width: 100%; margin-top: 0; } /* 隐藏垂直线 */ .vl { display: none; } /* 在小屏幕上显示隐藏的文本 */ .hide-md-lg { display: block; text-align: center; } }
相关页面
教程:HTML 表单
教程:CSS 表单