python第八十四天－－－十五周作业
后台管理页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理页面</title> <style type="text/css">
/*顶部菜单*/
.pag-head{
position: fixed;
z-index: 7;
top: 0;
left: 0;
right: 0;
height: 48px;
width: 100%;
background: #005EA7; }
.meun_top{
height: 48px;
line-height: 48px;
width: 960px;
/*border: 1px solid red;*/
margin: 0 auto;
}
/*顶部菜单组*/
.meuns_top{
text-decoration: none;
color: white;
padding: 0px 10px 0px 10px;
display: inline-block;
}
.meuns_top:hover{
background-color: rgba(64,119,203,0.6);
} .clear_div{
clear: both;
}
/*顶部菜单结束*/ /*下方大框*/
.pag-cent{
margin-top: 50px; } /*左侧菜单*/
.left-meun{
z-index: 8;
position: fixed;
top: 50px;
left: 55px;
}
.meuns{ background-color: #005EA7;
height: 45px;
width:150px;
color:white;
line-height: 45px;
text-align: center;
}
.meuns:hover{
background-color: rgba(64,119,203,0.6);
}
.hide{
display: none;
}
.content{
margin-left: 65%;
}
.item{
width:150px;
}
/*左侧菜单结束*/ /*下方右边内容块*/
.big-content{
height: 1000px;
border: 1px solid green;
} .content_right{
margin: 0 auto;
height: 800px;
width: 960px;
border: 1px solid blueviolet; } .hosts{
margin-left: 30px;
margin-top: 20px;
}
table{
border-spacing: 1px;
margin-top: 8px;
}
/*遮罩层*/
.c1{
position: fixed;
z-index: 9;
/*打开多层样式 fixed模式 定义层级为9*/
top:0;
right:0;
left:0;
bottom:0;
/*上面表示全覆盖*/
background-color: black;
/*上面为背景色 为黑 下面为透明度为50%*/
opacity: 0.5;
}
.c2{
position: fixed;
z-index: 10;
/*打开多层样式 fixed模式 定义层级为9*/ width:400px;
height: 300px;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
background-color: white; }
.z-z{
width: 230px;
height: 120px;
margin-top: 90px;
margin-left: 90px;
}
hr{
width: 230px;
}
#cre{
margin-left: 70px;
}
.heds{
/*默认不显示*/
display: none;
} /*下方右边内容块结束*/ /*返回顶部*/
.pa-top{
width: 68px;
height: 48px;
position: fixed;
right: 25px;
bottom: 25px;
background-image: url(img/top.png);
background-position: -425px -270px ; }
</style>
</head>
<body style="margin: 0">
<!--顶部菜单-->
<div class="pag-head">
<div class="meun_top">
<a href="" class="meuns_top">顶部菜单一</a>
<a href="" class="meuns_top">顶部菜单二</a>
<a href="" class="meuns_top">顶部菜单三</a>
<a href="" class="meuns_top">顶部菜单四</a>
<a href="" class="meuns_top">顶部菜单五</a>
<a href="" class="meuns_top">顶部菜单六</a>
</div>
<div class="clear_div"> </div> </div>
<!--下方大框-->
<div class="pag-cent"> <!--左边菜单-->
<div class="left-meun">
<div class="item">
<div id="i1" onclick="changemenu('i1')" class="meuns">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div> <div class="item">
<div id="i2" onclick="changemenu('i2')" class="meuns">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div> <div class="item">
<div id="i3" onclick="changemenu('i3')" class="meuns">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div> <div class="item">
<div id="i4" onclick="changemenu('i4')" class="meuns">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
<div>内容4</div> </div> </div> </div> <!--右边内容-->
<div class="big-content">
<div class="content_right">
<div class="hosts">
<input type="button" value="添加" onclick="showmod()">
<input type="button" value="全选" onclick="Chooseall()">
<input type="button" value="取消" onclick="cancleall()">
<input type="button" value="返选" onclick="Reverseall()"> <table border="1" id="tab">
<thead>
<tr>
<th>选择</th>
<th>主机</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb"> <tr>
<td><input type="checkbox"></td>
<td>10.10.12.1</td>
<td>1000</td>
<tr>
<td><input type="checkbox"></td>
<td>10.10.12.2</td>
<td>1002</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>10.10.12.3</td>
<td>1003</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--遮罩层-->
<div class="c1 heds" id="z-cent"></div>
<!--对话框-->
<div class="c2 heds" id="z-first">
<div class="z-z">
<lable>主 机：</lable>
<input type="text" id="users"><br /><br />
<lable>I P：</lable>
<input type="text" id="ip_add"><br />
<hr />
<input type="button" name="" id="cre" onclick="cresc()" value="确定" >
<input type="button" onclick="hidemod()" value="关闭">
</div> </div> </div> </div> <div class="pa-top" onclick="topy();"></div> <script type="text/javascript">
//左侧菜单js 点击函数
function changemenu(id){
var curr_header=document.getElementById(id)//获取当前的元素对象
var itme_list=curr_header.parentElement.parentElement.children;//取得当前的上上级的所有子元素
for (var i=0;i<itme_list.length;i++){
var curr_list=itme_list[i];
curr_list.children[1].classList.add('hide')//加上关闭
}
curr_header.nextElementSibling.classList.remove('hide')//移除关闭
}
//返回顶部
function topy(){
document.body.scrollTop=0;
} //显示对话框
function showmod(){
document.getElementById('z-cent').classList.remove('heds');//移除类名 样式
document.getElementById('z-first').classList.remove('heds'); }
//关闭对话框
function hidemod(){
document.getElementById('z-cent').classList.add('heds');//添加 类名
document.getElementById('z-first').classList.add('heds');
}
//添加主机 IP
function cresc(){
var tab=document.getElementById('tab');
var user=document.getElementById('users').value
var ip=document.getElementById('ip_add').value
var tradd=tab.insertRow(4)
tradd.style.background='green'
if (user=='' || ip==''){
alert('主机或用户名不能为空')
return 0
}
tradd.innerHTML='<td><input type="checkbox"></td><td>'+user+'</td><td>'+ip+'</td>'
hidemod()
}
//全选
function Chooseall(){
var tbody=document.getElementById('tb');
var tr_list=tbody.children;//取所有子元素的列表
for (var i=0;i<tr_list.length;i++){
var curr=tr_list[i];//取当前子元素的子元素列表
var checkbox=curr.children[0].children[0];
checkbox.checked=true//打上勾
}
} //取消
function cancleall() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;//取所有子元素的列表
for (var i = 0; i < tr_list.length; i++) {
var curr = tr_list[i];//取当前子元素的子元素列表
var checkbox = curr.children[0].children[0];
checkbox.checked = false;//取消勾
}
}
//反选
function Reverseall() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;//取所有子元素的列表
for (var i = 0; i < tr_list.length; i++) {
var curr = tr_list[i];//取当前子元素的子元素列表
var checkbox = curr.children[0].children[0];
if (checkbox.checked){
checkbox.checked = false;//取消勾
}else {
checkbox.checked = true;//打上勾
} }
}
</script> </body>
</html>
商城页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*顶部菜单*/
.top{
background-color: #000000;
color: #DDDDDD;
}
.top-meun{
margin: 0 auto;
width: 1100px;
height: 32px;
}
.top-meun a,.top-meun span{
font-size: 12px;
display: inline-block;
line-height: 32px;
padding-right: 10px;
}
.top-meun-left{
float: left;
}
.top-meun-right{
float: right;
}
.top-meun-right span{
color: red;
}
/*a标签 去下划线*/
a {
text-decoration: none;
color: #DDDDDD;
}
/*返回顶部*/
.top-s{
position: fixed;
top: 160px;
right: 250px;
width: 60px;
height: 150px;
/*border: 1px solid darkred;*/
} ul{
list-style-type: none;
} #jcSide li a{
display: inline-block;
list-style-type: none; background-color: #c41240;
width: 45px;
height: 45px;
margin-left: 5px;
margin-top: 5px;
text-align: center; }
#jcSide li{ margin: 5px;
width: 55px;
height: 55px;
background-color:#c41240 ;
}
#jcSide li a:hover{
background-color: white;
color: #c41240;
}
#jcSide li span{
font-weight: bolder;
}
/*上方LOGO*/ .logo-big{
height: 93px;
background-image:url(img/v_index_bg.png) ;
}
.logo{
margin: 0 auto;
width: 1100px;
position: relative;
}
.logo-img,.search{
float: left;
}
.search{
position: absolute;
left: 185px;
top: 18px;
border: 1px solid red;
height: 45px; }
.search select,#search-id{
display: inline-block;
line-height: 45px;
width: 100px;
height: 45px;
padding: 0 0 ;
margin: 0 0;
}
/*搜索框 */
#search-id{
width: 400px;
height: 41px;
}
.img-small{
position: absolute;
top: 15px;
right: 10px;
height: 20px;
width: 20px;
background-image: url(img/sprite-photo-search.png);
}
.img-big{
background-color: #e20052;
position: absolute;
position: relative;
top: 18px;
left: 700px;
width: 47px;
height: 47px;
} #a-img{
position: absolute;
background-image: url(img/v_hd_bg1.png);
top: 1px;
left: 14px;
background-position: 0px -60px;
background-repeat: no-repeat;
width: 50px;
height: 50px;
}
.hot{
font-size: 12px;
position: absolute;
top: 32px;
left: 758px;
color: #646363;
}
.hot a{
color: #474545;
} /*中间菜单*/
.meun_centr{
background-color: #740d92;
}
.meun_centr-big{
margin: 0 auto;
width: 1100px;
height: 40px;
}
.meun_centr-big a{
display: inline-block;
line-height: 40px;
font-size: 13px;
font-weight: bolder;
padding:0 10px 0 10px ;
text-align: center;
}
.meun_centr-big a:hover{
background-color: #c41240;
} .centr-left{
float: left;
}
.centr-right{
float: right;
} /*中间菜单下方*/
.meun-down{
height: 15px;
background-color: #c41240;
}
/*中间内容*/
.content{ background-image: url(img/v_index_bg.png);
}
.cont-cent ,.footer-noe,.mag,.down{
margin: 0 auto;
width: 1100px;
/*border: 2px solid #740D92;*/
} .cont-cent-left{
float: left;
width: 820px;
/*border: 1px dashed;*/
}
.new{
height: 82px;
}
.list-li, .list ul,.list{
margin: 0 0;
padding: 0 0;
} .list-li{
margin: 0 0;
padding: 0 0;
width: 820px;
height: 230px;
background-color:gainsboro; }
.list{
margin-bottom: 10px;
}
/*.list-li:hover{
border: 2px solid #C41240;
}*/
.a-big{
position: relative;
display: block;
width: 820px;
height: 230px;
background-color: black;
}
.a-big:hover{
border: 4px solid #C41240;
background-color: #C41240;
} .shop_name,.time,.left_shadow{
position: absolute;
}
.shop_name{
display: inline-block;
line-height: 30px;
width: 230px;
bottom: 0px;
left: 0px;
color: white;
background-color: black;
font-size: 14px;
text-align: center;
}
.shop_name:hover{
background-color: #C41240;
} .left_shadow{
left: 5px;
top: 5px;
text-align: center;
} .time{
width: 590px;
height: 30px;
right: 0;
bottom: 0px;
background-color: white;
text-align: left;
line-height: 30px;
font-size: 12px;
color: #000000;
}
.sale{
display: inline-block;
width: 220px;
height: 20px;
background-color: white;
color: red;
font-size: 14px;
padding-top: 80px; }
.shop_ad{
text-align: center;
margin: 0 auto;
font-size: 12px;
color: #696969;
}
/*右边内容*/
.cont-cent-right{
float: right;
width: 270px;
height: 960px;
/*border: 1px dashed;*/
} .gif{
margin-top: 82px;
width: 220px;
height: 200px;
} /*底部开始*/
.footer-noe-right{
float: right;
display: inline-block;
line-height: 76px;
height: 66px;
width: 235px; }
.foot-span{
float: left;
display: inline-block;
height: 52px;
width: 138px;
/*margin-top: 15px;
margin-left: 15px;*/
margin: 15px 15px 15px 15px;
}
#footer-img-4{
background-image: url(img/footer_bg.png);
}
#footer-img-3{
background-image: url(img/footer_bg.png);
background-position-y: -52px;
}
#footer-img-2{
background-image: url(img/footer_bg.png);
background-position-y: -104px;
}
#footer-img-1{
background-image: url(img/footer_bg.png);
background-position-y: -156px;
} footer{
border-top:3px solid red ;
background-color: #fafafa;
border-bottom: 1px solid #DCDCDC;
} /*下方信息*/
.footer_sort{
margin-top: 30px;
width: 154px;
float: left;
text-align: center;
}
.f_title{
padding-left:23px ;
display: inline-block;
text-align: center;
width: 145px;
}
.f_title ul{
width: 145px;
text-align: left;
/*padding-left: 10px;*/
list-style: none;
margin: 0;
}
.f_title ul li{ line-height: 20px;
height: 20px;
}
.f_title ul li a{ } .footer_sort a{
color: black;
font-size: 12px;
} /*最下方底疗*/
.footer_nav a{
margin: 15px;
}
.footer_nav_box a, .footer_nav_box {
color: #8c8c8c;
font-size: 12px;
text-decoration: none;
} .footer_nav_box .footer_nav {
text-align: center;
line-height: 20px;
padding-bottom: 17px;
}
.footer_nav_box .footer_copyright {
line-height: 20px;
text-align: center;
width: 960px;
margin: 0 auto;
} .footer_nav_box{
padding-bottom: 70px;
} /*清除浮动*/
.div_float {
clear: both;
}
</style>
</head>
<body style="margin: 0;">
<!--上方菜单-->
<div class="top">
<div class="top-meun">
<div class="top-meun-left">
<span>欢迎光临当当，</span>
<a href="登陆页面.html">请登陆</a>
<a href="注册页面.html">成为会员</a>
</div>
<div class="top-meun-right">
<a href="#">购物车</a><span>0</span>
<a href="#">我的订单</a>
<a href="#">原创征文</a>
<a href="#"><img src=""/>手机当当</a>
<a href="#">我的当当</a>
<a href="#">企业采购</a>
<a href="#">客户服务</a>
</div> </div>
<div class="div_float"></div>
</div> <!--top返回顶部 -->
<div class="top-s">
<ul id="jcSide">
<li id="back_1"><a href="javascript:;" class="maobackvip" rel="po1">今日<span>最新</span></a></li>
<li id="back_2"><a href="javascript:;" class="maobackvip" rel="po2">最后<span>疯抢</span></a></li>
<li id="back_3"><a href="javascript:;" class="maobackvip" rel="po3">即将<span>开售</span></a></li>
<li onclick="topy()"><a href="javascript:;" class="v_back_top" id="back_to_top"><br /><span>TOP</span></a></li>
</ul> </div>
<!--上方logo-->
<div class="logo-big">
<div class="logo">
<div class="logo-img">
<a href="3"><img src="img/v_logo.png"/></a>
</div>
<div class="search">
<select name="all-meun" >
<option value="#">全部分类</option>
<option value="#">尾品汇</option>
<option value="#">图书</option>
<option value="#">电子书</option>
<option value="#">时尚美妆</option>
<option value="#">玩具</option>
<option value="#">家居日用</option>
</select>
<input type="text" name="" id="search-id" value="图书" />
<span class="img-small"></span>
</div>
<div class="img-big"><a href="" id="a-img"></a></div>
<span class="hot">大家都在搜：
<a href="#" name="hotword" target="_blank">初语</a>
<a href="#" name="hotword" target="_blank">AMII</a>
<a href="#" name="hotword" target="_blank">连衣裙</a>
</span>
</div>
<div class="div_float"></div>
</div> <!--中间的菜单-->
<div class="meun_centr">
<div class="meun_centr-big">
<div class="centr-left">
<a href="#">当当首页</a>
<a href="#">尾品汇</a>
<a href="#">孕婴服饰</a>
<a href="#">家居日用</a>
<a href="#">家具装饰</a>
<a href="#">箱包皮具</a>
<a href="#">手表饰品</a>
<a href="#">运动户外</a>
<a href="#">汽车用品</a>
</div>
<div class="centr-right">
<a href="#">收藏此页</a>
</div> </div>
<div class="div_float"></div>
</div>
<!--中间的菜单下方-->
<div class="meun-down"> </div> <!--中间内容-->
<div class="content">
<div class="cont-cent">
<div class="cont-cent-left">
<div class="new">
<img src="img/jinrizuixin.png"/>
</div> <div class="list" >
<ul>
<li class="list-li">
<a href="#" target="_blank" class="a-big">
<img src="img/177030034604248_1_o.jpg">
<span class="shop_name">七匹狼全场低至2折起</span>
<span class="time">
<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
<span sec="sep">还剩 <span>3</span>天 </span>
</span>
</span>
<span class="left_shadow">
<span class="img_logo">
<img data-original="" src="img/177030034604250_1_o.jpg" style="display: block;">
</span>
<span class="shop_ad">七匹狼，中国知名品牌！</span><br />
<span class="sale"></span>
</span>
<span class="red_circle" style="display: none;"></span>
</a>
</li>
</ul>
</div> <div class="list" >
<ul>
<li class="list-li">
<a href="#" target="_blank" class="a-big">
<img src="img/182870031157919_1_o.jpg">
<span class="shop_name">全场低至2折起</span>
<span class="time">
<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
<span sec="sep">还剩 <span>2</span>天 </span>
</span>
</span>
<span class="left_shadow">
<span class="img_logo">
<img data-original="" src="img/182870031157922_1_o.jpg" style="display: block;">
</span>
<span class="shop_ad">喜欢自己 表现到底</span><br /> <span class="sale"></span>
</span>
<span class="red_circle" style="display: none;"></span>
</a>
</li>
</ul>
</div> <div class="list" >
<ul>
<li class="list-li">
<a href="#" target="_blank" class="a-big">
<img src="img/184840026912612_1_o.jpg">
<span class="shop_name">全场低至2折起</span>
<span class="time">
<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
<span sec="sep">还剩 <span>2</span>天 </span>
</span>
</span>
<span class="left_shadow">
<span class="img_logo">
<img data-original="" src="img/184840026912614_1_o.jpg" style="display: block;">
</span>
<span class="shop_ad">喜欢自己 表现到底</span><br />
<span class="sale">满200减120</span>
</span>
<span class="red_circle" style="display: none;"></span>
</a>
</li>
</ul>
</div> <div class="list" >
<ul>
<li class="list-li">
<a href="#" target="_blank" class="a-big">
<img src="img/177030034604248_1_o.jpg">
<span class="shop_name">七匹狼全场低至2折起</span>
<span class="time">
<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
<span sec="sep">还剩 <span>3</span>天 </span>
</span>
</span>
<span class="left_shadow">
<span class="img_logo">
<img data-original="" src="img/177030034604250_1_o.jpg" style="display: block;">
</span>
<span class="shop_ad">七匹狼，中国知名品牌！</span><br />
<span class="sale"></span>
</span>
<span class="red_circle" style="display: none;"></span>
</a>
</li>
</ul>
</div> <div class="list" >
<ul>
<li class="list-li">
<a href="#" target="_blank" class="a-big">
<img src="img/182870031157919_1_o.jpg">
<span class="shop_name">全场低至2折起</span>
<span class="time">
<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
<span sec="sep">还剩 <span>2</span>天 </span>
</span>
</span>
<span class="left_shadow">
<span class="img_logo">
<img data-original="" src="img/182870031157922_1_o.jpg" style="display: block;">
</span>
<span class="shop_ad">喜欢自己 表现到底</span><br /> <span class="sale"></span>
</span>
<span class="red_circle" style="display: none;"></span>
</a>
</li>
</ul>
</div> <div class="list" >
<ul>
<li class="list-li">
<a href="#" target="_blank" class="a-big">
<img src="img/184840026912612_1_o.jpg">
<span class="shop_name">全场低至2折起</span>
<span class="time">
<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
<span sec="sep">还剩 <span>2</span>天 </span>
</span>
</span>
<span class="left_shadow">
<span class="img_logo">
<img data-original="" src="img/184840026912614_1_o.jpg" style="display: block;">
</span>
<span class="shop_ad">喜欢自己 表现到底</span><br />
<span class="sale">满200减120</span>
</span>
<span class="red_circle" style="display: none;"></span>
</a>
</li>
</ul>
</div> </div> <div class="cont-cent-right">
<div class="gif">
<img src="img/slogan.gif.gif"/>
</div>
<img src="img/tushu.png"/>
<img src="img/tongshutemai.jpg"/>
<img src="img/tushu211_1030.jpg"/>
<div class="div-right">
<div class="">
<img src="img/jijiangkaish (1).png"/>
</div> </div>
</div> </div>
<div class="div_float"></div>
</div> <!--底部-->
<footer>
<div class="footer-noe">
<a class="footer-noe-right" href="#">
<span id="footer-img-1" class="foot-span"></span>
</a>
<a class="footer-noe-right" href="#">
<span id="footer-img-2" class="foot-span"></span>
</a>
<a class="footer-noe-right" href="#">
<span id="footer-img-3" class="foot-span"></span>
</a>
<a class="footer-noe-right" href="#">
<span id="footer-img-4" class="foot-span"></span>
</a>
</div>
<div class="div_float"></div>
</footer>
<!--下方信息块-->
<div class="shop-wit">
<div class="mag"> <div class="public_footer_new">
<div class="footer_sort footer_nvice">
<span class="f_title">购物指南</span>
<ul>
<li><a name="foot_gouwu" href="#" target="_blank" class="main" rel="nofollow">购物流程</a></li>
<li><a name="foot_jifen" href="#" target="_blank" rel="nofollow">发票制度</a></li>
<li><a name="foot_fapiao" href="#" target="_blank" rel="nofollow">账户管理</a></li>
<li><a name="foot_mydangdang" href="#" target="_blank" rel="nofollow">会员优惠</a></li>
</ul>
</div>
<div class="footer_sort footer_pay">
<span class="f_title">支付方式</span>
<ul>
<li><a name="foot_tuihuanhuoliucheng" href="#" target="_blank" rel="nofollow">货到付款</a></li>
<li><a name="foot_tuihuanhuo" href="#" target="_blank" rel="nofollow">网上支付</a></li>
<li><a name="foot_huanhuo" href="#" target="_blank" rel="nofollow">礼品卡支付</a></li>
<li><a name="foot_tuihuo" href="#" target="_blank" rel="nofollow">银行转帐</a></li>
</ul>
</div>
<div class="footer_sort footer_characteristic">
<span class="f_title">订单服务</span>
<ul>
<li><a name="foot_jifen" href="#" target="_blank" class="main" rel="nofollow">订单配送查询</a></li>
<li><a name="foot_lipinka" href="#" target="_blank" rel="nofollow">订单状态说明</a></li>
<li><a name="foot_ershoushu" href="#r" target="_blank" rel="nofollow">自助取消订单</a></li>
<li><a name="foot_shouji" href="#" target="_blank" rel="nofollow">自助修改订单</a></li>
</ul>
</div>
<div class="footer_sort footer_distribution">
<span class="f_title">配送方式</span>
<ul>
<li><a name="foot_huodaofukuan" href="#" target="_blank" class="main" rel="nofollow">配送范围及免邮标准</a></li>
<li><a name="foot_yinhangzhuanzhang" href="#" target="_blank" class="main" rel="nofollow">当日递/次日达</a></li>
<li><a name="foot_dangdanglijuan" href="#" target="_blank" rel="nofollow">订单自提</a></li>
<li><a name="foot_dangdanglijuan" href="#" target="_blank" rel="nofollow">验货与签收</a></li>
</ul>
</div>
<div class="footer_sort footer_help">
<span class="f_title">退换货</span>
<ul>
<li><a name="foot_faq" href="#" target="_blank" rel="nofollow">退换货政策</a></li>
<li><a name="foot_zhaohuimima" href="#" target="_blank" rel="nofollow">自助申请退换货</a></li>
<li><a name="foot_huikuandan" href="#" target="_blank" rel="nofollow">退换货进度查询</a></li>
<li><a name="foot_tuiding" href="#" target="_blank" rel="nofollow">退款方式和时间</a></li>
</ul>
</div>
<div class="footer_sort footer_shangjia">
<span class="f_title">商家服务</span>
<ul> <li><a name="foot_zhaohuimima" href="#" target="_blank" rel="nofollow">商家中心</a></li>
<li><a name="foot_huikuandan" href="#" target="_blank" rel="nofollow">运营服务</a></li>
<li><a name="foot_tuiding" href="#" target="_blank" rel="nofollow">加入尾品汇</a></li>
</ul>
</div>
</div> </div>
<div class="div_float"></div>
</div> <!--最底部-->
<div class="footer-down">
<!--<div class="down">-->
<div class="footer_nav_box">
<div class="footer_nav">
<a href="#" target="_blank" rel="nofollow">公司简介</a>
<span class="sep">|</span>
<a href="#" target="_blank">Investor Relations</a>
<span class="sep">|</span>
<a href="#" target="_blank">诚聘英才</a>
<span class="sep">|</span>
<a href="#" target="_blank">网站联盟</a>
<span class="sep">|</span>
<a href="#" target="_blank">当当招商</a>
<span class="sep">|</span>
<a href="#" target="_blank" rel="nofollow">机构销售</a>
<span class="sep">|</span>
<a href="#" target="_blank">手机当当</a>
<span class="sep">|</span>
<a href="#" target="_blank">官方 Blog</a>
<span class="sep">|</span>
<a href="#" target="_blank" >热词搜索</a>
</div> <div class="footer_copyright">
<span>Copyright (C) 当当网 2004-2017, All Rights Reserved</span>
<a href="#" target="_blank" class="footer_img" rel="nofollow"><img src="img/validate.gif" target="_blank" rel="nofollow">京ICP证041189号</a>
<span>出版物经营许可证 新出发京批字第直0673号</span>
</div> </div> <!--</div>-->
<div class="div_float"></div> </div> <script type="text/javascript">
//返回顶部
function topy(){
document.body.scrollTop=0;
}
</script> </body>
</html>
注册页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> /*顶部菜单*/
.top-meun{
background-color: #DDDDDD;
}
.top-one{
margin: 0 auto;
width: 960px;
height: 32px; }
.top-meun a{
display: inline-block;
line-height: 32px;
font-size: 14px;
padding-right:15px ;
text-decoration: none;
color: dimgray;
}
.top-meun-left{
float: left;
}
.top-meun-right{
float: right;
}
/*logo 框*/ .logo{
padding-top:18px ;
margin: 0 auto;
/*top: 50px;
left: 10px;*/
width: 960px;
height: 80px;
} /*外边大框*/
.oustd{
margin: 0 auto;
width: 960px;
}
/* 注册框*/ .rest{ border: 5px solid #dddddd;
top: 150px;
width: 960px;
height: 600px; } /*左边*/ h2{
margin-top:10px;
}
.rest_left{
padding-left:50px ;
position: relative;
width: 550px;
height: 600px;
border-right: 1px solid blueviolet;
float: left;
}
.rest_left input{
width: 220px;
height: 30px;
padding-right: 35px;
}
span{
color: red; }
.users{
margin-top: 55px;
padding-top:5px ;
clear: both; }
.users_u{
margin:70px 10px;
}
.users_user{
position: relative;
float: left;
width: 300px;
/*border: 1px solid blue;*/
}
.sp{
display: inline-block;
line-height: 30px;
width: 100px;
float: left;
/*border: 3px solid black;*/
}
.sp-1{
height: 30px;
width: 100px;
}
.sp label{
float: right;
} /*验证码*/ #yzm{
float: left;
width: 70px;
height: 30px;
}
#img_yzm a{
float: left;
width: 70px;
height: 30px;
background-image: url(img/view.png);
background-position-x: -25px;
background-position-y: 5px;
margin: 0 0;
padding: 0 0 ; /*display: inline-block;
line-height: 45px;*/
}
.auto_left{
float: left;
font-size: 12px;
padding-right: 15px;
}
#check_left{
display: inline;
width: 15px;
height: 15px;
}
#auto_logo{
color: black;
}
#logoing,.rest-q{
background-color: red; width: 200px;
text-align: center;
display: inline-block;
line-height: 30px; } /*清除浮动*/
.div_float {
clear: both;
} #logoing a,.rest-q a{ text-decoration: none;
color: white;
} /*右边*/
.rest_right{
/*background-repeat: no-repeat;
*/
float: right;
width: 350px;
height: 600px;
/*border: 1px solid red;*/
text-align: center; } .ld-div{
margin-top:50px ;
}
.ld-div span{
color: black;
}
.img-right{
margin-top: 50px;
width: 200px;
border:0;
}
</style>
</head>
<body style="margin: 0;">
<!--顶部菜单-->
<div class="top-meun">
<div class="top-one">
<div class="top-meun-left">
<a href="3">收藏本站</a>
</div>
<div class="top-meun-right">
<a href="登陆页面.html" target="_blank">登陆</a>
<a href="注册页面.html">免费注册</a>
<a href="#">我的订单</a>
<a href="#">VIP会员俱乐部</a>
<a href="#">客户服务</a>
</div> </div>
<div class="div_float"></div> </div> <div class="logo"><a href="#"><img src="img/logo.png"/></a></div> <div class="oustd"> <!--注册框-->
<div class="rest">
<!--左边-->
<div class="rest_left">
<div class="users">
<h2>注册新用户</h2>
</div> <div class="users">
<div class="sp">
<label><span>*</span>用户名：</label>
</div>
<div class="users_user">
<input type="text" name="" id="" value="" />
<samp id="img-user"></samp>
</div>
</div> <div class="users">
<div class="sp">
<label><span>*</span>手机号：</label>
</div>
<div class="users_user">
<input type="text" name="" id="" value="" />
<samp id="img-user"></samp>
</div>
</div> <div class="users" >
<div class="sp">
<label><span>*</span>登陆密码：</label>
</div>
<div class="users_user">
<input type="text" name="" id="" value="" />
<samp id="img-pwd"></samp>
</div>
</div> <div class="users" >
<div class="sp">
<label><span>*</span>确认密码：</label>
</div>
<div class="users_user">
<input type="text" name="" id="" value="" />
<samp id="img-pwd"></samp>
</div>
</div> <div class="users">
<div class="sp">
<label><span>*</span>验证码：</label>
</div>
<div class="users_user" >
<input type="text" name="" id="yzm" value="" />
<span id="img_yzm"><a href=""></a></span>
</div>
</div> <div class="users ">
<div class="sp sp-1">
</div>
<div class="users_user ">
<input type="checkbox" name="" class="auto_left" id="check_left" value="" />
<span class="auto_left" id="auto_logo">我已阅读并同意</span>
<a href="#" class="auto_left"><<用户注册协议>></a>
</div>
</div> <div class="users">
<div class="sp sp-1">
</div>
<div class="users_user" id="logoing" ><a href="#">同意以上协议并注册</a>
</div>
</div> </div>
<!--右边-->
<div class="rest_right">
<div class="ld-div">
<span id="dl">
我已经注册，现在就
</span>
<a href="登陆页面.html" target="_blank">登陆</a>
</div>
<img src="img/right.jpeg" class="img-right" alt="这是一张风景画！" title="好看吗？"/>
</div>
</div> <div class="div_float"></div> </div>
</body>
</html>
登陆页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> /*logo 框*/ .logo{
margin: 0 auto;
top: 50px;
left: 10px;
width: 960px;
height: 80px;
} /*外边大框*/
.oustd{
margin: 0 auto;
width: 960px;
}
/* 登陆框*/ .rest{ border: 5px solid #dddddd;
top: 150px;
width: 960px;
height: 400px;
}
/*左边*/
.rest_left{
/*background-repeat: no-repeat;
*/
float: left;
width: 450px;
height: 400px;
/*border: 1px solid red;*/
text-align: center; }
.rest_left a{
background-image: url(img/left.jpg);
background-repeat: no-repeat;
text-decoration: none;
display: inline-block;
line-height: 315px;
width: 315px;
height: 315px;
margin-top: 45px; /*border: 1px solid green;*/
}
/*右边*/
.rest_right{
position: relative;
width: 505px;
height: 400px;
/*border: 1px solid blueviolet;*/
float: right;
}
.rest_right input{
width: 260px;
height: 30px;
padding-right: 35px;
}
span{
color: red; }
.users{
margin-top: 55px;
padding-top:5px ;
clear: both; }
.users_u{
margin:70px 10px;
}
.users_user{
position: relative;
float: left;
width: 300px;
/*border: 1px solid blue;*/
}
.sp{
display: inline-block;
line-height: 30px;
width: 100px;
float: left;
/*border: 3px solid black;*/
}
.sp-1{
height: 30px;
width: 100px;
}
.sp label{
float: right;
}
/*输入框 小图标*/
#img-user,#img-pwd{
position: absolute;
background-image: url(img/user.jpg);
background-position: -86px -150px;
height: 25px;
width: 25px;
/*border: 1px solid red;*/
right: 5px;
top: 5px;
display: inline-block;
}
#img-pwd{
background-position: -275px -320px;
}
/*验证码*/ #yzm{
float: left;
width: 70px;
height: 30px;
}
#img_yzm a{
float: left;
width: 70px;
height: 30px;
background-image: url(img/view.png);
background-position-x: -25px;
background-position-y: 5px;
margin: 0 0;
padding: 0 0 ; /*display: inline-block;
line-height: 45px;*/
}
.auto_left{
float: left;
font-size: 12px;
padding-right: 15px;
}
#check_left{
display: inline;
width: 15px;
height: 15px;
}
#auto_logo{
color: black;
}
#logoing,.rest-q{
background-color: red; width: 200px;
text-align: center;
display: inline-block;
line-height: 30px; }
/*免费注册*/
.rest-q{
width: 100px;
height: 30px;
background-color: green;
position: absolute;
right: 0;
bottom: 0;
} /**/
.div_float {
clear: both;
}
/*下方*/
.footer{
margin: 0 auto;
top: 560px;
width: 960px;
text-align: center;
} #logoing a,.rest-q a{ text-decoration: none;
color: white;
} </style>
</head>
<body>
<div class="logo"><a href="#"><img src="img/logo.png"/></a></div> <div class="oustd"> <!--注册框-->
<div class="rest">
<!--左边-->
<div class="rest_left">
<a href="#"></a>
</div> <!--右边-->
<div class="rest_right">
<div class="users">
<div class="sp">
<label><span>*</span>用户名：</label>
</div>
<div class="users_user">
<input type="text" name="" id="" value="" />
<samp id="img-user"></samp>
</div>
</div> <div class="users" >
<div class="sp">
<label><span>*</span>密码：</label>
</div>
<div class="users_user">
<input type="text" name="" id="" value="" />
<samp id="img-pwd"></samp>
</div>
</div> <div class="users">
<div class="sp">
<label><span>*</span>验证码：</label>
</div>
<div class="users_user" >
<input type="text" name="" id="yzm" value="" />
<span id="img_yzm"><a href=""></a></span>
</div>
</div> <div class="users ">
<div class="sp sp-1">
</div>
<div class="users_user ">
<input type="checkbox" name="" class="auto_left" id="check_left" value="" />
<span class="auto_left" id="auto_logo">自动登陆</span>
<a href="#" class="auto_left">忘记密码</a>
</div>
</div> <div class="users">
<div class="sp sp-1">
</div>
<div class="users_user" id="logoing" ><a href="#">登陆</a>
</div>
</div> <div class="rest-q"><a href="注册页面.html" target="_blank">免费注册》</a></div>
</div> </div> <div class="div_float"></div> </div> <!--下方-->
<footer class="footer">
<p>Copyright ©老男孩教育. All Rights Reserved.</p>
</footer>
</body>
</html>
python第八十四天－－－十五周作业的更多相关文章
- python 教程 第十四章、 地址薄作业
第十四章. 地址薄作业 #A Byte of Python #!/usr/bin/env python import cPickle import os #define the contacts fi ...
- 2017-2018-1 JaWorld 第四、五周作业
2017-2018-1 JaWorld 第四.五周作业 两周工作内容 小组讨论并确定最终的app雏形 合作完成需求说明书 工作分工 成员 分工 比例 陈是奇 1.引言 8% 马平川 2.1-2.5 产 ...
- 2017-2018-1 JAVA实验站 第四、五周作业
2017-2018-1 JAVA实验站 第四.五周作业 JAVA实验站小组成员 学号 名字 职务 20162318 张泰毓 组长 20162303 石亚鑫 组员 20162304 张浩林 组员 201 ...
- 第五周作业：markdown语法小总结
第五周作业 markdown语法总结 早就想写这么一个文章了,关于markdown的语法,因为最近使用的比较多,所以特地总结一下 一,标题 首先要介绍的就是标题, 标题一共有六级 # h1 ## h2 ...
- 2018-2019-1 20189221《Linux内核原理与分析》第五周作业
2018-2019-1 20189221<Linux内核原理与分析>第五周作业 实验四 实验过程 当用户态进程调用一个系统调用时,cpu切换到内核态并开始执行一个内核函数. 在Linux中 ...
- 2017-2018-1 20179205《Linux内核原理与设计》第五周作业
<Linux内核原理与设计>第五周作业 视频学习及操作分析 一.用户态.内核态和中断 内核态在CPU执行中对应高执行级别,执行级别为0级,具有特权指令,可以访问任意物理地址:用户态执行级别 ...
- 2019-2020-1 20199329《Linux内核原理与分析》第五周作业
<Linux内核原理与分析>第五周作业 一.上周问题总结: 虚拟机将c文件汇编成汇编文件时忘记添加include<stdio.h> gdb跟踪汇编过程不熟练 二.本周学习内容: ...
- CSS3秘笈复习：十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
- 第十四，十五周PTA作业
1.第十四周part1 7-3 #include<stdio.h> int main() { int n; scanf("%d",&n); int a[n]; ...
- 2019春第五周作业Compile Summarize
这个作业属于哪个课程 C语言程序设计II 这个作业要求在哪里 在这里 我在这个课程的目标是 能够精通关于数组内部运作原理 这个作业在哪个具体方面帮助我实现目标 如何输出一行的连续字符 参考文献与网址 ...
随机推荐
- linux中变量的一些操作方法
常见的一般有如下操作,可以对字符串进行简单操作: echo ${#var}打印变量var长度 echo "$var:3:8" 打印变量var第4个字符开始的8个字符echo ${v ...
- oracle查看当前用户，数据库实例
#sysdba用户登录[oracle@oracle ~]$ sqlplus / as sysdba #查看当前用户sql>show user; #查看当前数据库实例sql>show par ...
- Git学习系列之Windows上安装Git详细步骤（图文详解）
前言 最初,Git是用于Linux下的内核代码管理.因为其非常好用,目前,已经被成功移植到Mac和Windows操作系统下. 鉴于大部分使用者使用的是Windows操作系统,故,这里详细讲解Windo ...
- Spring Boot SSL [https]配置例子
前言 本文主要介绍Spring Boot HTTPS相关配置,基于自签证书实现: 通过本例子,同样可以了解创建SSL数字证书的过程: 本文概述 Spring boot HTTPS 配置 server. ...
- mac使用brew安装mysql
1.安装mysql #brew install mysql 报错 Error: The following directories are not writable by your user: /us ...
- .net core Identity集成IdentityServer(2) 实现IprofileService接口在accesstoken中增加自定义claims
导读 1. 如何添加自定义的claims. 前请提要 目前我们拥有了三个web应用. localhost:40010, 验证服务器 localhost:40011, mvc客户端, 充当webapp请 ...
- 可能会导致循环或多重级联路径。请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION，或修改其他 FOREIGN KEY 约束。
错误提示:可能会导致循环或多重级联路径.请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION,或修改其他 FOREIGN KEY 约束. 原因:自表连接(同一张表 ...
- win10 uwp 如何开始写 uwp 程序
本文告诉大家如何创建一个 UWP 程序. 这是一系列的 uwp 入门博客,所以写的很简单 本文来告诉大家如何创建一个简单的程序 安装 VisualStudio 在开始写 UWP 需要安装 Visual ...
- 新建 .NET Core 控制台项目
1. 安装 .NET Core SDK 1.0 参考微软官方网站 https://www.microsoft.com/net/download/windows 2. 打开命令提示符:输入以下代码验证S ...
- hadoop 集群中数据块的副本存放策略
HDFS采用一种称为机架感知(rack-aware)的策略来改进数据的可靠性.可用性和网络带宽的利用率.目前实现的副本存放策略只是在这个方向上的第一步.实现这个策略的短期目标是验证它在生产环境下的有效 ...