一、作业需求：
1、后台管理主界面（左边菜单框、（全选、反选）框、返回顶部按钮）
2、老男孩登录、注册页面
二、博客地址：https://www.cnblogs.com/catepython/p/9306335.html
三、运行环境
操作系统：Win10
Python：3.6.4rcl
Pycharm：2017.3.4
四、功能实现
1） 后台管理规划了整体布局（顶部有标题、左边有菜单、右边有订单列表（表格）...）
2）（左边菜单框、（全选、反选）框、返回顶部按钮）功能都以实现
3）老男孩登录、注册页面都按照原版还原及相应js的功能实现
五、备注
1、在这次作业中掌握了课上老师所说的知识点，还在实践抒写过程中了解了一些新知识
例：
border-radius: 5px;  #设置边框为圆角

list-style：none    #去除ul标签 中前缀样式

placeholder="邮箱/QQ号"   #input标签中  text文本框 设置可描述字符

readme

一、相关知识点

1、标签间的查找

2、后台左侧菜单

3、全选、反选框

4、模态对话框

5、document方法

6、for循环两种写法

7、if判断语句

8、JavaScript初识

二、核心代码

登录、注册页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>51CTO技术家园</title><style>body{margin: 0;padding: 0;font-family: "Arial","Microsoft YaHei","微软雅黑";font-size: 12px;line-height: 24px;background: #f8f8f8;overflow-y: scroll;}h1, h2, h3, form, img, ul, ol, li, dl, dt, dd, div, span, p {padding: 0;margin: 0;border: 0;font-style: normal;font-weight: normal;}.hide{display: none;}.sign{line-height: 1.5;height: 520px;}.loginwarp{margin: 50px auto;width: 965px;height: 520px;}.loginpic{height: auto;width: 960px;}.loginimg{height: 360px;margin-top: 35px;float: left;}.logo{margin-left: 15px;}.logintable{float: right;height: 480px;width: 320px;padding: 0 20px;margin-top: -30px;border: 1px solid #dddddd;
}.table_heard{/*border: 1px solid #dddddd;*/font-size: 12px;font-family: Tahoma,Geneva,sans-serif;height: 60px;margin-bottom: 15px;line-height: 60px;}.tosignup{/*border: 1px solid #dddddd;*/line-height: 60px;float: right;width: 120px;height: 60px;}.user{/*border: 1px solid #dddddd;*/
            height: 43px;width: 320px;margin-bottom: 25px;position: relative;}.input{height: 38px;width: 220px;margin-left: 45px;padding-right: 50px;padding-left: 10px;}.use_label{position: absolute;height: 43px;width: 25px;margin: 0 0 10px 10px;background: url("picture/z_sign.png") no-repeat ;}.pwd_label{position: absolute;height: 43px;width: 25px;margin: 0 0 10px 10px;background: url("picture/z_sign.png") no-repeat 0 -48px;}.login_button{background-color: #f56467;
            color: white;height: 45px;width: 85px;margin-left: 10px;border: 0;}.login_button:hover{background-color: #e03537;
        }.wechat{height: 45px;border: 1px solid #28b328;margin-top: 50px;}.wechat_img{height: 40px;width: 171px;display: block;background: url("picture/z_wechat.png") no-repeat 98px ;text-align: left;line-height: 40px;color: #666;font-size: 18px;padding-left: 136px;}.other{width: 320px;height: 90px;}.pup{background: url("picture/z_up.png") no-repeat 245px;background-color: #f6f6f6;color: #666;
            height: 35px;margin: 0;line-height: 35px;text-align: center;font-size: 13px;}.pdp{background: url("picture/z_down.png") no-repeat 245px;background-color: #f6f6f6;color: #666;
            height: 35px;margin: 0;line-height: 35px;text-align: center;font-size: 13px;}.other_pup{height: 53px;width: 320px;color: #000;background: #fff;font-size: 12px;}.other_a{position: relative;width: 56px;height: 56px;display: inline-block;color: #000;
        }.o_img{position: absolute;line-height: 53px;height: 25px;width: 25px;margin: 14px 5px auto;opacity: 0.8;display: inline-block;}.other .other_pup .other_a .p{width: 24px;display: inline-block;float: right;line-height: 50px;}.foot{border-top:1px solid #D4D4D4 ;
            margin: 108px auto;width: 960px;text-align: center;color: #444444;line-height: 30px;height: 107px;padding: 8px 0 50px;}.foot a:hover{color: #BE1C1A;
        }a{text-decoration: none;}.foot a{color: #444444;
        }.M{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;background-color: #7d7d7d;opacity: 0.5;}.dialog{position: fixed;z-index: 10;top: 50%;left: 50%;height: 300px;width: 440px;background: #fff;margin-top: -150px;margin-left: -220px;}.D-heard{background: #3babf7;
            height: 36px;line-height: 36px;color: #fff;padding-left: 20px}.D-body{height: 105px;margin-top: 20px;padding-left: 20px;margin-bottom: 10px;}.dialog p{font-size: 12px;padding-top: -44px;margin-top: 0;width: 75px;margin-bottom: 0;}textarea{width: 310px;height: 70px;border: 1px solid #cccccc;
            padding: 5px 10px;color: #666;
            resize: none;outline: none;margin-left: 35px;}.D-body-foot .input{width: 310px;height: 25px;border: 1px solid #cccccc;
            padding: 5px 10px;color: #666;
            resize: none;outline: none;margin-left: 35px;}.D-body-foot{height: 65px;margin-top: 15px;padding-left: 20px;margin-bottom: 10px;}.dialog .D-submit{height: 30px;line-height: 30px;border: 1px solid #178fe6;
            width: 82px;font-size: 14px;text-align: center;color: #fff;border-radius: 5px;background: #178fe6;
            cursor: pointer;display: inline-block;float: right;margin-right: 5px;}</style>
</head>
<body><div class="sign"><!--固定在整个html中间--><div class="loginwarp"><!--logo图--><a target="_blank" href="http://blog.51cto.com/51ctoblog/2132577?dl" class="logo"><img src="picture/logo.jpg"></a><!--logo图结束--><div class="loginpic"><!--51CTO介绍首页图--><div class="loginimg"><a target="_blank" href="http://edu.51cto.com/px/train/248?h"><img src="picture/banner_51cto.png"></a></div><!--右边用户名、密码及操作菜单栏--><div class="logintable"><!--右边顶部标题--><div class="table_heard"><div class="tosignup"><a target="_blank" href="http://blog.51cto.com/51ctohome/579769" style="color: #969696;margin-right: 10px;">无法登录?</a>|<a href="注册.html"style="color: red;margin-left: 10px">注册</a></div><h1 style="color:#333;font-size: 20px;width: 300px;margin-left: 20px">登录51CTO</h1></div><!--用户名、密码输入框--><div class="user"><label for = "username" class="use_label"></label><input id = "username" type="text" placeholder="用户名/邮箱/手机" class="input"/></div><div class="user"><label for = "pwd" class="pwd_label"></label><input id = "pwd" type="text" placeholder="密码" class="input"/></div><!--普通登录操作--><div class="user"><input type="submit" value="登录" class="login_button"/><div style="float: right;height: 45px;line-height: 45px;width: 200px;font-size: 12px"><input id = "in1" type="checkbox" style="height: 15px;width: 15px;position: relative;top: 3px;"/><label for = "in1">10天内自动登录</label><a style="float: right" target="_blank" href="http://home.51cto.com/user/register?reback=http%3A%2F%2Fedu.51cto.com%2Fcenter%2Fuser%2Findex%2Flogin-success%3Fsign%3D9617CAQHCQRWCQhRCVoNCVRbAgIGAVAABlYIXgMNRkQRW04XUVNMGlMIWxVWF1pfW0xRU15DVxAfQ1UMWQcdRRIEExddWV1RHgZME1hQV29fBw8PBFJUAQA%26client%3Dweb">忘记密码？</a></div></div><!--微信登陆操作--><div class="user"><div class="wechat"><a class="wechat_img" href="http://home.51cto.com/index?wxreg=1&reback=http://edu.51cto.com/center/user/index/login-success?sign=47d7UQgCBwQGUwgHCAcNClcLUgFUUlcDBAZcWVRfQ0URXxdOXVZCGgNSW0NXSlpcWBwBUAwQUBMdEwELDlUYRBIASk5RXFNRTlxMRVkNV2xcV18MVlACBQU">微信登录</a></div></div><!--其他登录操作--><div class="other"><p  id = "i1" class="pup hide" οnclick="change()">你也可以使用以下账号登录</p><p  id = "i2" class="pdp" οnclick="nochange()">你也可以使用以下账号登录</p><div id = "i3" class="other_pup hide"><a class="other_a" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101355806&redirect_uri=http://home.51cto.com/third-party/qq?reback=http://edu.51cto.com/center/user/index/login-success?sign=9617CAQHCQRWCQhRCVoNCVRbAgIGAVAABlYIXgMNRkQRW04XUVNMGlMIWxVWF1pfW0xRU15DVxAfQ1UMWQcdRRIEExddWV1RHgZME1hQV29fBw8PBFJUAQA&client=web&state=f163e75ff3db1043ac7f6e633051d90f&scope=get_user_info,add_share,list_album,add_album,upload_pic,add_topic,add_one_blog,add_weibo,check_page_fans,add_t,add_pic_t,del_t,get_repost_list,get_info,get_other_info,get_fanslist,get_idolist,add_idol,del_idol,get_tenpay_addr"><i class="o_img" style="background: url(picture/z_sign.png) no-repeat 0 -150px;"></i><p class="p">QQ</p></a><a class="other_a" href="https://api.weibo.com/oauth2/authorize?client_id=2065779340&redirect_uri=http%3A%2F%2Fhome.51cto.com%2Fthird-party%2Fsina&response_type=code&state=47918589d041ba7d28b28c87b45bacdf"><i class="o_img" style="background: url(picture/z_sign.png) no-repeat 0 -225px;"></i><p class="p">微博</p></a><a class="other_a" href="https://www.douban.com/service/auth2/auth?client_id=05f35af5a203986411da10e0e60ac92c&redirect_uri=http%3A%2F%2Fhome.51cto.com%2Fthird-party%2Fdouban&response_type=code&state=b4cd9d093c4c2b277ea0fa615338ea6d"><i class="o_img" style="background: url(picture/z_sign.png) no-repeat 0 -375px;"></i><p class="p">豆瓣</p></a><a class="other_a" href="http://graph.renren.com/oauth/grant?client_id=f1aba159ae20424bb2ecd39018eccd57&redirect_uri=http%3A%2F%2Fhome.51cto.com%2Fthird-party%2Frenren&response_type=code&display=page&state=renren_5b3c8e29b87f22.95901015&origin=00000"><i class="o_img" style="background: url(picture/z_sign.png) no-repeat 0 -300px;"></i><p class="p">人人</p></a><a class="other_a" href="https://github.com/login?client_id=a9207f224b9a98a80c63&return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3Da9207f224b9a98a80c63%26scope%3Duser%2526public_repo%26state%3D20180704170708"><i class="o_img" style="background: url(picture/z_sign.png) no-repeat 0 -535px;"></i><p class="p">github</p></a></div></div></div></div></div><!--底部菜单--><div class="foot"><a  target="_blank" href="http://www.51cto.com/about/aboutus.html">关于我们</a>|<a  target="_blank" href="http://www.51cto.com/about/zhaopin.html">诚聘英才</a>|<a  target="_blank" href="http://www.51cto.com/about/contactus.html">联系我们</a>|<a  target="_blank" href="http://www.51cto.com/about/history2011.html">网站大事</a>|<a  id = "i4" class="ina popyjdatilfeedback" οnclick="showMenu()">意见反馈</a>|<a  target="_blank" href="http://www.51cto.com/about/map.htm">网站地图</a><br>Copyright © 2005-2018 <a  href="Http://www.51cto.com">51CTO.COM</a> 版权所有</div><!--遮募层--><div id = "M1" class="M hide"></div><!--遮募层结束--><div id = "D1" class="dialog hide"><div class="D-heard">意见反馈<span style="float: right;padding-right: 15px;" οnclick="noshow()">x</span></div><div class="D-body"><p class="p">意见或建议：</p><textarea class="textarea" placeholder="请详细描述意见、问题或建议，2-300字以内"></textarea></div><div class="D-body-foot"><p class="p">联系方式：</p><input type="text" class="input"  placeholder="邮箱/QQ号" /></div><input type="submit" value="提交" class="D-submit" οnclick="noshow()"/></div></div><script>function change() {var pup = document.getElementById("i1");pup.nextElementSibling.classList.remove("hide");pup.classList.add('hide');var pup_div = document.getElementById("i3");pup_div.classList.add("hide")}function nochange() {var pup = document.getElementById("i2");pup.previousElementSibling.classList.remove("hide");pup.classList.add('hide');var pup_div = document.getElementById("i3");pup_div.classList.remove("hide")}function showMenu() {var M = document.getElementById("M1");var D = document.getElementById('D1');M.classList.remove("hide");D.classList.remove("hide");}function noshow() {var M = document.getElementById("M1");var D = document.getElementById('D1');M.classList.add("hide");D.classList.add("hide");}</script>
</body>
</html>

登录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>51CTO用户注册</title><style>.hide{display: none;}body{margin: 0;padding: 0;font-family: "Arial","Microsoft YaHei","微软雅黑";font-size: 12px;line-height: 24px;background: #f8f8f8;overflow-y: scroll;}h1, h2, h3, form, img, ul, ol, li, dl, dt, dd, div, span, p {padding: 0;margin: 0;border: 0;font-style: normal;font-weight: normal;}.nav{height: 65px;width: 100%;background: #fff;border-bottom: 1px solid #dddddd;
        }.nav_nr{height: 65px;width: 70%;margin: 0 auto;}.nav-left{width: 310px;float: left;height: 50px;}a{text-decoration: none;}img,table{vertical-align: bottom;}.nav-left .span1{display: block;border-left: 1px solid #c9c9c9;font-size: 18px;float: left;color: #666666;margin-left: 12px;margin-top: 25px;padding-left: 20px;}.nav-right{width: 200px;float: right;}.nav-right a{font-size: 14px;color: #aaaaaa;
        }.nav-right a:hover{text-decoration: underline;}.nav-right-a{background: url("picture/cjwt.jpg") no-repeat 0 25px;float: left;width: 83px;line-height: 66px;height: 66px;text-align: center;margin-left: 25px;}.registered{width: 780px;border: 1px solid #dcdcdc;
            margin: 50px auto;height: 550px;position: relative;}.registered h2{border-bottom: 1px solid #dddddd;
            width: 750px;height: 65px;line-height: 80px;color: #434343;font-size: 16px;padding-left: 15px;}.registered-input1{height: 20px;display: inline-block;width: 100%;color: #747f8c;border: 1px solid #DFE1E8;
            padding: 10px;margin-bottom: 15px;}.registered-input2{top: 3px;height: 15px;width: 15px;margin-right: 5px;position: relative;}.registered-input3{display: block;height: 45px;width: 310px;background-color: #e03537;color: #fff;font-size: 16px;border: 0;margin: 15px auto;}.wayin{height: 68px;width: 480px;margin: 0 auto}.wayin a{width: 60px;height: 60px;display: inline-block;margin: 5px 25px 0 5px;}.wayin .wechat{background: url(picture/lxfs.png) no-repeat -288px 0;margin-left: 20px;}.wayin .wechat:hover{background: url(picture/lxfs.png) no-repeat -288px -75px;margin-left: 20px;}.wayin .qq{background: url(picture/lxfs.png) no-repeat -368px 0;}.wayin .qq:hover{background: url(picture/lxfs.png) no-repeat -368px -75px;}.wayin .weibo{background: url(picture/lxfs.png) no-repeat 0 0}.wayin .weibo:hover{background: url(picture/lxfs.png) no-repeat 0 -75px}.wayin .renren{background: url(picture/lxfs.png) no-repeat -105px 0}.wayin .renren:hover{background: url(picture/lxfs.png) no-repeat -105px -75px}.wayin .douban{background: url(picture/lxfs.png) no-repeat -208px 0}.wayin .douban:hover{background: url(picture/lxfs.png) no-repeat -208px -75px}.foot{margin: 180px -60px;width: 960px;text-align: center;color: #aaaaaa;line-height: 30px;height: 107px;padding: 8px 0 50px;}.foot a:hover{color: #BE1C1A;
        }a{text-decoration: none;}.foot a{color: #aaaaaa;
        }.M{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;background-color: #7d7d7d;opacity: 0.5;}.dialog{position: fixed;z-index: 10;top: 50%;left: 50%;height: 300px;width: 440px;background: #fff;margin-top: -150px;margin-left: -220px;}.D-heard{background: #3babf7;
            height: 36px;line-height: 36px;color: #fff;padding-left: 20px}.D-body{height: 105px;margin-top: 20px;padding-left: 20px;margin-bottom: 10px;}.dialog p{font-size: 12px;padding-top: -44px;margin-top: 0;width: 75px;margin-bottom: 0;}textarea{width: 310px;height: 70px;border: 1px solid #cccccc;
            padding: 5px 10px;color: #666;
            resize: none;outline: none;margin-left: 35px;}.D-body-foot .input{width: 310px;height: 25px;border: 1px solid #cccccc;
            padding: 5px 10px;color: #666;
            resize: none;outline: none;margin-left: 35px;}.D-body-foot{height: 65px;margin-top: 15px;padding-left: 20px;margin-bottom: 10px;}.dialog .D-submit{height: 30px;line-height: 30px;border: 1px solid #178fe6;
            width: 82px;font-size: 14px;text-align: center;color: #fff;border-radius: 5px;background: #178fe6;
            cursor: pointer;display: inline-block;float: right;margin-right: 5px;}.ina{height: 44px;width: 40px;margin-bottom: 8px;}.ina .a1{text-align: center;line-height: 15px;color: #fff;font-size: 12px;font-weight: normal;display: inline-block;padding: 8px;background: #be1c1a none repeat scroll 0 0;border-radius: 5px;    /*边框产生圆角*/}.ina .a2{background: #c1c1c1 url("picture/anchor_qq.png") no-repeat 10px 10px;
            height: 44px;width: 40px;display: block;border-radius: 5px;    /*边框产生圆角*/}.ina .a2:hover{background-color: #be1c1a;
        }</style>
</head>
<body><!--标题栏--><div class="nav"><!--标题栏居中--><div class="nav_nr"><!--标题栏左侧部分--><div class="nav-left"><div style="float: left;width: 135px;padding-top: 20px"><a href="http://www.51cto.com" target="_blank"><img src="picture/small_logo.png" /></a></div><span class="span1">账号通行证</span></div><!--标题栏右侧部分--><div class="nav-right"><div style="float: left;width: 80px;line-height: 66px;height: 66px;text-align: center;"><a href="登录.html" >登录</a></div><div  class="nav-right-a"><a href="http://blog.51cto.com/51ctohome/363950" target="_blank" style="float: left;padding-left: 25px">常见问题</a></div></div></div></div><div style="position: fixed;right: 5px;bottom: 185px;z-index: 99;height: 88px;width: 40px"><div class="ina"><a class="a1" οnclick="showMenu()">意见反馈</a></div><div class="ina"><a class="a2" target="_blank"href="http://shang.qq.com/open_webaio.html?sigt=776c9ec3b0942e3becae4a3f3d63521e719c2a9c3457e1183768e3f1585a031b79f5c410efdbc8d29b802f3611f1a703&sigu=5131548f7cfdbc409a5ca21add9ad52a5ca7c64db1bc7ec6b33d56e808680db804d8fc08a3600b91&tuin=1922702647"></a></div></div><!--注册栏--><div class="registered"><h2>注册账号</h2><div style="margin: 70px 0 0 230px;height: 65px;width: 300px"><input type="text" placeholder="请输入邮箱或手机号" class="registered-input1"/></div><div style="margin-left: 230px;height: 30px;width: 300px;color: #666666;font-size: 12px"><input id = "ic1" class="registered-input2" type="checkbox" checked="" οnclick="nohide()"/><label for = "ic1" οnclick="nohide()">我已经认真阅读并同意</label><a href="http://home.51cto.com/user/service?reback=" target="_blank">《51CTO服务条款》</a><p style="color: #e2393b;margin-top: -5px;padding-left: 10px" class="hide">请接受服务条款</p></div><input type="submit" value="立即注册" class="registered-input3"/><!--第三方登录--><div style="margin: 70px auto;height: 35px;"><h3 style="color: #919191;text-align: center;border: 0">使用第三方账号</h3><div class="wayin"><a class="wechat"href="http://home.51cto.com/index?wxreg=1&reback=http://edu.51cto.com/center/user/index/login-success?sign=47d7UQgCBwQGUwgHCAcNClcLUgFUUlcDBAZcWVRfQ0URXxdOXVZCGgNSW0NXSlpcWBwBUAwQUBMdEwELDlUYRBIASk5RXFNRTlxMRVkNV2xcV18MVlACBQU"></a><a class="qq" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101355806&redirect_uri=http://home.51cto.com/third-party/qq?reback=http://edu.51cto.com/center/user/index/login-success?sign=47d7UQgCBwQGUwgHCAcNClcLUgFUUlcDBAZcWVRfQ0URXxdOXVZCGgNSW0NXSlpcWBwBUAwQUBMdEwELDlUYRBIASk5RXFNRTlxMRVkNV2xcV18MVlACBQU&state=9abb2856383aa45731072a7baa3e914a&scope=get_user_info,add_share,list_album,add_album,upload_pic,add_topic,add_one_blog,add_weibo,check_page_fans,add_t,add_pic_t,del_t,get_repost_list,get_info,get_other_info,get_fanslist,get_idolist,add_idol,del_idol,get_tenpay_addr"></a><a class="weibo" href="https://api.weibo.com/oauth2/authorize?client_id=2065779340&redirect_uri=http%3A%2F%2Fhome.51cto.com%2Fthird-party%2Fsina&response_type=code&state=47918589d041ba7d28b28c87b45bacdf"></a><a class="renren" href="http://graph.renren.com/oauth/grant?client_id=f1aba159ae20424bb2ecd39018eccd57&redirect_uri=http%3A%2F%2Fhome.51cto.com%2Fthird-party%2Frenren&response_type=code&display=page&state=renren_5b4028aa43cf01.34739415&origin=00000"></a><a class="douban" href="https://www.douban.com/service/auth2/auth?client_id=05f35af5a203986411da10e0e60ac92c&redirect_uri=http%3A%2F%2Fhome.51cto.com%2Fthird-party%2Fdouban&response_type=code&state=b4cd9d093c4c2b277ea0fa615338ea6d"></a></div></div><!--底部菜单--><div class="foot"><a  target="_blank" href="http://www.51cto.com/about/aboutus.html">关于我们</a>|<a  target="_blank" href="http://www.51cto.com/about/zhaopin.html">诚聘英才</a>|<a  target="_blank" href="http://www.51cto.com/about/contactus.html">联系我们</a>|<a  target="_blank" href="http://www.51cto.com/about/history2011.html">网站大事</a>|<a  id = "i4" class="ina popyjdatilfeedback" οnclick="showMenu()">意见反馈</a>|<a  target="_blank" href="http://www.51cto.com/about/map.htm">网站地图</a><br>Copyright © 2005-2018 <a  href="Http://www.51cto.com">51CTO.COM</a> 版权所有</div><!--遮募层--><div id = "M1" class="M hide"></div><!--遮募层结束--><div id = "D1" class="dialog hide"><div class="D-heard">意见反馈<span style="float: right;padding-right: 15px;" οnclick="noshow()">x</span></div><div class="D-body"><p class="p">意见或建议：</p><textarea class="textarea" placeholder="请详细描述意见、问题或建议，2-300字以内"></textarea></div><div class="D-body-foot"><p class="p">联系方式：</p><input type="text" class="input"  placeholder="邮箱/QQ号" /></div><input type="submit" value="提交" class="D-submit" οnclick="noshow()"/></div></div></div><script>function nohide() {var ic1 = document.getElementById("ic1");var ic1_p = ic1.nextElementSibling.nextElementSibling.nextElementSibling;if(ic1.checked){ic1_p.classList.add("hide")}else {ic1_p.classList.remove("hide")}}function showMenu() {var M = document.getElementById("M1");var D = document.getElementById('D1');M.classList.remove("hide");D.classList.remove("hide");}function noshow() {var M = document.getElementById("M1");var D = document.getElementById('D1');M.classList.add("hide");D.classList.add("hide");}</script>
</body>
</html>

注册

后台管理页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyPDSS Admin</title><style>body{margin: 0;padding: 0;font-family: "Arial","Microsoft YaHei","微软雅黑";font-size: 12px;line-height: 24px;background: #f8f8f8;overflow-y: scroll;}h1, h2, h3, form, img, ul, ol, li, dl, dt, dd, div, span, p {padding: 0;margin: 0;border: 0;font-style: normal;font-weight: normal;}.D{border: 1px solid #cccccc;
            height: 235px;width: 315px;margin: 45px auto;padding: 20px;border-radius: 5px;}.D h2{font-size: 32px;line-height: 50px;font-weight: bold;margin-bottom: 10px;}.D input{display: block;height: auto;width: 250px;margin-bottom: 25px;padding: 10px 25px 10px 10px;border-radius: 5px;border: 1px solid #cccccc;font-size: 16px;}.D-submit{color: #fff;background-color: #006dcc;
            display: block;text-align: center;line-height: 20px;font-weight: bold;}a{text-decoration: none;}</style>
</head>
<body><div class="D"><h2>Please sign in </h2><input type="text" placeholder="admin ID"/><input type="text" placeholder="password"/><a href="后台管理.html"><input  type="submit" value="Sign in" class="D-submit" style="height: 45px;width: 95px;padding-left: 15px"/></a></div>
</body>
</html>

登录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyPDSS Admin</title><style>.hide{display: none;}body{margin: 0;padding: 0;font-family: "Arial","Microsoft YaHei","微软雅黑";font-size: 12px;line-height: 24px;background: #f8f8f8;overflow-y: scroll;}h1, h2, h3, form, img, ul, ol, li, dl, dt, dd, div, span, p {padding: 0;margin: 0;border: 0;font-style: normal;font-weight: normal;}.heard{height: 40px;width: 100%;background-color: #1b1b1b;
            position: fixed;top: 0;}.heard h2{float: left;color: #999999;font-size: 20px;padding: 10px;}.heard h3{float: left;color: #999999;font-size: 15px;padding: 10px;}.heard a{display: block;float: right;font-size: 15px;padding: 10px;color: #999999;
        }a{text-decoration: none;}.heard a:hover{color: #3babf7;
        }.body-left{float: left;height: 100%;width: 200px;border: 1px solid #e3e3e3;
            padding: 15px;background-color: #f5f5f5;border-radius: 5px;}.body-left dt{/*background-color: #3babf7;*/color: #3babf7;font-size: 16px;font-weight: bold;width: 150px;line-height: 25px;margin: 10px auto;}.body-left dd{/*background-color: #3babf7;*/font-size: 15px;font-weight: bold;width: 150px;}.body-left a{color: #969696;padding-left: 55px;}.body-left dd a:hover{color: brown;}.body-right{/*border: 1px solid red;*/height: 100%;margin: 0 280px auto;width: 1200px;font-size: 15px;color: #333333;
        }.change{background-color: #f5f5f5;border-left: 1px solid #ddd;border-right: 1px solid #ddd;border-top: 1px solid #ddd;border-radius: 5px;color: #3babf7;
        }.body-right li{display: inline-block;line-height: 38px;text-align: center;height: 38px;width: 100px;margin-bottom: -1px;}.body-right ul{float: left;border-bottom: 1px solid #ddd;list-style: none;width: 100%;margin-bottom: 20px;border-radius: 5px;}.input-text{height: 25px;width: 350px;padding: 5px;border-radius: 5px;border: 1px solid #dddddd;max-font-size: 15;}.input-button{height: 35px;width: 66px;margin-left: -5px;}.select-ul li:hover{color: brown;}table{display: table;border: 1px solid #dddddd;
            height: 540px;width: 120%;border-spacing: 0;border-radius: 5px;}table tbody{width: 100%;}table thead{width: 100%;}table th{border-right: 1px solid #dddddd;border-bottom: 1px solid #dddddd;font-size: 15px;height: 50px;width: 60px;}table td{border-right: 1px solid #dddddd;border-bottom: 1px solid #dddddd;text-align: center;}td a{color: #3babf7
        }.check-button{height: 40px;width: 80px;margin-right: 10px;}.top{position: fixed;right: 0;height: 50px;width: 50px;bottom: 0;}</style>
</head>
<body><!--头部标题栏--><div class="heard" ><div style="width: 90%;height: 100%;margin: 0 auto"><h2>MyPDSS-管理平台</h2><div style="float: right;width: 180px"><h3>欢迎 测试管理员</h3><a href="登录.html" >退出</a></div></div></div><!--内容--><div style="height: 1000px;margin-top: 65px;margin-left: 45px"><!--左边菜单内容--><div class="body-left"><dl><dt id = "i1" οnclick="showMenu('i1')">订单管理</dt><div><dd><a href="">订单列表</a></dd><dd><a>退款列表</a></dd><dd><a>发货列表</a></dd></div><dt id = "i2" οnclick="showMenu('i2')">轮播图管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">首页轮播图</a></dd><dd><a>添加轮播图</a></dd></div><dt id = "i3" οnclick="showMenu('i3')">产品管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">产品列表</a></dd><dd><a>添加产品</a></dd><dd><a>共享产品库</a></dd></div><dt id = "i4" οnclick="showMenu('i4')">类目管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">类目列表</a></dd><dd><a>添加类目</a></dd><dd><a>列表缓存</a></dd></div><dt id = "i5" οnclick="showMenu('i5')">活动管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">活动列表</a></dd><dd><a>添加活动</a></dd></div><dt id = "i6" οnclick="showMenu('i6')">仓库管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">仓库列表</a></dd><dd><a>添加仓库</a></dd><dd><a>商品库存详情</a></dd></div><dt id = "i7" οnclick="showMenu('i7')">用户管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">用户列表</a></dd><dd><a>提现管理</a></dd><dd><a>发放奖励</a></dd></div><dt id = "i8" οnclick="showMenu('i8')">系统设置</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">系统列表</a></dd><dd><a>账号权限列表</a></dd></div><dt id = "i9" οnclick="showMenu('i9')">商城管理</dt><div><dd><a href="http://mtest.azarila.cn/mypdss-admin/order/list.action">商城基本配置</a></dd><dd><a>首页展示</a></dd><dd><a>常见问题</a></dd></div></dl></div><!--右边详情内容--><div class="body-right"><!--详情标题--><div style="height: 38px;"><ul><li class="change" id="l1" οnclick="changex('l1')" ><a>待发货</a></li><li οnclick="changex('l2')" id = 'l2' ><a>已发货</a></li><li οnclick="changex('l3')" id = 'l3' ><a>已完成</a></li><li οnclick="changex('l4')" id = 'l4' ><a>全部</a></li></ul></div><!--搜索--><div style="height: 38px;margin: 40px auto"><input type="text" class="input-text"/><div style="display: inline-block"><input type="button"  class="input-button" value="搜索" οnclick="show1()" id = 'b1'/><ul class="select-ul hide"><li><a>订单ID搜索</a></li><li><a>手机号搜索</a></li><li><a>用户ID搜索</a></li></ul></div></div><!--全选反选框--><div style="height: 40px;margin-bottom: 10px;"><input type="button" value="全选" class="check-button" οnclick="check_all()" id = "c1"><input type="button" value="反选" class="check-button" οnclick="is_check()" id = 'c2'><input type="button" value="取消" class="check-button" οnclick="no_check()" id = 'c3'></div><!--订单列表--><table ><thead><tr><th></th><th>订单ID</th><th>订单编号</th><th>用户名</th><th>用户ID</th><th>状态</th><th>总金额</th><th>微信支付</th><th>余额支付</th><th>红包</th><th>运费</th><th>联系人</th><th>手机号</th><th>地址</th><th>购买时间</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a>详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr><tr><td><input type="checkbox"/></td><td>254615</td><td><a>20171221254615</a></td><td>花生</td><td>1541509</td><td>已支付</td><td>398.0</td><td>0.0</td><td>180.0</td><td>218.0</td><td>0.0</td><td>尹丹璐</td><td>18949945501</td><td>上海市上海市闵行区中春路8923号欧莱雅商务中心B308</td><td>2017-12-21 14:00:17</td><td><a >详情</a><br/><a>修改收货信息</a></td></tr></tbody></table></div></div><!--返回顶部栏--><div class="top"><a href="#top"><img src="picture/index.png" style="height: 50px;width: 50px;background-color: #969696;border-radius: 5px"></a></div><script>function showMenu(num) {var dt_id = document.getElementById(num);var dl = dt_id.parentElement;var div_list = dl.getElementsByTagName('div');for(var i=0;i<div_list.length;i++){var current = div_list[i];current.classList.add('hide')}dt_id.nextElementSibling.classList.remove('hide')}function changex(num) {var l1 = document.getElementById(num);var ul = l1.parentElement;var l1_list = ul.children;for (var i=0;i<l1_list.length;i++){var current = l1_list[i];current.classList.remove('change')}l1.classList.add('change')}function show1() {var button = document.getElementById('b1');var button_ul = button.nextElementSibling;if(button_ul.classList[1]=== 'hide'){console.log(button_ul.classList[1]);button_ul.classList.remove('hide')}else {button_ul.classList.add('hide')}}function check_all() {var c_input = document.getElementById('c1');var t_body = c_input.parentElement.nextElementSibling.getElementsByTagName('tbody');// 遍历出所有tbody标签for(var x=0;x<t_body.length;x++){var tbody = t_body[x];}// 遍历出所有tbody标签下的tr标签和checkbox标签var tr_list = tbody.getElementsByTagName('tr');for(var i=0;i<tr_list.length;i++){var current = tr_list[i];var checkbox = current.children[0].children[0];checkbox.checked = true;   //在所有checkbox标签上打上对勾}}function no_check() {var c_input = document.getElementById('c3');var t_body = c_input.parentElement.nextElementSibling.getElementsByTagName('tbody');// 遍历出所有tbody标签for(var x=0;x<t_body.length;x++){var tbody = t_body[x];}// 遍历出所有tbody标签下的tr标签和checkbox标签var tr_list = tbody.getElementsByTagName('tr');for(var i=0;i<tr_list.length;i++){var current = tr_list[i];var checkbox = current.children[0].children[0];checkbox.checked = false;   //在所有checkbox标签上消除对勾}}function is_check() {var c_input = document.getElementById('c2');var t_body = c_input.parentElement.nextElementSibling.getElementsByTagName('tbody');// 遍历出所有tbody标签for(var x=0;x<t_body.length;x++){var tbody = t_body[x];}// 遍历出所有tbody标签下的tr标签和checkbox标签var tr_list = tbody.getElementsByTagName('tr');for(var i=0;i<tr_list.length;i++){var current = tr_list[i];var checkbox = current.children[0].children[0];if(checkbox.checked){checkbox.checked = false;   //在所有checkbox标签上消除对勾}else{checkbox.checked = true;   //在所有checkbox标签上打上对勾}}}</script>
</body>
</html>

后台管理

三、效果图

登录、注册页面

后台管理

转载于:https://www.cnblogs.com/gaodi2345/p/11412854.html

登录、注册、后台管理页面（动态）相关推荐

  1. 老男孩Day16作业：登录、注册、后台管理页面（动态）

    一.作业需求:1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮)2.老男孩登录.注册页面二.博客地址:https://www.cnblogs.com/catepython/p/93063 ...

  2. bootstrap搭建后台管理页面

    bootstrap搭建后台管理页面 管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...

  3. Vue后台管理页面总体结构及主要功能设计

    后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密.退出菜单.中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局.其中导航菜单可以用el-menu配 ...

  4. Django admin后台管理页面的常用设置

    Django admin后台管理页面的常用设置 选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...

  5. 二基于Django 简单后台管理页面

    <1> 整个后台页面布局项目基于python的Django框架进行开发 ①实现用户登录 ②实现用户对自己数据的增删改查 (1)在app cmdb的models.py下创建用户数据表:用户表 ...

  6. 使用 妹子UI 开发后台管理页面

    使用 Amaze UI 开发漂亮的后台管理页面,管理端登录页面.管理端列表页面.管理端保存页面. 页面布局样式使用固定定位和flex实现. 创作时间:2022年10月9日09:21:36 登录页面效果 ...

  7. 后台管理页面布局（左侧导航长度根据右侧内容无限延伸）

    2019独角兽企业重金招聘Python工程师标准>>>     如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...

  8. 后台管理页面基本布局方式

    经典页面布局 简易后台管理页面布局 1 左边菜单栏固定 2 header固定高度(宽度自适应) 3 主体统计列表(宽度自适应) 代码如下 html <div class="main&q ...

  9. Linux下RabbitMq的安装以及后台管理页面的安装

    安装: 1.下载安装包,可以去github找对应的rpm文件,也可以从rabbitmq · GitCode获取,注意erlang和rabbitmq需要对应版本否则会出现版本异常报错,可以从Rabbit ...

最新文章

  1. java 创建 HMAC 签名
  2. ML之xgboost：利用xgboost算法(结合sklearn)训练mushroom蘑菇数据集(22+1,6513+1611)来预测蘑菇是否毒性(二分类预测)
  3. mysql contains函数_多属性、多分类MySQL模式设计
  4. Python3需要安装的MySQL库是mysqlclient
  5. 创建型模式—原型模式
  6. linux3.0-内核自带led驱动移植
  7. Tensorflow教程： tf.Variable() 和tf.get_variable()
  8. 2020年软考信息安全工程师考试学习资料包
  9. java实现最小二乘法
  10. Android按back后执行过程,安卓app测试获取接口返回数据，然后处理数据，放在一个button点击事件里面 执行顺序有问题？无法获取数据？...
  11. 作业四: 结对编程项目---四则运算
  12. mysql 查询递归自身,mysql 递归查新
  13. PHP 9: 表达式
  14. 【工具使用】apizza和postman中post请求下form-data、x-www-form-urlencoded、raw、binary的区别
  15. kaldi_源码笔记 thchs-30_data_prep
  16. Lcb小粉书隐私政策
  17. 我和王争学设计模式｜抽象工厂
  18. C++STL算法 search你是我的半截的诗
  19. 输入在第一行中给出一个正整数n（1）。第二行输入n个整数，用空格分开。在一行中输出最大值及最大值的最小下标，中间用一个空格分开。
  20. 计算机系统分盘作用,电脑分盘有什么好处,要不要重装系统

热门文章

  1. C++中char*, char[], char*[], char**的含义
  2. 哈工大刘宏伟《计算机组成原理》课程框架总结
  3. 【模式匹配】之——多模匹配 Wu-Manber算法
  4. Unity3D简单的UI系统
  5. 如何导出/导入PDF中的书签——FreePic2Pdf
  6. Onvif协议控制球机云台
  7. 如何修改HOST文件 映射
  8. mysql按照时间段还原_mysqlbinlog恢复单个库特定时间段内的记录
  9. 简易在线留言板（上）——树洞留言板
  10. 美国大学特别重视的批判性思维，是如何培养出来的？