炫酷的登陆注册页面【Html+CSS+Js】网页界面【开源】

1.界面演示

image-20240623235402700

image-20240623235414484

2.部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
</head>

<body>
    <div id='app' class="container">
        <img src="./bg.jpg" />
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span :class='{"active": active === "login"}' @click='go("login")'>登陆</span>
                    <span>/</span>
                    <span :class='{"active": active === "register"}' @click='go("register")'>注册</span>
                </div>
                <div class='form' id="fromLogin">
                    <template v-if='active === "register"'>
                        <div class="input"><input :class='{ hasValue: registerForm.email }' v-model='registerForm.email' type="text" name="email" id='email' /><label for="email">邮箱</label></div>
                        <div class="input"><input :class='{ hasValue: registerForm.Username }' v-model='registerForm.Username' type="text" name="Username" id="username" /><label for="username">用户名</label></div>
                        <div class="input"><input :class='{ hasValue: registerForm.Password }' v-model='registerForm.Password' type="password" name="Password" id="Password" /><label for="Password">密码</label></div>
                        <div class="input"><input :class='{ hasValue: registerForm.repeat }' v-model='registerForm.repeat' type="password" name="repeat" id="Passwordrepeat" /><label for="Passwordrepeat">重复密码</label></div>
                    </template>

                    <template v-if='active === "login"'>
                        <div class="input"><input :class='{ hasValue: loginForm.Username }' v-model='loginForm.Username' type="text" name="Username" id="username" /><label for="username">用户名</label></div>
                        <div class="input"><input :class='{ hasValue: loginForm.Password }' v-model='loginForm.Password' type="password" name="Password" id="Password" /><label for="Password">密码</label></div>
                    </template>

                    <span>忘记?</span>

                    <button type="submit" @click='submit'>登陆</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
var vue = new Vue({
    el: '#app',
    data: {
        active: 'login',
        registerForm: { email: '', Username: '', Password: '', repeat: '', },
        loginForm: { Username: '', Password: '', },
    },
    methods: {
        go (type) {
            this.active = type
        },
        submit() {
            if (type === 'login') {
                console.log('login', this.loginForm)
            } 

            if (type === 'register') {
                console.log('register', this.registerForm)
            }
        }
    },
    beforeMount () {}
})
</script>

</html>

3.获取代码

lovely-login-master https://www.alipan.com/s/uv766Sgxa6J 点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画倍速播放。

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML5、CSSJS这三种前端技术,可以帮助我们创建唯美的登录界面。首先,我们可以使用HTML5来构建页面的基础结构。在登录界面中,我们可以使用HTML5的各种表单元素,如文本框、下拉框和按钮等,来收集用户的登录信息。同时,我们还可以使用HTML5的Canvas元素来添加一些炫酷的背景效果,使登录界面更加生动和吸引人。 而CSS则可以用来美化页面的外观。我们可以使用各种CSS样式规则来设置页面的布局、背景颜色、字体样式、按钮样式等。通过灵活运用CSS的选择器和样式属性,我们可以设计出具有唯美感的登录界面。例如,我们可以使用渐变背景色来增加页面的层次感,使用阴影效果来让登录框看起来更加立体,使用过渡效果来增加交互的动感等。 此外,使用JavaScript编写的交互脚本可以为登录界面增添更多的特效和用户友好度。我们可以使用JS来验证用户输入的内容是否符合规定,以及实现一些动态效果,如实时显示密码强度、自动完成输入、异步验证用户名等。通过运用JS的框架和库,如jQuery或Vue.js,我们还可以方便地实现复杂的交互功能,如弹出式提示框、拖拽元素等,使登录界面更加唯美且用户友好。 综上所述,通过合理的运用HTML5、CSSJS这三种前端技术,我们可以创建出一个唯美的登录界面,吸引用户的眼球,提升用户体验。 ### 回答2: HTML5、CSSJS可以用来创建唯美的登录界面。首先,我们可以使用HTML5的表单元素来创建一个简洁而美观的登录表单。例如,可以使用<input>标签来创建文本输入框和密码输入框,使用<button>标签来创建登录按钮。通过使用CSS,我们可以为表单元素添加样式,如设置背景颜色、边框样式和文本样式,以提高界面的美观度。此外,我们还可以使用CSS中的伪类和动画效果,如:hover伪类或transition属性,来提供交互性和视觉效果。 使用JS可以增加登录界面的互动性和用户体验。例如,我们可以使用JS监听用户输入的数据,并实时验证输入的格式是否正确。此外,通过使用JS,我们还可以实现登录表单的动态效果,如结合CSS动画来创建平滑的过渡效果。另外,我们还可以使用JS添加更高级的功能,如使用AJAX进行异步提交,实现无刷新登录。 总的来说,HTML5、CSSJS可以协同工作,创建一个唯美的登录界面HTML5提供了创建表单的标准元素,CSS可以为表单添加样式,并通过伪类和动画效果增加交互性,JS可以实现前端验证和动态效果,提高用户体验。通过合理运用这些技术,可以打造出一个既美观又功能丰富的登录界面。 ### 回答3: HTML5、CSSJavaScript三者结合可以实现许多唯美的登录界面。首先,使用HTML5来创建登录界面的基本结构,包括表单、输入框、按钮等元素。使用CSS来为这些元素添加样式,如背景颜色、边框样式、字体等,可以选择柔和的色调和精致的字体来营造唯美感。接下来,使用JavaScript来为登录界面增加交互功能,如实时检验用户输入的格式是否正确、验证用户名和密码的正确性等。同时,可以使用一些特效和动画效果,如淡入淡出效果、平滑滚动效果、背景渐变效果等,来提升界面的唯美感。此外,可以通过添加背景图片或使用渐变色等方式来增加界面的美感。总之,HTML5、CSSJavaScript的强大组合能够实现各种唯美的登录界面,只需要充分发挥创意和审美,灵活运用技术便能打造出独一无二的登录界面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值