HTML+css+js实现一个完整的登录+注册+首页静态web页面

最新推荐文章于 2024-07-21 09:18:50 发布
最新推荐文章于 2024-07-21 09:18:50 发布
阅读量10w+ 收藏 1k
点赞数 129
文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Demonslzh/article/details/104925097
版权

文章目录

一、统一头部与尾部风格

1、css代码header.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

#header{
    height: 210px;
    background: white;
}

#header .header_top{
    height: 36px;
    background:#f5f5f5;
}

#header .header_top_center{
    width: 1200px;
    height: 36px;
    margin: 0 auto;
    line-height: 36px;
}
#header .header_top_center .h_top_left{
    color: gray;
    font-size: 13px;
    float: left;
    height: 36px;
}
#header .header_top_center .h_top_right{
    color: gray;
    font-size: 13px;
    float: right;
    height: 36px;
}
#header .header_top_center.h_top_right a{
    color: #6c6c6c;
    margin: 0 5px;
    font-size: 13px;
}

#header .header_center{
    height: 124px;
    width: 1200px;
    margin: 0 auto;
}

#header .header_center .h_c_logo{
    width: 190px;
    height: 124px;
    float: left;
}

#header .header_center .h_c_search{
    width: 815px;
    height: 124px;
    float: left;
}

#header .header_center .h_c_code{
    width: 190px;
    height: 124px;
    float: left;
}

#header .h_c_logo img{
    width: 200px;
    height:120px;
    margin-top:4px ;
}

#header .h_c_search form{
    width: 650px;
    height: 40px;
    margin-top: 40px;
    margin-left: 50px;
}
#header .h_c_search form .t_input{
    width: 555px;
    height: 40px;
    border: 2px solid black;
    padding-left: 10px;
}

#header .h_c_search form .t_button{
    width: 75px;
    height: 40px;
    border: 1px solid gray;
    float: right;
    color: orange;
    margin-left: 5px;


}
#header .h_c_search .hot{
    margin-left: 80px;
    margin-top: 5px;
}
#header .h_c_search .hot a{
    color: #6c6c6c;
    font-size: 15px;
}

#header .h_c_search .hot a:hover{
    color: orangered;
}

#header .h_c_code img{
    margin-top: 10px;
    margin-left: 20px;
    width: 140px;
    height: 110px;
}
#header .nav{
    width: 1200px;
    height: 44px;
    margin: 0 auto;
    background: darkslategrey;
    line-height: 44px;
    border-radius:8px 8px 8px 8px ;
}
#header .nav ul{
    list-style: none;
    width: 1200px;
    height: 44px;
    display: flex;
}
#header .nav ul li{
    flex: 1;
    text-align: center;
}

#header .nav ul li a{
    color: white;
    font-size: 16px;
    font-weight: bold;
}
#header .nav ul li a:hover{
    font-size: 25px;
}

2、尾部样式footer.css

#footer{
    text-align: center;
    height: 300px;
    padding-top: 30px;
}
#footer .copyright{
    margin-top: 20px;
}

二、登录界面

在这里插入图片描述

1、HTML代码login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" href="images/camera.ico">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!--头部-->
<div id="header">
    <!--头部中间信息-->
    <div class="h_center">
        <img src="images/logo.png" alt="">
        <p>欢迎来到未命名图库：请先登录！</p>
    </div>
</div>


<!--中部-->
<div id="login_body">
    <div class="login_b_center">
        <div class="login_bg">
            <h1>密码登录</h1>
            <form action="#" id="login">
<!--                //用户名-->
                <div class="userName">
                    <span></span><input type="text">
                </div>
<!--                //密码-->
                <div class="password">
                    <span></span><input type="password">
                </div>
<!--                //登录按钮-->
                <div class="login_btn">
                    <a href="index.html">
                         <input type="button" value="登录">
                    </a>
                </div>
                <div class="forgot_password">
                    <a href="">忘记密码</a>
                    <a href="regist.html">注册账号</a>
                    <a href="1.0/index.html">帮助</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!--尾部-->
<div id="footer">
    <div class="link">
        <a href="">关于我们</a>
        |
        <a href="">联系我们</a>
        |
        <a href="">商家入驻</a>
        |
        <a href="">友情链接</a>
        |
    </div>
    <div class="copyright">
        Copyright © 1999 - 2020 LZH. All Rights Reserved.
    </div>
</div>
</body>
</html>

2、css代码login.css


*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
#header{
    height: 88px;
    border: 1px solid;
}

#header .h_center{
    width: 1200px;
    height: 88px;

    margin: 0 auto;
}
#header .h_center img{
    float: left;
    height: 80px;
    width: 120px;
    margin-top: 5px;
}
#header .h_center p{
    float: left;
    text-align: center;
    width: 880px;
    font-size: 10px;
    border: 1px solid yellow;
    margin-top: 20px;
    margin-left: 80px;
    color: blue;
    background: pink;
    padding: 3px;
}

#login_body{
    height: 600px;
    background-image: url("../images/night.jpg");
    background-position: center;
    background-size: 1000px 600px;
}
#login_body .login_b_center{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    position: relative;
}
#login_body .login_bg{
    width: 350px;
    height: 351px;
    background: rgba(255,255,255,0.9);
    position: absolute;
    right: -10px;
    top: 80px;
    padding: 30px;

}
#login div{
    height: 40px;
    margin-top: 20px;
}
#login span{
    width: 40px;
    height: 40px;
    display: inline-block;
    background: red;
    float: left;
    border: 1px gray;
}
#login .userName span{
    background-image: url("../images/商城素材/userName_Icon.png");
}
#login .password span{
    background-image: url("../images/商城素材/password_Icon.png");
}

#login input{
    width: 250px;
    height: 40px;
    float: left;
}
#login .login_btn input{
    background-color: coral;
    width: 300px;
    border: none;
    color: whitesmoke;
    float: left;

}
#login .login_btn a:hover{
    color: blue;
    float: left;

}
#login .forgot_password{
    text-align: right;
    margin-top: 20px;
}
a{
    text-decoration:none;
}

三、注册界面

在这里插入图片描述

1、HTML代码regist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="css/regist.css">
    <link rel="shortcut icon" href="images/camera.ico">
</head>
<body>
<!--头部-->
<div id="reg_header">
    <div class="reg_h_center">
        <div class="reg_h_left">
            <img src="images/logo.png" alt="">
            <h3>欢迎注册</h3>
        </div>
    </div>
</div>


<!--表单内容-->
<div class="reg_back">
    <div class="reg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="reg_center">
        <div class="reg_form">
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" placeholder="请输入用户名"
                                                    id="username"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" placeholder="请输入密码"
                                                    id="password"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="Email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="rename">姓名</label></td>
                        <td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="Telphone">手机号</label></td>
                        <td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"
                                                    id="Telphone"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right"><input type="radio" name="gender" value="male" checked> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="Birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="Birthday"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode">
                            <img src="images/商城素材/check_code.png" id="img_check"></td>
                        <!-- 10.png为验证码图片 -->
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="reg_right">
        <p>已有账号?<a href="login.html">立即登录</a></p>
    </div>
</div>
</body>
</html>

2、css代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#reg_header{
    height: 110px;
    width: 100%;
    box-shadow: 0px 0px 10px orange;
}

#reg_header .reg_h_center{
    width: 1200px;
    height: 110px;
    margin: 0 auto;
    display: flex;
}
#reg_header .reg_h_left{
     height: 110px;
     flex: 1;
 }

#reg_header .reg_h_left img{
    height: 100px;
    width: 120px;
    float: left;
}
#reg_header .reg_h_left h3{
    float: left;
    margin-top: 80px;
    margin-left: 10px;
}
#reg_header .reg_h_right{
    height: 110px;
    flex: 1;
    padding-top: 50px;
    padding-left: 30px;
}


.reg_back {
    /*设置整体的尺寸、背景色、边距等*/
    width: 850px;
    height: 400px;
    border: 8px solid #eeeeee;
    background: white;
    margin: auto;
    margin-top: 20px;
}

.reg_left {
    /*设置左浮动和外边距*/
    float: left;
    margin: 10px;
}

.reg_left > p:first-child {
    /*设置段落（新用户注册）颜色和字体大小*/
    color: gray;
    font-size: 20px;
}

.reg_left > p:last-child {
    /*设置段落（USER REGISTER）颜色和字体大小*/
    color: #A6A6A6;
    font-size: 20px;
}

.reg_center {
    /*设置中间的各种输入框等*/
    float: left;
    width: 450px;
}

.reg_right {
    /*设置右边段落浮动和外间距*/
    float: right;
    margin: 30px;
}

.reg_right > p:first-child {
    font-size: 15px;
}

.reg_right p a {
    /*设置超链接（立即登录）颜色*/
    color: crimson;
}

.td_left {
    /*设置表单中字体对齐方式和宽度、高度*/
    width: 100px;
    text-align: right;
    height: 40px;
}

.td_right {
    /*设置输入框内边距*/
    padding-left: 40px;
}

#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode{
    /*设置输入框大小和边框*/
    width: 200px;
    height: 30px;
    border: 1px solid #A4A4A4;
    /* 设置边框为圆角 */
    border-radius: 8px;
    padding-left: 10px;
}
#checkcode{
    /*验证码宽度*/
    width: 100px;
}
#img_check{
    /*验证码图片*/
    vertical-align: middle;
    height: 30px;
    width: 95px;
}
#btn_sub{
    /*注册按钮*/
    margin-left: 50px;
    background: orangered;
    color: whitesmoke;
    width: 150px;
    height: 40px;
    border: 1px solid gray ;
}

四、首页

在这里插入图片描述
在这里插入图片描述

1、html代码index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未命名图库-首页</title>
<!--    设置标签图标-->
    <link rel="shortcut icon" href="images/camera.ico">
    <link rel="stylesheet" href="css/index1.1.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/goods_list.css">
    <link rel="stylesheet" href="css/next_page.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/photo.js"></script>
    <script>
        $(document).ready(function function_name() {
            changeImg()
        })
    </script>
</head>
<body>

<!--头部-->
<div id="header">
    <!--顶部 登录-->
    <div class="header_top">
        <!-- 中部 -->
        <div class="header_top_center">
            <!-- 中部左侧 -->
            <div class="h_top_left">
                欢迎来到未命名图库
            </div>
            <!-- 中部右侧-->
            <div class="h_top_right">
                <a href="login.html">登录</a>
                <a href="regist.html">免费注册</a>
                <a href="#">购物车</a>
                <a href="#">我的订单</a>
            </div>


        </div>
    </div>
    <!-- 中部搜索-->
    <div class="header_center">
<!--        中部左边logo-->
        <div class="h_c_logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="h_c_search">
            <form action="#">
                <input type="text" placeholder="请输入..." class="t_input">
                <input type="submit" class="t_button" value="搜索">
            </form>

            <div class="hot">
                <a href="#">山川</a>
                <a href="#">沙漠</a>
                <a href="#">星空</a>
                <a href="#">静物</a>
            </div>

        </div>
<!--        中部右边二维码-->
        <div class="h_c_code">
            <img src="images/code.jpg" alt="">
        </div>
    </div>
    <!--底部导航        -->
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">最新图片</a></li>
            <li><a href="#">最热图片</a></li>
            <li><a href="#">山川湖海</a></li>
            <li><a href="#">大漠孤烟</a></li>
            <li><a href="#">人像精选</a></li>
        </ul>
    </div>
</div>
<!--banner-->
<div id="ad" style="text-align: center;">
    <ul id="ad_img" >
        <li><img src="images/banner/1.jpg" width="1100" height="600" /></li>
        <li><img src="images/banner/2.jpg" width="1100" height="600" /></li>
        <li><img src="images/banner/3.jpg" width="1100" height="600" /></li>
        <li><img src="images/banner/4.jpg" width="1100" height="600" /></li>
        <li><img src="images/banner/5.jpg" width="1100" height="600" /></li>
    </ul>

    <ul id="ad_num">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <!--<li>6</li>-->
    </ul>
</div>


<!--精选图片-->
<div id="ms">
    <div class="ms_top">
        <span>精选图片</span>
        <span>总有一副让你怦然心动</span>
    </div>
    <div class="ms_body">
        <div class="ms_body_left">
            <ul>

                <li>
                    <a href="">
                        <img src="images/gallery/01.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/02.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/03.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/04.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="images/gallery/05.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="ms_body_center">
            <ul>
                <li>
                    <a href="">
                        <img src="images/gallery/06.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>

                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/07.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/08.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/09.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/10.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="ms_body_right">
            <ul>
                <li>
                    <a href="">
                        <img src="images/gallery/11.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>



                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/12.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/13.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/14.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/gallery/15.jpg" alt="">
                        <p class="name">一个好听的名字</p>
                        <div class="photoby">
                            <img src="images/camera.jpg " width="10" height="10" alt=""/>
                            <p>lzh</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

</div>

<!--翻页按钮-->
<div class="page-icon">
    <span class="page-disabled"><i></i>上一页</span>
    <span class="page-current">1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    ……
    <a href="#">...</a>
    <a href="#">10</a>
    <a class="page-next" href="#">下一页<i></i></a>
</div>
<!--尾部-->
<div id="footer">
    <div class="link">
        <a href="">关于我们</a>
        |
        <a href="">联系我们</a>
        |
        <a href="">商家入驻</a>
        |
        <a href="">友情链接</a>
        |
    </div>
    <div class="copyright">
        Copyright © 1999 - 2020 LZH. All Rights Reserved.
    </div>
</div>
</body>
</html>

2、css代码index1.1.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #f5f5f5;
}
a{
    text-decoration:none ;
}
/*Banner*/
#ad{
    width:1060px;
    height:600px;
    position:relative;
    margin: 0 auto;
}
/*取消小圆点*/
#ad li{
    list-style:none;
}
#ad_img li{
    display:none;
}
/*角落显示数字的ul*/
#ad_num{
    overflow:hidden;
    position:absolute;
    bottom:100px;
    right:10px;
    color:#FFF;
}
/*数字的浮动*/
#ad_num li{
    border:#FFF solid 1px;
    float:left;
    margin:0px 5px;
    padding:3px 10px;
}
.numsover{
    background-color:#F08080;
    color:#F00;
}
/*精选图片*/
#ms{
    width: 1920px;
    margin: 0 auto;
}
#ms .ms_top{
    width: 500px;
    height: 55px;
    /*-webkit-background-size: 1200px 55px;*/
    background-size: 1200px 55px;
    line-height: 55px;
    margin-left: 2px;
    border-top-right-radius: 20px;
    margin-top: 20px;
    background: gray;
}
#ms .ms_top span{
    color: whitesmoke ;
}
#ms .ms_top span:first-child{
    font-weight: bold;
    margin: 0 10px;
    font-size: 20px;
}
#ms .ms_body{
    width: 1900px;
    display: flex;
    margin: 0 auto;
}
#ms .ms_body li{
    margin: 10px auto;
    margin-left: 20px;
    margin-bottom: 20px;
    border: 1px solid darkgray;
    border-radius: 8px 8px 8px 8px;
}
#ms .ms_body li p.name{
    padding-left: 10px;
    display: block;
    margin-top: 20px;
    font-size: 25px;
    font-weight: bold;
    color: gray;
}
#ms .ms_body li .photoby{
    padding-left: 400px;
    margin-top: 10px;
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: gray;
    margin-bottom: 5px;
}
#ms .ms_body img{
    width: 500px;
    height: 350px;
    cursor: pointer;
    transition: all 0.6s;
}
#ms .ms_body img:hover{
    transform: scale(1.2);
}
#ms .ms_body li .photoby img{
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 10px;
}
/*设置图片左边*/
#ms .ms_body_left ul{
    list-style: none;
    flex: 1;
    padding-left: 10px;
    margin-top: 20px;
}
/*设置图片中间*/
#ms .ms_body_center ul{
    list-style: none;
    flex: 1;
    padding-left: 10px;
    margin-top: 20px;
}
/*设置页面右边*/
#ms .ms_body_right ul{
    list-style: none;
    flex: 1;
    padding-left: 10px;
    margin-top: 20px;
}

3、首页banner代码js实现photo.js

function changeImg() {
    /*获取图片和索引的数组*/
    var $imgs = $("#ad_img li");
    var $nums = $("#ad_num li");

    var isStop = false;
    var index = 0;

    $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
    $imgs.eq(index).show();

    /*鼠标悬停在数字上的事件*/
    $nums.mouseover(function() {
        isStop = true;
        /*先把数字的背景改了*/
        $(this).addClass("numsover").siblings().removeClass("numsover");

        /*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作*/
        index = $nums.index(this);
        $imgs.eq(index).show("slow");
        $imgs.eq(index).siblings().hide("slow");
    }).mouseout(function() {
        isStop = false
    });
    /*设置循环*/
    setInterval(function() {
        if(isStop) return;
        if(index >= 5) index = -1;
        index++;
        $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
        $imgs.eq(index).show("slow").siblings().hide("slow");

    }, 3000);

}

五、源码获取

关注以下公众号回复"0005"即可获取完整项目源码

在这里插入图片描述

Demonslzh6
关注
使用html+css+js实现完整的登录注册页面
qq_43580271的博客
08-14 977
在本教程中，我们创建了一个包含登录和注册功能的基本页面。通过 HTML 定义页面结构，使用 CSS 进行样式设计，并通过 JavaScript 实现页面功能，我们构建了一个功能完备的用户界面。这种基础的设计可以根据需要进一步扩展，例如添加表单验证、与后端 API 集成等。希望这个详细的教程对您有所帮助！如果您有任何问题或建议，请在评论区留言，我们将尽快回复。
注册页面源代码
12-07
在线注册页面 ，可供你们下载，还不错的，希望多多下载。分值不大
网页登陆注册页面
06-23
纯手写，ASP网络高级代码，网络登陆注册页面
html注册页面代码
07-31
html实例，一个简单的注册页面，，，，，，，，，，，，，，，，，，
HTML注册页面代码实现（案例）
qq_43113232的博客
09-11 5万+
注册页面 &amp;lt;!--定义表单 form--&amp;gt; &amp;lt;form action=&quot;#&quot; method=&quot;post&quot;&amp;gt; &amp;lt;table border=&quot;1&quot; align=&quot;center&quot; width=&quot;5
超级简单的HTML登录页面展示+代码+可作为课设毕设jsp，java，前端
最新发布
关注收藏，可以私信解决问题！
07-21 587
通过结合HTML和CSS，我们可以创建一个既简约又具有吸引力的登录页面。这不仅提升了用户体验，也展示了前端开发的基础技能。随着技术的不断进步，我们可以通过不断学习和实践，掌握更多高级的前端技术来丰富我们的网页设计。
HTML+CSS+JS 简单登录注册功能页
umin_的博客
03-02 2172
简单登录注册功能页面
html游戏注册网页代码,HTML5注册页面示例代码
weixin_39627455的博客
05-30 795
复制代码代码如下:register.htmlfunction play(){document.getElementById("menu_item").style.display = "";}function noplay(){document.getElementById("menu_item").style.display = "none";}function passwd(){var pass...
登录注册HTML页面代码
热门推荐
zhaochongsi的博客
01-06 8万+
一、注册 创建register.html文件，录入如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> form { width:100%;
HTML（一）静态登录注册页面附有完整网页（html+css+js）
sdut_you的博客
08-19 2万+
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录测试</title> <link rel="stylesheet" href="index1.css"> </head> <body> <section id="content"> &l
【网页开发】登录注册页面01
XiaoChen~Coder
10-12 2万+
可以进行滑动的登录注册
HTML实现页面注册
qq_42978535的博客
02-01 4万+
网页版，注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <!-- 引入格式文件--> <link rel="stylesheet" href="html&css.css"> </head> <body> <sty
web前端(html+css+js)简单的仿原神官网静态项目
05-29
简单的前端小项目，偶然找到的大一时写的作业 使用了html+css+js 仅实现了部分功能：轮播图，播放音乐，视频，返回首页等 演示视频：https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议： HTML为主要结构,所有内容都是定义在html上的,css则负责对网页的修饰和布局,而JavaScript则是是网页拥有一个动态的效果, 何为动态效果?在我们初学html是,所学的form表单中的submit提交组件则是一种类似的动态效果,而我们的js,则是使静态的网页动起来. 如,当我们点击摸个按钮,想要弹出窗口,或者修改背景图片,或是其他行为,都可以有自己定义这个行为,这就是网页的动态化。
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
Web小米商城首页和登录页面基于HTML+CSS+JS实现
06-08
在本项目中，我们将探讨如何使用HTML5、CSS3和JavaScript技术来仿制小米商城的首页和登录页面。这是一个常见的实战练习，旨在提升开发者对网页开发基础的理解，并加强其项目实施能力。 首先，HTML（HyperText ...
Static-web-pages.zip_DW页面_html+css+js网站_web dw_静态web 例子
09-24
标题中的"Static-web-pages.zip_DW页面_html+css+js网站_web dw_静态web 例子"揭示了这个压缩包文件包含的内容，它是一个关于使用Dreamweaver（DW）创建的静态网页项目，其中包含了HTML、CSS和JavaScript技术。...
基于HTML+CSS+JS实现静态网站我的家乡(Web课程设计)【100012530】
05-31
详细介绍自己的家乡，要求包括以下部分板块：风土人情、家乡风貌、家乡土特产品、家乡经济、家乡教育、文化传承、历史名人大事、历史名胜古迹、家乡社区与论坛。将页面分成四大模块，过设置背景图片来呈现标题。
原生js验证简洁美观注册登录页面
wangchaoqi1985的博客
12-28 1728
本文转载自：https://www.cnblogs.com/storm-chou/p/6189489.html 作者：storm-chou 转载请注明该声明。序 一个以js验证表单的简洁的注册登录页面，不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <htm...
css+html+js写一个网页版登陆页面
2301_76255666的博客
07-04 230
用css+html+js实现一个网页登陆页面，js文件、css文件和html文件分离，方便代码管理，提高代码复用性。页面用js简单实现了登陆合法验证。
html + css + JavaScript属于静态资源
06-08
是的，HTML、CSS和JavaScript通常被视为静态资源。静态资源是指在服务器端不需要动态生成的内容，通常是一些静态的文本、图像、样式表、脚本等。HTML用于定义Web页面的结构和内容，CSS用于定义Web页面的样式，而JavaScript用于实现Web页面的动态效果和交互行为。这些资源在服务器端不需要动态生成，可以直接通过HTTP协议返回给客户端浏览器，因此通常被认为是一种静态资源。
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Demonslzh6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值