优雅淡紫色HTML5+CSS3实现的浮动登陆和注册界面网页模板

作者 : IT 大叔 本文共6500个字,预计阅读时间需要17分钟 发布时间: 2020-07-7

这是一个非常精美的网页前端和后端登陆的CSS3页面模板,适用于各种艺术,文艺,文学类网站,直接贴出源代码,大家可以随意编辑。

网页最终实现的效果如下图所示:

优雅淡紫色HTML5+CSS3实现的浮动登陆和注册界面网页模板插图

优雅淡紫色HTML5+CSS3实现的浮动登陆和注册界面网页模板插图(2)

素材包:背景图片

优雅淡紫色HTML5+CSS3实现的浮动登陆和注册界面网页模板插图(4)

源代码如下,直接复制可用

登陆页面模板:

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>登陆</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }a
         
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
         
        #name_trip {
            margin-left: 50px;
            color: red;
        }
         
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
         
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
           background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
         
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="file:///D:/web%E8%84%9A%E6%9C%AC/WEB/login.html" id="form">
            <h1 style="text-align: center;color: aliceblue;">登陆</h1>
            <p>用户名:<input id="userNname" type="text"><label id="name_trip"></label></p>
 
            <p>密码:  <input id="password" type="password"><label id="password_trip"></label></p>
 
            <div style="text-align: center;margin-top: 30px;">
                <input type="submit" class="button" onclick="window.open("meinv.jpg")" value="登陆">
                <input type="reset" class="button" value="重置">
            </div>
        </form>
    </div>
 

</body></html>

注册页面模板:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="register/html; charset=gb2312">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 650px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
        
        #name_trip {
            margin-left: 50px;
            color: red;
        }
        
        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }
        
        .sexDiv>input,
        .hobby>input {
            width: 30px;
            height: 17px;
        }
        
        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
        
        .introduce {
            margin-left: 110px;
        }
        
        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }
        
        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
</head>

<body>
    <div id="loginDiv">
        <form action="">
            <h1>注册</h1>
            <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>

            <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>

            <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>
<!--
            <p>
                用户类型:
                <select name="type" id="userType">
                    <option value="0">请选择</option>
                    <option value="1">普通类型</option>
                    <option value="2">VIP类型</option>
                </select>
                <label id="type_trip"></label>
            </p>

            <div class="sexDiv">
                用户性别:
                <input class="userSex" name="sex" value="boy" type="radio">男
                <input class="userSex" name="sex" value="girl" type="radio">女
                <label id="sex_trip"></label>
            </div>

            <p>
                出生日期:
                <input id="birthday" type="date">
                <label id="birthday_trip"></label>
            </p>

            <p class="hobby">
                兴趣爱好:
                <input type="checkbox" name="hobby" value="read">阅读
                <input type="checkbox" name="hobby" value="music">音乐
                <input type="checkbox" name="hobby" value="sport">运动
                <label id="hobby_trip"></label>
            </p>

            <p>
                电子邮件:
                <input id="email" type="email" required>
                <label id="emil_trip"></label>
            </p>


            <p> 自我介绍:</p>
            <div class="introduce">
                <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
                <label id="introduce_trip"></label>
            </div>
-->
            <p style="text-align: center;">
                <input type="submit" class="button" onblur="checkForm()" onclick='window.open("login.html")'value="提交">
                <input type="reset" class="button" value="重置">
            </p>
        </form>
    </div>

</body>
<script type="text/javascript">
    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }

    function checkSex() {
        var sexNum = document.getElementsByName("sex");
        var sex = "";
        for (let i = 0; i < sexNum.length; ++i) {
            if (sexNum[i].checked) {
                sex = sexNum[i];
             }

         }
         if (sex == "") {
             trip("sex_trip", "ERROR!!");
             return false;
         } else {
             trip("sex_trip", "OK!!");
         }
    }

    function checkHobby() {
        var hobbyNum = document.getElementsByName("hobby");
        var hobby = "";
        for (let i = 0; i < hobbyNum.length; ++i) {
            if (hobbyNum[i].checked) {
                hobby = hobbyNum[i];
            }
        }
        if (hobby == "") {
            trip("hobby_trip", "ERROR!!");
            return false;
        } else {
            trip("hobby_trip", "OK!!");

        }
    }

    function checkSelect() {
        var myselect = document.getElementById("userType");
        var index = myselect.selectedIndex;
        var checkValue = myselect.options[index].value;
        if (checkValue == 0) {
            trip("type_trip", "请选择!!");
            return false;
        } else {
            trip("type_trip", "OK!!");
        }
    }

    function checkForm() {
        checkSelect();
        checkHobby();
        checkSex();

        var trip = document.getElementsByName("em");
        var tripV = trip.innerHTML();
        //获取用户名输入项
        var userNname = document.getElementById("userNname");
        var uName = userNname.value;
        if (uName.length < 1 || uName.length > 10) {
            trip("name_trip", "账号长度为1-10位!!");
            return false;
        } else {
            trip("name_trip", "OK!!");

        }

        //密码长度大于6 和确认必须一致 
        var password = document.getElementById("password");
        var userPass = password.value;
        if (userPass.length < 6) {
            trip("password_trip", "密码要>6位!!");
            return false;
        } else {
            trip("password_trip", "OK!!");
        }

        //获取确认密码框的值 var
        var surePassword = document.getElementById("surePassword");
        var surePass = surePassword.value;
        if (userPass != surePass) {
            trip("surePassword_trip", "两次密码不一致!!");
            return false;
        }

        //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        var inputEmail = document.getElementById("email");
        var uEmail = inputEmail.value;
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
            trip("emil_trip", "邮箱不合法!!");
            return false;
        } else {
            trip("emil_trip", "OK!!");
        }

        // 校验自我介绍
        var introduceText = document.getElementById("introduceText");
        var introduce = introduceText.value;
        if (introduce.length < 3 || uName.length > 60) {
            trip("introduce_trip", "长度为3-50字!!");
            return false;
        } else {
            trip("introduce_trip", "OK!!");
        }

        return true;
    }

    function submitT() {
        if (checkForm()) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>

 

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 优雅淡紫色HTML5+CSS3实现的浮动登陆和注册界面网页模板

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

1 评论

发表评论