网页模板——简洁的登录页面源码

已于 2024-07-15 14:29:48 修改
阅读量141 收藏 4
点赞数 8
文章标签： web
于 2024-07-15 14:28:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41935046/article/details/140438000
版权

HTML模板

使用模板可以更快、更容易地创建页面，以下实现一个简洁的登录页面（html/css），项目上改改样式即可快速实现页面功能。页面效果（jsoft.vip/d/10927 扁平简洁的登录页面）：

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>简洁的登录页面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-form-title" style="background-image: url(images/bg-01.jpg);">
                    <span class="login100-form-title-1">登 录</span>
                </div>

                <form class="login100-form validate-form">
                    <div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
                        <span class="label-input100">用户名</span>
                        <input class="input100" type="text" name="username" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
                        <span class="label-input100">密码</span>
                        <input class="input100" type="password" name="pass" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>

                    <div class="flex-sb-m w-full p-b-30">
                        <div class="contact100-form-checkbox">
                            <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                            <label class="label-checkbox100" for="ckb1">记住我</label>
                        </div>

                        <div>
                            <a href="javascript:" class="txt1">忘记密码？</a>
                        </div>
                    </div>

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

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

CSS代码

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
    color: #57b846;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul,
li {
    margin: 0px;
    list-style-type: none;
}

input {
    outline: none;
    border: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
    -webkit-appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

textarea {
    outline: none;
    border: none;
}

textarea:focus,
input:focus {
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-moz-placeholder {
    color: transparent;
}

textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input::-webkit-input-placeholder {
    color: #999999;
}

input:-moz-placeholder {
    color: #999999;
}

input::-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder {
    color: #999999;
}

textarea::-webkit-input-placeholder {
    color: #999999;
}

textarea:-moz-placeholder {
    color: #999999;
}

textarea::-moz-placeholder {
    color: #999999;
}

textarea:-ms-input-placeholder {
    color: #999999;
}

label {
    display: block;
    margin: 0;
}

button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}

.txt1 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.4;
    color: #999999;
}

.limiter {
    width: 100%;
    margin: 0 auto;
}

.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #ebeeef;
}

.wrap-login100 {
    width: 670px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.login100-form-title {
    width: 100%;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    padding: 70px 15px 74px 15px;
}

.login100-form-title-1 {
    font-family: Poppins-Bold;
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
}

.login100-form-title::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(54, 84, 99, 0.7);
}

.login100-form {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 43px 88px 93px 190px;
}

.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #b2b2b2;
}

.label-input100 {
    font-family: Poppins-Regular;
    font-size: 15px;
    color: #808080;
    line-height: 1.2;
    text-align: right;

    position: absolute;
    top: 14px;
    left: -105px;
    width: 80px;
}

.input100 {
    font-family: Poppins-Regular;
    font-size: 15px;
    color: #555555;
    line-height: 1.2;

    display: block;
    width: 100%;
    background: transparent;
    padding: 0 5px;
}

.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.focus-input100::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;

    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;

    background: #57b846;
}

input.input100 {
    height: 45px;
}


.input100:focus+.focus-input100::before {
    width: 100%;
}

.has-val.input100+.focus-input100::before {
    width: 100%;
}

.input-checkbox100 {
    display: none;
}

.label-checkbox100 {
    font-family: Poppins-Regular;
    font-size: 13px;
    color: #999999;
    line-height: 1.4;

    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
}

.label-checkbox100::before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    color: transparent;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #e6e6e6;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.input-checkbox100:checked+.label-checkbox100::before {
    color: #57b846;
}

.container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 160px;
    height: 50px;
    background-color: #57b846;
    border-radius: 25px;

    font-family: Poppins-Regular;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.login100-form-btn:hover {
    background-color: #333333;
}

@media (max-width: 576px) {
    .login100-form {
        padding: 43px 15px 57px 117px;
    }
}

@media (max-width: 480px) {
    .login100-form {
        padding: 43px 15px 57px 15px;
    }

    .label-input100 {
        text-align: left;
        position: unset;
        top: unset;
        left: unset;
        width: 100%;
        padding: 0 5px;
    }
}

.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 2px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 2px;
    pointer-events: none;

    font-family: Poppins-Medium;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}

JS脚本代码

(function ($) {
    "use strict";

    $('.input100').each(function () {
        $(this).on('blur', function () {
            if ($(this).val().trim() != "") {
                $(this).addClass('has-val');
            } else {
                $(this).removeClass('has-val');
            }
        })
    })

    var input = $('.validate-input .input100');

    $('.validate-form').on('submit', function () {
        var check = true;

        for (var i = 0; i < input.length; i++) {
            if (validate(input[i]) == false) {
                showValidate(input[i]);
                check = false;
            }
        }

        return check;
    });


    $('.validate-form .input100').each(function () {
        $(this).focus(function () {
            hideValidate(this);
        });
    });

    function validate(input) {
        if ($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if ($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        } else {
            if ($(input).val().trim() == '') {
                return false;
            }
        }
    }

    function showValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).addClass('alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).removeClass('alert-validate');
    }


})(jQuery);

页面预览 jsoft.vip/d/10927 （24012901扁平简洁的登录页面）

网页模板——简洁的登录页面源码登录网页模板 简洁的登录页面源码icon-default.png?t=N7T8https://blog.oxings.com/article/125

真空零点能
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大学生简单静态HTML网页模板源码——家乡介绍美丽乡村11页
qq_38515370的博客
04-07 916
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
网站发展历程记录——简洁单页HTML源码丨网站时光轴
小九网创的博客
12-22 514
网站发展史记录html单页源码。
css布局大全——简洁的餐饮网站(8个页面) 学生美食网页设计作品静态HTML网页模板源码
而风不止
12-20 1043
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板
HTML5期末大作业：礼品网站设计——简洁创意礼物网页模板(4页) HTML+CSS+JavaScript 学生HTML个人网页作业 大学生个人网站作业模板...
qq_365392777
10-15 800
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？ 2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明...
H5网站模板——前台和后台
热门推荐
tai21的博客
08-27 1万+
以下是比较典型的前台或者后台的H5模板： html5优分期大学生分期购物商城模板 链接：http://pan.baidu.com/s/1dEUAzBz 密码：j150 红色的五金电气商城网站模板 链接：http://pan.baidu.com/s/1bpgjMG3 密码：e0jq 通用的生活购物类商城静态模板 链接：http://pan.baidu.com/s/1kUSwv
网页模板——jQuery facebook表情符号插件特效源码.zip
11-22
网页模板中的jQuery Facebook表情符号插件特效源码是一个用于在网页上实现类似Facebook的动态表情符号功能的代码库。这个插件允许用户在输入框中插入和显示丰富的表情符号，增强交互性和情感表达，尤其适用于社交...
网页模板——jQuery实现的页面滚动显示进度特效源码.zip
11-23
网页模板中的jQuery实现的页面滚动显示进度特效是一种常见的交互设计元素，它能够为用户提供视觉反馈，展示当前浏览页面的位置在整体文档中的比例。这个特效通常表现为一条横条或竖条，随着用户滚动页面，该条形图会...
网页模板——vue.js图标列表分页实例特效源码.zip
11-23
这个"网页模板——vue.js图标列表分页实例特效源码.zip"压缩包包含了一个基于Vue.js的网页模板，该模板展示了一个具有图标列表和分页功能的交互式实例。以下是对这个实例源码中的关键知识点的详细说明： 1. **Vue....
网页模板——vue添加多级树形插件的源码.zip
11-23
"网页模板——vue添加多级树形插件的源码.zip"这个压缩包文件显然包含了一个Vue项目，重点在于如何在Vue应用中实现多级树形结构。下面我们将详细探讨Vue.js中实现多级树形插件的关键知识点。 首先，我们需要理解Vue...
网页模板——jQuery实现的抽奖游戏机功能源码.zip
11-23
网页模板中的jQuery抽奖游戏机功能源码是一种常见的互动设计元素，常见于网站活动或促销页面，用于吸引用户参与并增加用户粘性。该压缩包文件包含的资源可能是一个完整的HTML、CSS和JavaScript项目，用于展示如何...
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
07-18
摩根：2024年大市前瞻
计算机控制专业技术专题实习任务书温度控制.doc
07-18
计算机
计算机控制系统.doc
07-18
计算机
计算机模拟考试.doc
07-18
计算机
WHO联合国健康老龄化十年进展报告2021-2023年英文版88页.pdf
07-18
医疗行业研究报告
2023年度全球新药研发进展报告-药智数据.pdf
07-18
2023年度全球新药研发进展报告-药智数据
2023-04-06-项目笔记 - 第一百九十八阶段 - 4.4.2.196全局变量的作用域-196 -2024.07.18
最新发布
07-18
2023-04-06-项目笔记-第一百九十八阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.196局变量的作用域_196- 2024-07-18
h5登录界面模板带源码
05-09
H5登录界面是网页应用的一部分，模板通常展示应用的名称和登录表单。这种表单用于输入用户名和密码等信息，使用户可以登录系统进行特定任务。如果没有这个模板，程序员需要编写大量的HTML，CSS和JavaScript代码，并可能需要处理一个具有复杂功能的系统，如身份验证，安全等级，密码重置等。 通过使用H5登录界面模板，程序员可以轻松地创建一个整洁的登录页面，加快开发速度。该模板提供了一些基本的HTML，CSS和JavaScript，可以快速设置标准的用户名和密码登录表单。由于这些代码很少有人从头开始编写，使用网站连接已存在的社交媒体账户的选项也可以轻松添加。这将允许用户使用他们已经拥有的账户来登录系统，从而消除了对记忆不同用户名和密码的苦恼。 此外，这些H5登录界面模板还可以通过更改样式，背景图像，颜色等特性来定制化。模板本身需要进行调整才能满足网站的要求，因此模板的源代码十分重要。源代码允许程序员查看模板的具体实现，并根据需要进行修改。通过在模板基础上进行编辑从而获得最佳用户体验，和商业化相关的内容。 总之，H5登录界面模板带源代码是网站开发的重要元素，可以轻松创建整洁的登录页面，提高工作效率，还可以根据需要进行定制化。正因如此，它在现代Web开发中占据至关重要的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值