您的位置：首页 > Web前端 > HTML5

web前端学习教程：大气炫酷html5响应式带第三方登录页面模板

2019-06-28 08:37 1251 查看

大气炫酷html5响应式带第三方登录页面模板，一款非常美观前端用户登录界面模板，完美自适应PC手机端，带有简单的用户名密码表单验证功能。

代码展示：

[code]<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HTML5美观简洁大气响应式带第三方登录网页模板</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
'''
在学习过程中有什么不懂得可以加我的WEB前端学习交流扣扣qun，133868702，群文件还有零基础入门的学习资料
'''

<body>

<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form action="http://www.sucaihuo.com" class="login100-form validate-form">
<span class="login100-form-title p-b-49">登录</span>

<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
<span class="label-input100">用户名</span>
<input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
<span class="focus-input100" data-symbol="&#xf206;"></span>
</div>

<div class="wrap-input100 validate-input" data-validate="请输入密码">
<span class="label-input100">密码</span>
<input class="input100" type="password" name="pass" placeholder="请输入密码">
<span class="focus-input100" data-symbol="&#xf190;"></span>
</div>

<div class="text-right p-t-8 p-b-31">
<a href="javascript:">忘记密码？</a>
</div>

<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">登 录</button>
</div>
</div>

<div class="txt1 text-center p-t-54 p-b-20">
<span>第三方登录</span>
</div>

<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-wechat"></i>
</a>

<a href="#" class="login100-social-item bg2">
<i class="fa fa-qq"></i>
</a>

<a href="#" class="login100-social-item bg3">
<i class="fa fa-weibo"></i>
</a>
</div>

<div class="flex-col-c p-t-25">
<a href="javascript:" class="txt2">立即注册</a>
</div>
</form>
</div>
</div>
</div>

<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
</body>

</html>

[代码运行效果截图]

 

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航