登录页面、注册页面、HTML的3D转换

最新推荐文章于 2021-06-24 10:14:31 发布

竹溪点点

最新推荐文章于 2021-06-24 10:14:31 发布

阅读量634

点赞数 3

本文链接：https://blog.csdn.net/m0_45309627/article/details/117753052

版权

本文详细介绍了如何使用HTML设计登录和注册页面，包括邮箱和密码的正则验证。接着深入探讨了HTML的3D转换，讲解了3D位移、透视、3D旋转以及3D呈现，提供了丰富的示例代码，帮助读者理解和应用这些概念。

摘要由CSDN通过智能技术生成

一、HTML登录页面设计

要求：

1、使用正则表达式验证邮箱

2、密码长度至少为6位且为字母与数字的组合

代码：

<!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>登录页面</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        #container{
        width:500px;
        height:500px;
        border:0px;
        text-align:center; 
        background-color:#f4faf5bb;
        position:absolute;
        left:450px;
        top:50px;
        border-radius:90%;
        /* 动画名字*/
        animation-name:turn;
         /* 动画持续时间 */
         animation-duration:3s;
        /* 动画延迟时间 */
        animation-delay:0.5s;
     }
     h2{
        color:rgba(0, 0, 0, 0.753);
        margin-top:70px;
     }
     p{
        text-align:center;
        margin-top:12px;
        margin-bottom:5px;
        font-size:12pt; 
        color:#0000006c;
     }
     .input1{
         width:250px;
         height:30px;
         border:none;
         outline:none;
         border-bottom: 1px solid #000;
         background-color:#f4faf52f;
         text-align:center;
         margin-bottom:5px;
     }
     .btn{
        width:100px;
        height:30px;
        background-color:#d84d16b6;
        text-align:center;
        color:white;
        border-radius:200px;
        border:none;
        outline:none;
        margin-top:15px;
     }
     a{
        font-size:10pt; 
     }
    a:link{color:rgba(11, 11, 12, 0.822)}     /*未被访问的链接 */
    a:visited{color:#b35cb3} /*已被访问的链接 */
    a:hover{color:#4169E1}   /*鼠标悬浮在上的链接 */
    a:active{color:rgb(197, 134, 82)}  /*鼠标点击激活链接 */ 

    @keyframes turn{
        0%{
        transform:rotateY(0deg);
            } 
        100%{
        transform:rotateY(360deg);
            } 
     }
    </style>
</head>
<body background="1.jpeg" style="background-repeat: no-repeat;margin-left: 10px;">
    <div id="container">
        <h2>立即登录<h2>
        <p>邮箱</p>
        <input class="input1" type="text" id="email">
        <p>密码</p>
        <input class="input1" type="password" id="pass" placeholder="密码长度至少为6位"><br>
        <a href="#">忘记密码？</a><br>
        <button class="btn" id="login" value="登录" onclick="login()">登录</button>
        <button class="btn" id="regist" value="注册" onclick="regist()">注册</button>

        <script>
            function login(){
             //验证邮箱
            var em=document.getElementById("email");
            var email=em.value;
            var regExp = new RegExp(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/);
            if(!regExp.test(email)){
                alert("邮箱格式不正确");
                return false;
                }
            //验证密码
            var pass

最低0.47元/天解锁文章

竹溪点点

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
登录页面、注册页面、HTML的3D转换

一、HTML登录页面设计（使用正则表达式验证邮箱和密码）代码：<!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" conte.
复制链接

扫一扫