HTML一静态登录注册页面附有完整网页html+css+js

在这里插入图片描述

html

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

<head>
    <meta charset=UTF-8">
    <title>程序员之家</title>
    <link rel="stylesheet" href="5.css">
</head>

<body>
    <div id="head">
        <ul>
            <li><a>首页</a></li>
            <li><a>博客</a></li>
            <li><a>程序员学院</a></li>
            <li><a>论坛</a></li>
            <li><a>问答</a></li>
            <li><a>代码</a></li>
            <li><a>高校</a></li>
            <li><a href="https://www.csdn.net/" target="blank">CSDN</a></li>
            <li><a href="https://www.cnblogs.com/" target="blank">博客园</a></li>
            <li><a>登录/注册</a></li>
            <li><a>会员中心</a></li>
        </ul>
    </div>
    <div
        style="background-image: url(download.jfif); background-size:100% 100%;margin-left: auto;margin-right: auto;width: 100%;height: 635px;">
        <section id="content">
            <div class="header">
                <a href="javascript:;" class="current">我要登录</a>
                <a href="javascript:;">我要注册</a>
            </div>
            <div id=body>
                <div class="dom" style="display: block;">
                    <form>
                        <div id="s1">
                            <h>账号</h>
                            <input id="input" type="text" placeholder="手机/邮箱/用户名">
                        </div>
                        <div id="s1">
                            <h>密码</h>
                            <input id="input" type="password" placeholder="密码">
                        </div>
                        <div id="s1">
                            <input type="checkbox">
                            <span>记住密码</span>
                        </div>
                        <input id="button" type="submit" value="登&nbsp;录">
                    </form>
                    <div id="s1">
                        <a href="#">找回密码</a>
                        <span>|</span>
                        <span>还没有注册帐号?</span>
                        <a href="#">立即注册</a>
                    </div>
                    <div id="s2">
                        <span>使用第三方账号直接登录</span>
                        <div class="s3">
                            <a href="#">
                                <img src="images/qq.png" alt="">
                            </a>
                            <a href="#">
                                <img src="images/wechat.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="dom">
                    <form>
                        <div id="s1">
                            <h>手机号码</h>
                            <input id="input" type="text" placeholder="填写你的手机号码作为登录账户">
                        </div>
                        <div id="s1">
                            <h>用户名</h>
                            <input id="input" type="password" placeholder="中、英文均可,最长20个字符或10个汉字">
                        </div>
                        <div id="s1">
                            <h>密码</h>
                            <input id="input" type="text" placeholder="6-30位英文、数字、符号,区分大小写">
                        </div>
                        <div id="s1">
                            <h>短信验证码</h><br>
                            <input id="input1" type="text" placeholder="填写短信验证码">
                            <input id="button1" type="button" value="获取短信验证码">
                        </div>
                        <input id="button" type="submit" value="注&nbsp;册">
                    </form>
                    <div id="s2">
                        <span>使用第三方账号直接登录</span>
                        <div class="s3">
                            <a href="#">
                                <img src="images/qq.png" alt="">
                            </a>
                            <a href="#">
                                <img src="images/wechat.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script>
            window.onload = function () {
                // 1.1 获取需要的标签
                let as = document.getElementsByClassName('header')[0].getElementsByTagName('a');
                let contents = document.getElementsByClassName('dom');

                // 1.2 遍历
                for (let i = 0; i < as.length; i++) {
                    // 1.2.1 取出单个对象
                    let a = as[i];
                    a.id = i;

                    // 1.2.2 监听鼠标的移动事件
                    a.onclick = function () {
                        // 让所有的a的class都清除
                        for (let j = 0; j < as.length; j++) {
                            as[j].className = '';
                            contents[j].style.display = 'none';
                        }

                        // 设置当前a的class
                        this.className = 'current';
                        // 从contents数组中取出对应的标签
                        contents[this.id].style.display = 'block';
                    }

                }
            }
        </script>
    </div>
    </div>
    <div id="foot">
        <ul>
            <li><a>关于我们</a></li>
            <li><a>招贤纳士</a></li>
            <li><a>广告服务</a></li>
            <li><a>开发助手</a></li>
            <li><a>工作时间 8:30-22:00</a></li>
        </ul>
    </div>
    <div align="center" style="color: grey; font-size:12px;">
        Copyright © 2008-2020. All Rights Reserved
    </div>
</body>

</html>

css

body,html,div {
  padding: 0;
  margin: 0;
}

#head {
  width: 100%;
  height: 43px;
}
#head ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#head ul li {
  float: left;
}
#head ul li a {
  display: block;
  width: 139.6px;
  color: black;
  background-color: white;
  text-align: center;
  text-decoration: none;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
}
#head ul li a:hover {
  background-color: gray;
}

#foot {
  width: 100%;
  height: 42px;
  margin-top: 10px;
}
#foot ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#foot ul li {
  float: left;
}
#foot ul li a {
  display: block;
  width: 250px;
  color: grey;
  background-color: white;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  line-height: 30px;
  font-size: 14px;
}

* {
  text-decoration: none;
}
a {
  color: blue;
}

input,button {
  outline: none;
}

#content {
  border: solid 2px #e0e0e0;
  width: 25rem;
  height: 33rem;
  background-color: white;
  margin-top: 50px;
  margin-left: 50%;
  float: left;
  
}

.header a {
  width: 50%;
  height: 60px;
  background-color: #f5f5f5;
  display: inline-block;
  float: left;
  /*居中*/
  text-align: center;
  line-height: 60px;
  color: #262626;
}

.header a.current {
  background-color: transparent;
  color: blue;
}

#body {
  margin: 2rem;
}

.dom {
  width: 100%;
  display: none;
}

#input {
  width: 100%;
  height: 2rem;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-radius: 5px;
  border: 1px solid #cccccc;
}

#s1 {
  margin-bottom: 1rem;
}

#button {
  width: 100%;
  height: 2rem;
  border: none;
  font-size: 1.5em;
  color: #fff;
  background-color: blueviolet;
  border-radius: 3px;
  margin-bottom: 1rem;
}

#s2 {
  text-align: center;
}

#s3 {
  margin-top: 1rem;
}

#input1 {
  width: 60%;
  height: 2rem;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-radius: 5px;
  border: 1px solid #cccccc;
}

#button1 {
  width: 35%;
  height: 2rem;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-radius: 5px;
  border: 1px solid #cccccc;
  cursor: pointer;
}

HTML一静态登录注册页面附有完整网页html+css+js

相关文章