百度账号管理静态页面

主体代码块：
<!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设置为 blockregister_div.style.display = 'none';  // 然后将要隐藏的盒子的 display 设置为 nonedenglu.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>

百度账号管理静态页面相关推荐

html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
静态页面练习——百度搜索页面
静态页面练习--百度搜索页面.前端萌新,个人练习记录帖. 实现效果如下: html代码如下: <!DOCTYPE html> <html lang="en"> ...
使用ps制作账号管理页面
(作者:翟正兴,撰写时间:2019年5月16日) 首先打开我们的ps软件进去新建一个画板,画板大小为1366像素x768像素,颜色#2f323b,然后我们再用矩形工具拉一条矩形出来当顶部栏,弄好后在顶 ...
C# 网站静态页面生成器 for 多线程版
摘要:该生成器是用于放置于服务器上的一个小程序,用于生成站点中需要静态化的页面生成.我写c/s程序不多,所以本程序可能会有些小的bug.还望高手多多指教! 内容: 首先让大家看看该程序的几个流程界面 ...
html 动态调用php文件,html静态页面调用php文件的方法
html静态页面调用php文件的方法本文实例讲述了html静态页面调用php文件的方法.分享给大家供大家参考.具体方法如下: 静态页面中看上去好像是不能直接调用php文件的,但是却可以使用js调用方 ...
PHP随机静态页面生成系统源码雨尘SEO系统
介绍: PHP随机静态页面生成系统源码雨尘SEO系统v1.3 一款随机静态页面生成系统,一秒钟可生成上千条单页面,批量生成单页用来做SEO是非常不错的源码. 雨尘SEO静态页面生成系统源码v1.3版本 ...
超级SEO静态页面生成系统源码
介绍: 一款随机静态页面生成系统,一秒钟可生成上千条单页面,批量生成单页用来做SEO是非常不错的源码,持文章采集,功能,多模板选择批量生成单页,支持百度自动推送和网站地图sitemap功能. 安装教程 ...
雨尘SEO静态页面生成系统版本源码3秒钟可生成上千条单页面SEO必备神器
简介: 一款随机静态页面生成系统,一秒钟可生成上千条单页面,批量生成单页用来做SEO是非常不错的源码. 雨尘SEO静态页面生成系统PHP网站源码v1.3版本,支持文章采集,功能,多模板选择批量生成单页 ...
PHP随机静态页面生成系统源码雨尘SEO系统v1.3
介绍: PHP随机静态页面生成系统源码雨尘SEO系统v1.3 一款随机静态页面生成系统,一秒钟可生成上千条单页面,批量生成单页用来做SEO是非常不错的源码.雨尘SEO静态页面生成系统源码v1.3版本, ...

百度账号管理静态页面

百度账号管理静态页面相关推荐

最新文章

热门文章