仿爱购网（订单）html+css+JS

实现商品数据传输渲染到页面，点击删除当次订单

html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的订单</title>
  <link rel="stylesheet" type="text/css" href="css/shopping.css"/>
  <link rel="stylesheet" type="text/css" href="css/reset.css"/>
  <link rel="icon" href="img/title-icon.jpg"/>
</head>
<body>
<div class="wrapper">
  
  <div class="row_one">
   <a style="color:#b41e23 ;" href="shouye.html">爱购网首页</a>
  <div class="rightword">
   <ul class="a5">
      <li class="right"><a class="a6" href="gouwuc.html">购物车</a></li>
      <li class="right" ><a class="a6" href="address.html">收货地址</a></li>
      <li class="right" ><a class="a7" href="zhuce.html">注册</a></li>
      <li class="right" ><a class="a8" href="denglu.html">登录</a></li>
   </ul>
  </div>
  </div>


  
  <div class="row_two">
   <div class="logo"></div>
   <p>我的订单</p>
   <div class="row_two_1">
    <div class="row_two_1_a">
     <ul>
      <li class="li1">宝贝</li>
      <li class="li2">单价</li>
      <li class="li2">数量</li>
      <li class="li2">实付款</li>
      <li class="li2">交易操作</li>
     </ul>
    </div>

    <div id="active01">
    </div>


   </div>
  </div>
  
  <div class="row_three">
   <div class="row_three_1">
    <ul>
     <li class="li3"><a class="a2" href="">知识产权</a></li>
     <li class="li3"><a class="a2" href="">网站地图</a></li>
     <li class="li3"><a class="a2" href="">联系我们</a></li>
     <li class="li3"><a class="a2" href="">诚征英才</a></li>
     <li class="li3"><a class="a2" href="">开发平台</a></li>
     <li class="li3"><a class="a2" href="">联系客服</a></li>
     <li class="li3"><a class="a2" href="">廉正举报</a></li>
     <li class="li3"><a class="a2" href="">营销中心</a></li>
     <li class="li3"><a class="a2" href="">合作伙伴</a></li>
     <li class="li3"><a class="a2" href="">关于爱购</a></li>
    </ul>
   </div>
   <div class="row_three_2">
    <ul>
     <li class="li4 a2">|       &copy2018-2020 igo.com 版权所有</li>
    </ul>
   </div>
  </div>
</div>

css：

.wrapper{
width: 1440px;
/*border: 1px solid #000;*/
margin: 0 auto;
}
.wrapper>div{
padding:0 105px ;
}
.row_one{
height: 31px;
background-color: #f4f4f4;
line-height: 31px;
}
.right{
font-size: 12px;
float: right;
margin-right: 20px;
}
.a8{
color: #b41e23;
}
.a7{
color: #999999;
}
.a6{
color: #000000;
}

.rightword{
/*margin-left: 1048px;*/
height: 31px;
line-height: 32px;
float: right;
}
.row_two{
height: 860px;
background-color: #fafafa;
border-top: 1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5 ;
}
.logo{
width: 99px;
height: 40px;
background-image: url(../img/logo.png);
background-size: 99px 40px;
margin-top: 9px;
float: left;
}
.row_two>p{
margin-top: 16px;
font-size: 18px;
float: left;
}
.row_two_1{
height: auto;
border: 1px solid #e5e5e5 ;
margin-top: 74px;
background-color: #fff;
}
#active01{
height: auto;
}
.row_two_1_a{
height: 61px;
}
.row_two_1_a li{
text-align: center;
float: left;
height: 61px;
line-height: 61px;
font-size: 12px;
}
.clear{
width: 50px;
height: 29px;
background-color: #b41e23;
margin-left:890px ;
border: none;
/*padding-left: 905px;*/
}
.li1{
width: 408px;
}
.li2{
width: 205px;
}
.li2 a:hover{
color:#b41e23 ;
}
.row_two_1_b{
font-size: 12px;
line-height: 42px;
height: 42px;
background-color: #fae8e8;
}
.span2{
font-weight: bold;
margin-right: 22px;
padding-left: 22px;
}
.c1{
border-bottom: 1px dashed #e5e5e5;
}
.ul1{
height: 142px;
}
.ul1 li{
float: left;
height: 142px;
/*padding: 20px 0px 0 0px;*/
}
.li2{
text-align: center;
}
.img{
float: left;
width: 100px;
height: 100px;
background-size: 100px 100px;
margin: 20px 0 0 20px;
}

.shopping{
height: auto;
}
.wz{
margin-top: 20px;
overflow: hidden;
/*text-overflow: ellipsis;*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

margin-left: 15px;
float: left;
width: 273px;
height: 40px;
}
.a1{
color: #666666;
font-size: 12px;
}
.li2 p{
margin-top: 20px;
}
.p1{
font-weight: bold;
}
.p2{
color: #b41e23;
}
/*第二行结束*/
/*第三行开始*/
.row_three{
height:58px ;
background-color: #f4f4f4;
}
.row_three_1{
height: 58px;
width: 825px;
float: left;
}
.row_three_2{
height: 58px;
width: 405px;
float: left;
}
.li3{
height: 58px;
width: 64px;
float: right;
line-height: 58px;
}
.a2{
color: #999999 ;
font-size: 12px;
}
.li4{
height: 58px;
line-height: 58px;
}
/*第三行结束*/

JS：

</script>

仿爱购网（订单）html+css+JS

猜你喜欢