百度账号管理静态页面

最新推荐文章于 2023-08-20 11:26:25 发布
最新推荐文章于 2023-08-20 11:26:25 发布
阅读量465 收藏 1
点赞数 1
文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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>

遇见颜言
关注
百度云存储教程---免费建立自己的静态站点
Full Stack
01-21 1万+
以前开发的网站苦于没有云服务器，网站没地方挂，现在百度出了云存储和应用引擎，可以让开发者免费上传动态站点和静态站点。这篇文章，我准备用云存储的方式，存储用户的静态网站，开发者可通过将静态页面上传至云存储空间中，并将其访问权限设置为公开读，即可实现静态网站的效果。文章底部有源码和项目下载。
用户中心静态页面
02-01
用户中心html模板，采用html5，发布文章，管理文章，发送消息等模板
账号管理html页面,运营管理账号.html
weixin_30768925的博客
06-04 229
众创数字资产综合运营管理平台+添加删除用户账号用户姓名手机号码账号权限账号状态添加时间操作weber小官13728936116账号管理、运营管理、订单管理2017-05-20编辑weber小明13728936116账号管理、运营管理、订单管理2017-05-20编辑layui.use(['jquery', 'laydate','form','layer','laypage'], function(...
使用ps制作账号管理页面
weixin_44582741的博客
05-18 679
（作者：翟正兴，撰写时间：2019年5月16日） 首先打开我们的ps软件进去新建一个画板，画板大小为1366像素x768像素，颜色#2f323b，然后我们再用矩形工具拉一条矩形出来当顶部栏，弄好后在顶部栏上面摆一个logo然后再logo旁边打上你做的这个网页的名字，然后我们再顶部栏的右边弄个用户登录。 然后接下来我们在做右边的导航栏部分，导航栏里面首页肯定不能少，然后我们看下我们做的网页导航栏里...
简易的后台管理系统HTML静态页面
07-02
简易的后台管理系统HTML静态页面，内有基本的文章/图片的增删改查样式!!!!
员工管理静态系统代码
11-20
jsp静态代码 还没有嵌套java脚本代码。希望会有帮助。
雨尘SEO静态页面生成系统版本源码3秒钟可生成上千条单页面SEO必备神器.zip
12-01
雨尘SEO静态页面生成系统PHP网站源码v1.3最新版本，支持文章采集,功能，多模板选择批量生成单页，本次更新增了百度自动推送和网站地图sitemap功能。 全新安装教程： 手动导入数据库文件：sql.sql 修改：config....
PHP随机静态页面生成系统源码 雨尘SEO系统v1.3
07-17
雨尘SEO静态页面生成系统源码v1.3版本，支持文章采集,功能，多模板选择批量生成单页，本次更新增了百度自动推送和网站地图sitemap功能。 全新安装教程： 手动导入数据库文件 修改：config.php数据库信息 后台目录：...
百度翻译api静态网页
最新发布
03-08
### 集成百度翻译API于静态HTML页面 为了在静态HTML页面中使用百度翻译API实现文本翻译功能，需遵循一系列开发流程来确保前后端交互顺畅并能有效利用API服务。 #### 准备工作 首先，在应用百度翻译API之前，...
京东HTML静态模板页面全套
02-08
本资源“京东HTML静态模板页面全套”提供了全面的网页模板，用于模拟京东网站的主要功能，包括登录、注册、商品列表、商品详情、订单处理以及收货地址管理等关键模块。这些模板对于开发者来说，是一个宝贵的参考资料...
权限管理静态页面
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 1155
使用Html5+Less实现简单的静态管理员登录界面
html中常见标签及其用法归纳大全
2301_79234439的博客
08-20 6840
用_blank属性，百度一下
使用HTML+CSS完成华为官网登录页面效果（静态页面）
qq_52882006的博客
09-20 3239
【代码】使用HTML+CSS完成华为官网登录页面效果（静态页面）
用html中表单标签实现QQ登录注册静态页面
x1785551的博客
12-08 7375
例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ注册验证</title> </head> <body> <form method="get" action="success.html"> <img src="img/b...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值