登录、注册、后台管理页面（动态）


 
一、作业需求：
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" onclick="change()">你也可以使用以下账号登录</p>
<p id = "i2" class="pdp" onclick="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" onclick="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;" onclick="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" onclick="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" onclick="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="" onclick="nohide()"/>
<label for = "ic1" onclick="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" onclick="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;" onclick="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" onclick="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" onclick="showMenu('i1')">订单管理</dt>
<div>
<dd><a href="">订单列表</a></dd>
<dd><a>退款列表</a></dd>
<dd><a>发货列表</a></dd>
</div>
<dt id = "i2" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="changex('l1')" >
<a>待发货</a>
</li>
<li onclick="changex('l2')" id = 'l2' ><a>已发货</a></li>
<li onclick="changex('l3')" id = 'l3' ><a>已完成</a></li>
<li onclick="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="搜索" onclick="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" onclick="check_all()" id = "c1">
<input type="button" value="反选" class="check-button" onclick="is_check()" id = 'c2'>
<input type="button" value="取消" class="check-button" onclick="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>
后台管理

 

三、效果图

登录、注册页面

 

 

后台管理

 
 
 

 

posted @ 2019-08-26 15:34  黄金国的大象  阅读(1059)  评论(0)  编辑  收藏  举报