实现购物车功能

最新推荐文章于 2024-02-14 16:16:04 发布

VIP文章 ACGuan

最新推荐文章于 2024-02-14 16:16:04 发布

阅读量237

点赞数

分类专栏： Vue Web前端

本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/107182177

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
.fl{
  float: left;
}
.fr{
  float: right;
}
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}
.clearfix{
  zoom: 1;
}
.clearfix:after {
  clear: both;
}
.clearfix:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
a{
  text-decoration: none;
  color: #333;
}
img{vertical-align: middle;}
.page-shopping-cart{
  width: 1200px;
  margin:50px auto;
  font-size: 14px;
  border:1px solid #e3e3e3;
  border-top:2px solid #317ee7;
}
.page-shopping-cart .cart-title{
  color:#317ee7;
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  line-height: 68px;
}
.page-shopping-cart .red-text {
  color: #e94826;
}
.page-shopping-cart .check-span{
  display: block;
  width: 24px;
  height: 20px;
  margin-top: 9px;
  background:green;
  /*background: url("cartBg.png") no-repeat 0 0;*/
}

/* 点击时改变勾选 */
.page-shopping-cart .check-span.check-true{
  /*background: url('cartBg.png') no-repeat 0 -22px;*/
  background:red;
}
.page-shopping-cart .td-check{
  width:70px;
}
.page-shopping-cart .td-product{
  width:460px;
}
.page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total{
  width:160px;
}
.page-shopping-cart .td-do{
  width:150px;
}
.cart-product-title{
  text-align: center;
  height: 38px;
  line-height: 38px;
  padding: 0 20px;
  background-color: #f7f7f7;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.cart-product-title .td-product{
  text-align: center;
  font-size: 14px;
}
.cart-product-title .td-check{
  text-align: left;
}
.cart-product-title .td-check .check-span .check-span{
  margin:9px 6px 0 0;
}

/* 内容开始 */
.cart-product{
  padding: 0 20px;
  text-align: center;
}
.cart-product table{
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.cart-product table td{
  padding: 20px 0;
}
.cart-product table tr{
  border-bottom:1px dashed #e3e3e3;
}
.cart-product table tr:last-child{
  border-bottom:none;
}
.cart-product table .product-num{
  border: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
}
.cart-product table .product-num .num-do{
  width: 24px;
  height: 28px;
  background: #f7f7f7;
  display: block;
}
.cart-product table .product-num .num-reduce span{
  display: block;
  width: 6px;
  height: 2px;
  margin:13px auto 0 auto;
  /*background: url("cartBg.png") no-repeat -40px -22px;*/
}
.cart-product table .product-num .num-add span{
  display: block;
  width: 8px;
  height: 8px;
  margin:10px auto 0 auto;
  /*backgro

最低0.47元/天解锁文章

ACGuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现购物车功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>.fl{ float: left;}.fr{ float: right;}blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, .
复制链接

扫一扫