百度账号管理静态页面

最新推荐文章于 2022-09-20 22:29:54 发布
最新推荐文章于 2022-09-20 22:29:54 发布
阅读量431 收藏 1
点赞数 1
文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59068879/article/details/119090095
版权 

主体代码块：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="账号管理.css">
	<title>账号管理</title>
</head>
<body>
    <!-- 设置一个大的盒子作为标题栏 -->
	<div class="header">
        <!-- 内含一个盒子作为左边图片的内容 -->
        <div class="header-left">
            <ul>
                <li><a href="#"><img src="img/百度.png"></a></li>
            </ul>
        </div>
        <!-- 再来一个盒子作为左边文字内容 -->
        <div class="left-text">
            <p><a href="#">账号设置</a></p>
        </div>
        <!-- 头部右边文字 -->
        <div class="right-text">
            <ul>
                <li><a href="#">意见反馈</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#">百度首页</a></li>
                <li><a href="#"><img src="img/猫.png"></a></li>
            </ul>
        </div>
    </div>
    <!-- 左侧导航栏开始 -->
    <div class="left">
        <!-- 第一个 -->
        <div class="left1">
            <ul>
                <li><a href="#">我的账号<span>.</span></a></li>
                <li><a href="#">绑定手机</a></li>
                <li><a href="#">登录密码</a></li>
                <li><a href="#">绑定邮箱</a></li>
            </ul>
        </div>
        <!-- 第二个 -->
        <div class="left2">
            <ul>
                <li><a href="#">账号保护</a></li>
                <li><a href="#">登录方式</a></li>
                <li><a href="#">登录设备</a></li>
                <li><a href="#">授权管理</a></li>

            </ul>
        </div>
        <!-- 第三个 -->
        <div class="left3">
            <ul>
                <li><a href="#">登录记录</a></li>
                <li><a href="#">敏感记录</a></li>
                <li><a href="#">关联账号</a></li>
            </ul>
        </div>
        <!-- 第四个 -->
        <div class="left4">
            <ul>
                <li><a href="#">账号申述</a></li>
                <li><a href="#">账号注销</a></li>
            </ul>
        </div>
    </div>

    <!-- 右侧导航栏 -->
    <div class="right">
        <!-- 设置图片 -->
        <div class="picture">
            <a href="#" ><img src="img/猫.png"></a>
        </div>
        <!-- 用户名和电话号码 -->
        <div class="username">
            <ul>
                <li><input type="submit" value="设置用户名"</li>
                <li>181******29</li>
            </ul>
            <!-- 加密技术 -->
            <div class="passward">
                <ul>
                    <li><img src="img/实名认证.png"></li>
                    <li><img src="img/手机.png"></li>
                    <li><img src="img/密码.png"></li>
                    <li><img src="img/邮箱.png"></li>
                    <li><p>百度技术加密，保障您的账号信息安全</p></li>
                    <li><hr></li>
                </ul>
            </div>
            <!-- 帮助中心 -->
            <div class="help">
                <h3>帮助中心</h3>
                <a href="#">更多></a>
            </div>

            <!-- 帮助方法 -->
            <div class="methd">
                <div class="methd1">
                    <p>如何注销账号?</p>
                </div>
                <div class="methd2">
                    <p>申诉未通过怎么办?</p>
                </div>
                <div class="methd3">
                    <p>遇到风险,如何冻结?</p>
                </div>
                <div class="methd4">
                    <p>如何申诉?</p>
                </div>
                <hr>
            </div>
            <!-- 意见反馈 -->
            <div class="help">
                <h3>意见反馈</h3>
                <a href="#">反馈></a>
            </div>
        </div>
    </div>


    <!-- 中间的模块开始了 -->
    <!-- 中间第一行盒子 -->
    <div class="center1">
        <div class="center1-1">
            <h1>60</h1>
            <div class="center1-1-1">
                <ul>
                    <li>***</li>
                    <li><p>账号存在重大风险，请立即完善信息</p></li>
                </ul>
            </div>
            <div class="center-1-2">
                <input type="submit" value="检测">
            </div>

            <!-- 第一个盒子第二行开始了 -->
            <!-- 第二行第一个盒子 -->
            <!-- 将后面的几个盒子全部放在第一个盒子里面，他们就会自己保持在同一行 -->
            <div class="center1-2-1">
                <h4>我的身份证认证</h4><br>
                <p>建议进行身份证认证...</p><br>
                <a href="#">去认证></a>
            </div>
            <!-- 第二行第二个盒子 -->
            <div class="center1-2-2">
                <h4>我的账号密码</h4><br>
                <p>建议设置密码，避...</p><br>
                <a href="#">去设置></a>
            </div>
            <!-- 第二行第三个盒子 -->
            <div class="center1-2-3">
                <h4>我的登录保护</h4><br>
                <p>建议开去登录保护...</p><br>
                <a href="#">去开启></a>
            </div>
            <!-- 第二行第四个盒子 -->
            <div class="center1-2-4">
                <h4>我的绑定手机</h4><br>
                <p>手机已绑定，账号...</p><br>
                <a href="#">去更换></a>
            </div>
        </div>
    </div>
    <!-- 中间第二行盒子 -->
    <!-- style='border-bottom:3px solid #FFA00A;'  -->
    <div class="center2">
        <div "id="login_div" class="login_div">
            <div class="login_register">
                <ul>
                    <li id='denglu' style='border-bottom:3px solid #ccc;padding-bottom: 10px;' onclick="changePage('login')">登录记录</li>
                    <li id="zhuce" onclick="changePage('register')">敏感记录</li>
                </ul>
                <hr>
            </div>
            <!-- 登录界面 -->
            <div class='div_login' id='login'>
                <div class="way">
                    <ul>
                        <li>登录方式</li>
                        <li>设备名称</li>
                        <li>系统</li>
                        <li>登录时间</li>
                    </ul>
                </div>
                <div class="qq">
                    <ul>
                        <li>QQ登录</li>
                        <li>QQ登录</li>
                        <li>QQ登录</li>
                    </ul>
                </div>
                <div class="qqtime">
                    <p>07-25 09:19</p>
                    <p>07-25 09:19</p>
                    <p>07-25 09:19</p>
                </div>
                <div class="look">
                    <a href="#">查看全部 ></a>
                </div>
            </div>
            <!-- 注册界面 -->
            <div class="div_register" id="register">
                <div class="time">
                    <ul>
                        <li>时间</li>
                        <li>操作记录</li>
                        <li>IP</li>
                    </ul>
                </div>
                <div class="data">
                    <p>暂无登录数据</p>
                </div>
            </div>
        </div>

    </div>


    <!-- 中间第三第一个行盒子 -->
    <div class="center3-1">
        <div class="state-png">
            <img src="img/申诉.png">
        </div>
        <div class="state">
            <h3>账号申诉</h3>
            <p>登陆异常，手机停用...</p>
        </div>
    </div>
    <!-- 中间第三行第二个盒子 -->
    <div class="center3-2">
        <div class="cancel-png">
            <img src="img/注销.png">
        </div>
        <div class="cancel">
            <h3>账号申诉</h3>
            <p>登陆异常，手机停用...</p>
        </div>
    </div>

    <!-- 中间第四行盒子 -->
    <div class="center4">
        <div class="last1">
            <p>百度账号管家</p>
            <h2>安全在手 畅行百度</h2>
        </div>
        <div class="load">
            <p>扫码下载-></p>
        </div>
        <div class="last-right">
            <img src="img/二维码.png">
        </div>
    </div>

</body>
</html>

css代码块：
/* 设置页面的内外边距为0 */
*{
    margin: 0;
    padding: 0;
}
/* 去掉ul标签的小点 */
ul{
    list-style: none;
}
/* 去掉a标签的下划线 */
a{
    text-decoration: none;
}
/* 设置页面的背景颜色 */
body{
    background-color: gainsboro;
    position:static;
    width: 1500px;
    height: 900px;
}
/* 设置页面头部的大小颜色 */
.header{
    height: 60px;
    width: 1520px;
    position: fixed; /*设置头部固定不动*/
    overflow: auto;  /*超出的部分隐藏*/
    background-color:white;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
/* 设置图片位置大小 */
.header-left ul {
    float: left;
    margin-top: 6px;
    margin-left: 20px;
    border-right: 1px solid #ccc ;
}
.header-left ul img{
    width: 90px;
}
/* 左边文字位置大小 */
.left-text{
    float: left;
    margin-left: 10px;
    margin-top: 18px;
}
.left-text p{
    font-size: 14px;
    color: black;
}
/* 头部右边文字 */
.right-text{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}
/* 将li标签里面的内容恒排列 */
.right-text ul li{
    float: left;
    line-height: 40px;
}
/* 设置a标签里面的内容边距，颜色 */
.right-text ul li a {
    padding: 0 20px;
    float: left;
    color: black;
    font-weight: bolder;
}
/* 光标移动到文字时文字颜色变蓝 */
.right-text ul li a:hover{
    color: blue;
}
.right-text img{
    float: left;
    width: 35px;
}
/* 左侧导航栏开始 */
.left{
    float: left;
    width: 224px;
    height: 930px;
    background-color: white;
    border-right: 1px solid #ccc;
}
/* .left-png img{
    float: left;
    margin-top: 20px;
    margin-left: 40%;
} */
.left1 ul{
    width: 224px;
    list-style: none;
    /* float: left; */
    margin-top: 100px;
    /* margin-left: 80px; * */
}
.left1 ul li{
    list-style: none;
    line-height: 45px;
    font-size: 14px;
    color: black;
}
/* 将a标签转化为块级元素 */
.left1 ul li a {
    display: block;
    color: black;
    text-align: center;
}
/* .left ul li a:nth-child(1){
    color:blue;
} */
.left1 ul li a:hover{
    background-color: rgb(212, 199, 241);
}
/* 设置右边的小蓝色方块 */
.left1 span{
    float: right;
    width: 4px;
    height: 20px;
    color:white;
    background-color: blue;
    margin-top: 10px;
}

/* 第二个 */
.left2 ul{
    width: 224px;
    list-style: none;
    /* float: left; */
    margin-top: 35px;
    /* margin-left: 80px; * */
}
.left2 ul li{
    list-style: none;
    line-height: 45px;
    font-size: 14px;
    color: black;
}
/* 将a标签转化为块级元素 */
.left2 ul li a {
    display: block;
    color: black;
    text-align: center;
}
/* .left ul li a:nth-child(1){
    color:blue;
} */
.left2 ul li a:hover{
    background-color: rgb(212, 199, 241);
}
/* 第三个 */
.left3 ul{
    width: 224px;
    list-style: none;
    /* float: left; */
    margin-top: 35px;
    /* margin-left: 80px; * */
}
.left3 ul li{
    list-style: none;
    line-height: 45px;
    font-size: 14px;
    color: black;
}
/* 将a标签转化为块级元素 */
.left3 ul li a {
    display: block;
    color: black;
    text-align: center;
}
/* .left ul li a:nth-child(1){
    color:blue;
} */
.left3 ul li a:hover{
    background-color: rgb(212, 199, 241);
}
/* 第四个 */
.left4 ul{
    width: 224px;
    list-style: none;
    /* float: left; */
    margin-top: 35px;
    /* margin-left: 80px; * */
}
.left4 ul li{
    list-style: none;
    line-height: 45px;
    font-size: 14px;
    color: black;
}
/* 将a标签转化为块级元素 */
.left4 ul li a {
    display: block;
    color: black;
    text-align: center;
}
/* .left ul li a:nth-child(1){
    color:blue;
} */
.left4 ul li a:hover{
    background-color: rgb(212, 199, 241);
}
/* 右侧导航栏开始了 */
/* 设置盒子的大小位置 */
.right{
    width: 320px;
    height: 808px;
    float: right;
    margin-top: 92px;
    margin-right: 15px;
    border-radius: 10px;
    background-color: white;
    overflow: hidden;
}
.picture img {
    float: left;
    width: 110px;
    margin-top: 50px;
    margin-left: 110px;
}
.username {
    list-style: none;
    float: left;
    margin-top: 20px;
    margin-left: 125px;
}
.username li input{
    list-style: none;
    font-size: 14px;
    width: 105px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-left: -10px;
    background-color: white;
    cursor: pointer;
}
.username li input:hover{
    background-color: #ccc;
}
.username ul li{
    font-size: 10px;
}
.passward{
    float: left;
    margin-top: 40px;
    margin-left: -60px;
    /* border-bottom: 1px solid #ccc; */
}
.passward ul li img{
    width: 26px;
    height: 20px;
}
.passward ul li{
    float: left;
    padding: 0 8px;
}
.passward p{
    line-height: 50px;
    margin-left: -52px;
    font-size: 16px;
    /* font-weight: lighter; */
    color: gainsboro;
    /* 箭头光标 */
    cursor: default;
}
.passward hr{
    width: 272px;
    float: left;
    margin-left: -50px;
    margin-top: 12px;
    font-weight: lighter;
}
/* 帮助中心 */
.help{
    float: left;
    width: 320px;
    margin-left: -125px;
    margin-top: 20px;
    /* background-color:yellow; */
    cursor:default;
}
.help h3{
    float: left;
    margin-left: 25px;
}
.help a{
    float: right;
}
/* 光标悬浮时字体变蓝色 */
.help a:hover{
    color: blue;
}
/* 帮助方法 */
.methd{
    width: 320px;
    float: left;
    line-height: 60px;
    margin-left: -100px;
    margin-top: 20px;
    cursor: default;
}
.methd1{
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 120px;
    height: 40px;
    line-height: 45px;
    text-align: center;
    background-color: ghostwhite;
}
.methd2{
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 145px;
    height: 40px;
    line-height: 45px;
    background-color: ghostwhite;
    margin-top: 15px;
}
.methd3{
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 145px;
    height: 40px;
    line-height: 45px;
    background-color: ghostwhite;
    margin-top: 15px;
}
.methd4{
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 80px;
    height: 40px;
    line-height: 45px;
    background-color: ghostwhite;
    margin-top: 15px;
}
.methd hr{
    width: 272px;
    float: left;
    margin-top: 25px;
    font-weight: lighter;
}
.methd p:hover{
    border-radius: 15px;
    background-color:gainsboro;
}
/* 意见反馈 */
.help{
    float: left;
    width: 320px;
    margin-left: -125px;
    margin-top: 20px;
    /* background-color:yellow; */
    cursor:default;
}
.help h3{
    float: left;
    margin-left: 25px;
}
.help a{
    float: right;
}
/* 光标悬浮时字体变蓝色 */
.help a:hover{
    color: blue;
}




/* 中间部分开始了 */
/* 第一个盒子 */
.center1{
    float: left;
    background-color: white;
    width: 900px;
    height: 240px;
    margin: 0 auto;
    margin-top: 93px;
    margin-left: 30px;
    border-radius: 10px;
}
.center1-1{
    float: left;
    background-color: rgb(247, 80, 80);
    width: 860px;
    height: 100px;
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 8px;
}
.center1-1 h1{
    float: left;
    color: white;
    font-size: 60px;
    margin-top: 15px;
    margin-left: 15px;
}
.center1-1 ul{
    float: left;
    color: white;
}
.center1-1-1{
    background-color:rgb(247, 80, 80);
    width: 210px;
    height: 40px;
    margin-top: 38px;
    margin-left: 90px;
}
.center1-1-1 ul li{
    margin-top: px;
    margin-left: 10px;
    font-size: 12px;

}
/* 先在右侧定义一个盒子， */
.center-1-2{
    background-color: blue;
    float: right;
    width: 120px;
    height: 40px;
    margin-right: 15px;
    margin-top: -50px;
    border-radius: 20px;
}
.center-1-2 input{
    float: left;
    margin-top: 0px;
    margin-left: 0px;
    width: 120px;
    height: 40px;
    border-radius: 20px;
    border:0px;
}
.center-1-2 input:hover{
    background-color:cornsilk;
}
/* 中间第一行盒子中第二行的盒子 */
/* 第一个盒子 */
.center1-2-1{
    background-color: blue;
    width: 200px;
    height: 80px;
    margin-top: 50px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
    line-height: 12px;
}
/* 设置第一个盒子内的内容 */
.center1-2-1 h4{
    float: left;
    margin-top: 8px;
    margin-left: 10px;
    font-weight: normal;
}
.center1-2-1 p{
    float: left;
    margin-top: 12px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 14px;
    color: darkgray;
}
.center1-2-1 a{
    float: left;
    margin-top: 12px;
    margin-left: 10px;
    font-weight: normal;
    color:cornflowerblue;
}
.center1-2-1 a:hover{
    color: blue;
}

/* 设置光标悬浮的时候边框变蓝色 */
.center1-1 div:hover{
    border-color: cornflowerblue;
}
/* 第二个盒子 */
.center1-2-2{
    background-color: blue;
    width: 200px;
    height: 80px;
    /* margin-top: 50px; */
    float: left;
    margin-left: 220px;
    margin-top: -82px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 10px;
    /* overflow: hidden; */
    cursor: pointer;
}
/* 设置第二个盒子内的内容 */
.center1-2-2 h4{
    float: left;
    margin-top: 3px;
    margin-left: 10px;
    font-weight: normal;
}
.center1-2-2 p{
    float: left;
    margin-top: 3px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 14px;
    color: darkgray;
}
.center1-2-2 a{
    float: left;
    margin-top: 5px;
    margin-left: 10px;
    font-weight: normal;
    color:cornflowerblue;
}
.center1-2-2 a:hover{
    color: blue;
}

/* 第三个盒子 */
.center1-2-3{
    background-color: blue;
    width: 200px;
    height: 80px;
    /* margin-top: 50px; */
    margin-left: 440px;
    margin-top: -82px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 10px;
    /* overflow: hidden; */
    cursor: pointer;
}
/* 设置第三个盒子内的内容 */
.center1-2-3 h4{
    float: left;
    margin-top: -78px;
    margin-left: 10px;
    font-weight: normal;
}
.center1-2-3 p{
    float: left;
    margin-top: -54px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 14px;
    color: darkgray;
}
.center1-2-3 a{
    float: left;
    margin-top: -28px;
    margin-left: 10px;
    font-weight: normal;
    color:cornflowerblue;
}
.center1-2-3 a:hover{
    color: blue;
}

/* 第四个盒子 */
.center1-2-4{
    background-color: blue;
    width: 200px;
    height: 80px;
    margin-top: -82px;
    margin-left: 660px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 10px;
    /* overflow: hidden; */
    cursor: pointer;
}
/* 设置第四个盒子内的内容 */
.center1-2-4 h4{
    float: left;
    margin-top: -78px;
    margin-left: 10px;
    font-weight: normal;
}
.center1-2-4 p{
    float: left;
    margin-top: -54px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 14px;
    color: darkgray;
}
.center1-2-4 a{
    float: left;
    margin-top: -28px;
    margin-left: 10px;
    font-weight: normal;
    color:cornflowerblue;
}
.center1-2-4 a:hover{
    color: blue;
}



/* 中间第二个盒子 */
.center2{
    float: left;
    background-color: white;
    width: 900px;
    height: 240px;
    margin: 0 auto;
    margin-top: 25px;
    margin-left: 30px;
    border-radius: 10px;
}
.login_div{
    float: left;
    margin-left: 20px;
}
/* 设置切换的登记记录 和 铭感记录 */
/* 登记记录开始 */
.login_register{
    list-style-type: none;
    cursor: pointer;
}
.login_register ul li{
    float: left;
    padding: 0 10px;
}
.login_register hr{
    float: left;
    width: 900px;
    margin-left: -20px;
    margin-top: 0px;
    color: darkgray;
}
/* 设置登录方式这一排得到样式 */
.way {
    float: left;
    margin-left: -66px;
    margin-top: 10px;
    /* background-color: blue; */
}
.way ul li{
    float: left;
    padding: 0 75px;
    color: darkgray;
}
.qq{
    float: left;
    margin-left: -748px;
    margin-top: 45px;
}
.qq ul li{
    line-height: 32px;
    font-size: 14px;
}
.qqtime{
    float: right;
    margin-right: 183px;
    margin-top: 10px;
    line-height: 32px;
    font-size: 14px;
}
.look{
    float: left;
    margin-left: 10px;
    margin-top: 125px;
}
.look a{
    color:cornflowerblue;
    font-size: 14px;
}
.look a:hover{
    color: blue;
}
/* 登记记录结束、 */
/* 中间第三个盒子 */

/* 敏感记录开始 */
.time {
    float: left;
    /* 要点：先将注册表单的盒子隐藏 */
    /* display: none;   */
    margin-top: 15px;
}
.time ul li{
    float: left;
    padding: 0 200px;
    margin-left: -155px;
    color: darkgrey;
    font-size: 14px;
}
.data{
    float: left;
    margin-top: 120px;
    margin-left: -400px;
    color: darkgrey;
    font-size: 14px;
}
/* 敏感记录结束 */
/* 第一个盒子 */
.center3-1{
    float: left;
    background-color: white;
    width: 445px;
    height: 125px;
    margin: 0 auto;
    margin-top: 25px;
    margin-left: 30px;
    border-radius: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}
/* 内部内容布局设置 */
.state-png{
    float: left;
    margin-top: 30px;
    margin-left: 30px;
}
.state{
    float: left;
    margin-top: 35px;
    margin-left: 10px;
}
.state h3{
    font-weight: normal;
}
.state p{
    color:darkgray;
    font-size: 14px;
}
/* 光标悬浮触发边框变蓝色 */
.center3-1:hover{
    border-color:  blue;
    color: blue;
}



/* 中间第三行第二个盒子 */
.center3-2{
    float: left;
    background-color: white;
    width: 445px;
    height: 125px;
    margin: 0 auto;
    margin-top: 25px;
    margin-left: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}
/* 内部内容布局设置 */
.cancel-png{
    float: left;
    margin-top: 30px;
    margin-left: 30px;
}
.cancel{
    float: left;
    margin-top: 35px;
    margin-left: 10px;
}
.cancel h3{
    font-weight: normal;
}
.cancel p{
    color:darkgray;
    font-size: 14px;
}
/* 光标悬浮触发边框变蓝色 */
.center3-2:hover{
    border-color: blue;
    color: blue;
}


/* 中间第四个盒子 */
.center4{
    float: left;
    background-color: white;
    width: 900px;
    height: 125px;
    margin: 0 auto;
    margin-top: 25px;
    margin-left: 30px;
    border-radius: 10px;
}
.last1{
    float: left;
    margin-top: 35px;
    margin-left: 20px;
    cursor:default;
}
.load{
    background-color:gainsboro;
    float: left;
    margin-top: 60px;
    margin-left: 20px;
    border-radius: 20px;
    width: 80px;
    height: 25px;
    cursor:default;
}
.load p{
    float: left;
    margin-top: 5px;
    margin-left: 8px;
    color: dodgerblue;
    font-size: 12px;
}
.last1 p{
    color: darkgray;
}
.last1 h2{
    font-weight: normal;
}
.last-right{
    float: right;
    margin-top: 10px;
}
javas代码：
 <script>
        // 切换登录/注册界面
        function changePage(val){
            var login_div = document.getElementById("login");
            var register_div = document.getElementById("register");
            if(val == 'login'){
                // 在切换登录注册的同时刷新验证码
                login_div.style.display = 'block';    // 切换效果的关键，思路就是将要显示的 display设置为 block
                register_div.style.display = 'none';  // 然后将要隐藏的盒子的 display 设置为 none
 
                denglu.style.borderBottom = '3px solid #ccc';
                zhuce.style.borderBottom = '';
 
            }else if(val == 'register'){
                login_div.style.display = 'none';     // 同上
                register_div.style.display = 'block';

                denglu.style.borderBottom = '';
                zhuce.style.borderBottom = '3px solid #ccc';
                zhuce.style.paddingBottom = '10px';

                
            }
        }
    </script>

遇见颜言
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用户中心静态页面
02-01
用户中心html模板，采用html5，发布文章，管理文章，发送消息等模板
账号管理html页面,运营管理账号.html
weixin_30768925的博客
06-04 192
众创数字资产综合运营管理平台+添加删除用户账号用户姓名手机号码账号权限账号状态添加时间操作weber小官13728936116账号管理、运营管理、订单管理2017-05-20编辑weber小明13728936116账号管理、运营管理、订单管理2017-05-20编辑layui.use(['jquery', 'laydate','form','layer','laypage'], function(...
使用ps制作账号管理页面
weixin_44582741的博客
05-18 628
（作者：翟正兴，撰写时间：2019年5月16日） 首先打开我们的ps软件进去新建一个画板，画板大小为1366像素x768像素，颜色#2f323b，然后我们再用矩形工具拉一条矩形出来当顶部栏，弄好后在顶部栏上面摆一个logo然后再logo旁边打上你做的这个网页的名字，然后我们再顶部栏的右边弄个用户登录。 然后接下来我们在做右边的导航栏部分，导航栏里面首页肯定不能少，然后我们看下我们做的网页导航栏里...
简易的后台管理系统HTML静态页面
07-02
简易的后台管理系统HTML静态页面，内有基本的文章/图片的增删改查样式!!!!
员工管理静态系统代码
11-20
jsp静态代码 还没有嵌套java脚本代码。希望会有帮助。
PHP随机静态页面生成系统源码雨尘SEO系统v1.3
05-12
雨尘SEO静态页面生成系统源码v1.3版本，支持文章采集,功能，多模板选择批量生成单页，本次更新增了百度自动推送和网站地图sitemap功能。 全新安装教程： 手动导入数据库文件 修改：config.php数据库信息 后台目录：...
PHP随机静态页面生成系统源码 雨尘SEO系统v1.3
07-17
雨尘SEO静态页面生成系统源码v1.3版本，支持文章采集,功能，多模板选择批量生成单页，本次更新增了百度自动推送和网站地图sitemap功能。 全新安装教程： 手动导入数据库文件 修改：config.php数据库信息 后台目录：...
雨尘SEO静态页面生成系统版本源码3秒钟可生成上千条单页面SEO必备神器.zip
12-01
雨尘SEO静态页面生成系统PHP网站源码v1.3最新版本，支持文章采集,功能，多模板选择批量生成单页，本次更新增了百度自动推送和网站地图sitemap功能。 全新安装教程： 手动导入数据库文件：sql.sql 修改：config....
商城静态HTML完整版
05-11
"商城静态HTML完整版"指的是一个完整的商城网站的前端静态页面，通常由一系列HTML文件组成，这些文件包含了商城的所有页面布局、元素和交互设计。在这样的项目中，开发者通常不依赖服务器端脚本，而是直接通过浏览器...
企业网站管理系统生成静态html
03-10
九,静态页面管理 生成产品分类页面 生成所有产品详细页面 生成新闻分类页面 生成新闻详细页面 生成企业信息列表 生成下载分类页面 生成下载详细页面 生成人才招聘列表 生成人才招聘详细页面 ...
权限管理静态页面
12-28
客户关系管理系统的权限管理静态页面
crm客户管理系统的静态页面
09-19
这是客户关系管理系统的静态页面，包含了一些js代码，html代码，以及一些素材
用户管理员系统
03-06
还不错的资源,JAVAWEB,JSP,STRUTS2,SQLserver精美页面
后台管理界面静态模板
06-05
界面美观，后台管理系统，HTML和css以及相应的js结合，比较完善，十几个页面，非常适合参考
通用静态页面生成系统 源代码
11-21
通用静态页面生成系统<br>(Engineer) <br>系统介绍<br>Engineer系统是降低服务器负载，减少企业运营成本的完美解决方案。通过动态批量生成静态页面，可使企业在对外发布服务器选择上，缩减对硬件的投资，并同时降低企业的互联网接入费用。<br>Engineer系统可与目前98%以上文章管理系统进行无缝结合，2%特例系统，也可通过二次编码进行整合，系统根据模板生成静态页，时刻保持网站的新鲜感。<br>Engineer系统是企业低成本、高负载量网站运营完美解决方案。<br><br><br>系统特点<br><br>与现有系统无缝整合<br>系统采用XML文件格式配置系统，通过参数的设置，自动获取数据后生成源数据，Engineer系统读取源数据和模板信息后生成静态页面<br><br>非常见系统结构冗余<br>Engineer采用特有的双层XML配置结构，如企业的系统不适合通过配置文件生成源数据，则可通过简单的二次编码，直接生成符合Engineer数据标准的源数据，达到系统的整合<br><br>动态模板标记<br>在制作Engineer系统使用的模板时，可任意使用模板标记，系统将自动识别，并替换为源数据中相应的内容<br><br><br>系统要求<br><br>操作系统：Microsoft Windows、Linux等支持SUN Java环境的系统<br>运行环境：SUN Java J2SDK 1.4.2及以上版本<br><br><br>*************************************************************<br>解压缩当前压缩包到任意目录<br>配置java环境<br>将jar文件夹中文件加入系统环境变量CLASSPATH中<br><br>详细安装、配置、使用请阅读Engineer.doc<br>*************************************************************
【每天学一点-02】 使用Html5+Less实现简单的静态管理员登录界面
weixin_43906233的博客
04-10 1097
使用Html5+Less实现简单的静态管理员登录界面
使用HTML+CSS完成华为官网登录页面效果（静态页面）
qq_52882006的博客
09-20 2667
【代码】使用HTML+CSS完成华为官网登录页面效果（静态页面）
用html中表单标签实现QQ登录注册静态页面
x1785551的博客
12-08 7065
例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ注册验证</title> </head> <body> <form method="get" action="success.html"> <img src="img/b...
HTML设计简单的教务管理系统
热门推荐
weixin_44923498的博客
11-19 1万+
这是《人机界面设计》的一个作业，运用了HTML，css，javascript的基本操作设计出来的一个西安邮电教务系统的简单页面 本文适合新手运用所学的前端知识进行尝试，建议使用vscode编译器并安装相关包 话不多说，先看最终设计出来的页面： 上图为登陆界面。账号密码格式正确则跳转到主页面 在此处只验证了输入格式是否正确，并没有数据库与之匹配，所以只要格式规范就可以跳转到主界面 上图为跳转后的主页面 上图为模拟手机端打开登陆界面 上图为手机端展示的主页面 最终完成的文件夹。文件夹res存放需要用到
百度静态网页仿写代码
最新发布
07-04
百度静态网页的仿写主要是指用编程语言（如HTML、CSS和JavaScript）创建类似于百度网站风格的静态页面。由于这是一个基础的前端开发任务，这里我会提供一个简单的步骤说明： 1. **HTML结构**: 使用HTML构建页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值