H-Builder 品优购-购物车的实现

最新推荐文章于 2023-06-14 19:34:51 发布
最新推荐文章于 2023-06-14 19:34:51 发布
阅读量2k 收藏 20
点赞数 5
文章标签： html5 javascript css 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56654086/article/details/124968677
版权

 

购物车的大体样式 

 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="js/car.js"></script>
</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="img/logo.png" alt=""> <b>购物车</b>
            </div>
        </div>
    </div>

    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
最低0.47元/天 解锁文章
布挥玖搽
关注
  • 5
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
品优购项目静态页面开发.rar
08-16
该资源是为了在开发过程中方便利用之前写过的代码的，方便自己的同时方便他人，使用的技术是使用传统的html配合css完成的页面
uniapp实现购物商城主页面
2201_75943035的博客
06-18 1460
向服务器发送请求，获取数据，还将数据保存到本地缓存中，以便在用户下次访问时可以直接使用缓存中的数据。”：垂直滚动的视图。2.使用“uni.getStorageSync()”方法从本地缓存中获取名为“cates”的数据，如果本地缓存中没有该数据，则执行“this.getCategories()”方法从服务器端获取数据。数据请求：使用异步函数，在请求指定 URL 的数据后，将结果赋值给this.getSwiperList()、this.getNavList()、this.getFloordata() 变量。
购物车模块详细代码
cxx13700的博客
10-25 863
//先是布局主页面 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height=...
购物车的原理及实现
a94572824的博客
06-05 848
今天来开始写一下关于购物车的东西, 这里首先抛出四个问题: 1）用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码　问：购物车商品还在吗？ 2）用户登陆了用户名密码,添加商品,关闭浏览器再打开后 不登录用户名和密码　问:购物车商品还在吗？ 3）用户登陆了用户名密码,添加商品, 关闭浏览器,然后再打开,登陆用户名和密码 问:购物车商品还在吗？ 4）用户登陆了用户名密码,添加...
uniapp微信小程序实现《优购商城项目》
qq_64102392的博客
06-14 4240
对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。
京东购物车网页(静态)搭建
时间静止
03-22 7854
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码（京东购物车5.html） <!DOCTYPE html> <html> &...
JavaScript游戏购物车项目
github_67177094的博客
03-12 5381
html网页项目
简单实现购物车逻辑
ZhaoJingCong4880的博客
01-11 760
activity，实现v层返回数据，适配器的点击一级列表和二级列表的监听接口，以及点击+商品和-商品的方法 public class MainActivity extends AppCompatActivity implements IMainView, MyExpandAdapter.ModifyGoodsItemNumberListener, MyExpandAdapter.CheckGro
HBuilder X 项目开发指南：基础入门及其可用插件推荐
热门推荐
weixin_43263566的博客
10-12 1万+
使用 HBuilder X 写项目
02-品优购购物车全选.rar
11-13
02-品优购购物车全选.rar
网站开发技术-品优购项目
最新发布
04-13
网站开发技术-品优购项目
黑马49-完整-品优购项目+配套软件
10-15
黑马49-品优购+配套软件。这是一个分布式项目，很适合入门，里面有负载均衡，反向代理，Dubbo，Docker等等很多技术，做完可以对分布式有一个很好的入门。
uni-app黑马优购
06-17
uni-app黑马优购
wepy_shop:wepy构建的微信小程序项目--品优购商城
05-13
wepy_shop wepy构建的微信小程序项目--品优购商城
05-小程序(优购商城项目介绍,HBuilder和HBuilderX,uni-app介绍)
Tangoneone的博客
07-02 3936
07- 优购商城项目介绍 商城的业务类型很ok 商城类的小程序是最多的 优购商城的基本逻辑 分类->按关键字搜索找到商品->商品详情->加入购物车->结算 可以参考京东App, 或者小米ite 项目支持多端 uniapp框架本身就用vue写的, 编译成代码兼容多端, iOS, Android, H5, 微信小程序 接口 接口文档 08-原生小程序与第三方小程序框架们 原生小程序是什么？有原生HTML这种说法吗？ 原生来自于英文raw 原生是指官方语法 原
[附源码]java+ssm计算机毕业设计百货商场管理系统lk299(源码+程序+数据库+部署)
eggwdd的博客
03-29 77
Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。2. 前端：L ayui+css+javascript+jQuery+ElemenUI+highcharts。SSM + mybatis + Maven + JSP 等等组成，B/S模式 + Maven管理等等。2. 使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；
前端项目——当当图书网（javaScript）
weixin_66110079的博客
03-13 5100
简单的小项目分享javaScript
网上书城项目学习版（二）
Lzxccas的博客
07-01 240
网上书城项目学习版（二）登录界面绘制首界面面绘制购物车界面书籍详情 登录界面绘制 为了美观我们在HBuilderX 里面用Bootstrap写 登录样式 先引用CSS样式 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 还有JS样式 记得写在body里面 <script src="js/bootstrap.min.js"></script> 登录界面的代码 <form
淘宝购物车+okhttp
qq_42734657的博客
12-20 483
效果图 需要添加的依赖 implementation 'com.google.code.gson:gson:2.8.5' implementation 'com.github.bumptech.glide:glide:4.8.0' implementation 'com.squareup.okhttp3:okhttp:3.12.0' implementation ...
hbuilderx购物车页面代码
12-09
根据提供的引用内容，没有提供购物车页面的代码。但是可以根据提供的步骤和代码范例，自己编写购物车页面的代码。以下是一个简单的购物车页面代码范例： ```html <template> <view class="cart"> <view class="cart-item" v-for="(item, index) in cartList" :key="index"> <view class="cart-item-info"> <image class="cart-item-img" :src="item.imgUrl"></image> <view class="cart-item-name">{{ item.name }}</view> </view> <view class="cart-item-price">{{ item.price }}</view> <view class="cart-item-count"> <button class="cart-item-btn" @click="decreaseCount(index)">-</button> <view class="cart-item-num">{{ item.count }}</view> <button class="cart-item-btn" @click="increaseCount(index)">+</button> </view> </view> </view> </template> <script> export default { data() { return { cartList: [ { name: '商品1', price: 10, count: 1, imgUrl: 'https://dummyimage.com/100x100/000/fff', }, { name: '商品2', price: 20, count: 2, imgUrl: 'https://dummyimage.com/100x100/000/fff', }, { name: '商品3', price: 30, count: 3, imgUrl: 'https://dummyimage.com/100x100/000/fff', }, ], }; }, methods: { decreaseCount(index) { if (this.cartList[index].count > 1) { this.cartList[index].count--; } }, increaseCount(index) { this.cartList[index].count++; }, }, }; </script> <style lang="scss"> .cart { .cart-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #eee; .cart-item-info { display: flex; align-items: center; .cart-item-img { width: 80px; height: 80px; margin-right: 10px; } .cart-item-name { font-size: 16px; } } .cart-item-price { font-size: 16px; color: red; } .cart-item-count { display: flex; align-items: center; .cart-item-btn { width: 30px; height: 30px; font-size: 20px; border: 1px solid #ccc; border-radius: 50%; margin: 0 10px; display: flex; align-items: center; justify-content: center; &:active { background-color: #eee; } } .cart-item-num { font-size: 16px; } } } } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值