jquery+css实现简洁电商购物车清单增删合计效果代码-html代码-BFW代码库

jquery+css实现简洁电商购物车清单增删合计效果代码

代码语言：html

所属分类：电商

代码描述：jquery+css实现简洁电商购物车清单增删合计效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&amp;display=swap'>
<style>
    * {
  font-family: "Noto Sans TC", sans-serif;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #F6C3C2;
}

#buylist {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  width: 80%;
  max-width: 560px;
  padding: 0px;
  background: #FDEEE7;
  border: 3px solid #603850;
  box-shadow: 8px 10px 0px #603850;
  border-radius: 32px;
  overflow: hidden;
}
#buylist h1 {
  margin: 0px;
  padding: 18px 0px;
  text-align: center;
  background-color: #B993BC;
  font-weight: 500;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 0.04em;
  color: #FDEEE7;
}
#buylist .buy_add {
  padding: 18px 32px;
  display: flex;
  gap: 40px;
  align-items: center;
  background: #F69693;
  border-top: 2px solid #603850;
  border-bottom: 2px solid #603850;
}
#buylist .buy_add .input_container {
  width: 100%;
  display: flex;
  gap: 20px;
}
#buylist .buy_add .input_container .input_filed {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
}
#buylist .buy_add .input_container .input_filed .label {
  white-space: nowrap;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04em;
  color: #603850;
}
#buylist .buy_add .input_container .input_filed input {
  width: 100%;
  height: 38px;
  background: #FDEEE7;
  border: 2px solid #603850;
  border-radius: 4px;
  padding: 8px 12px;
}
#buylist .buy_add .btn_add {
  white-space: nowrap;
  width: 112px;
  height: 40px;
  background: #614154;
  border-radius: 70px;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 38px;
  letter-spacing: 0.04em;
  color: #FDEEE7;
}
#buylist .buy_add .btn_add:hover {
  background-color: #442C3A;
  cursor: pointer;
}

#items_list {
  margin: 16px 32px 36px 32px;
  display: flex;
  flex-direction: column;
}
#items_list .buy_item {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 16px 12px;
  gap: 32px;
  border-bottom: 1px solid #603850;
  position: relative;
}
#items_list .buy_item .title {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04em;
  color: #603850;
}
#items_list .buy_item .price {
  position: absolute;
  right: 64px;
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04em;
  color: #603850;
}
#items_list .buy_item .price::before {
  content: "$ ";
}
#items_list .buy_item .btn_del {
  position: absolute;
  right: 12px;
  background-color: #BB95BE;
  border-radius: 100px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 16px;
  color: #FDEEE7;
  font-size: 12px;
}
#items_list .buy_item .btn_del:hover {
  background-color: #9F7CA1;
  cursor: pointer;
}
#items_list .total {
  padding-left: 24px;
  background-color: #B993BC;
  border: 0px;
  border-radius: 8px;
  margin-top: 20px;
}
#items_list .total .title, #items_list .total .price {
  color: #FDEEE7;
}
#items_list .total .title {
  font-weight: 500;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="buylist">
        <h1>SHOPPING LIST</h1>
        <div class="buy_add">
            <div class="input_container">
             .........完整代码请登录后点击上方下载按钮下载查看