小U商城购物车

于 2023-02-22 19:22:14 发布
阅读量174 收藏
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOOO___/article/details/129168809
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>小U商城</title>

</head>

<body>

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Document</title>

        <!-- 引入图标 -->

        <link rel="stylesheet" href="../font/iconfont.css" />

        <!-- 引入css -->

        <link rel="stylesheet" href="../css/car public.css" />

        <link rel="stylesheet" href="../css/reset.css" />

        <link rel="stylesheet" href="../css/car index.css" />

        <!-- 引入js -->

        <script src="../js/remScale.js"></script>

    </head>

    <body>

        <!-- 头部 -->

        <div class="inner">

            <div class="header">

                <a href="#" class="iconfont">&#xe8b5;</a>

                <h2>购物车</h2>

                <a href="#" class="iconfont right">&#xe719;</a>

            </div>

            <div class="nav">

                <ul>

                    <li class="a1"><a href="#" class="a1">全部(20)</a></li>

                    <li><a href="#">降价(4)</a></li>

                    <li><a href="#">热卖(2)</a></li>

                    <li>

                        <a href="#">分类<span class="iconfont">&#xe67f;</span></a>

                    </li>

                </ul>

            </div>

        </div>

        <!-- 内容 -->

        <div class="body">

            <div class="top">

                <form>

                    <input type="radio" name="1" />

                </form>

                <p class="one">小U自营</p>

                <p class="yun">已免运费</p>

                <a href="#" class="quan">领券</a>

            </div>

            <div class="com">

                <form>

                    <input type="radio" />

                </form>

                <img src="../images/01.png" alt="" />

                <h3>溪牧原山茶花洁面泡沫 氨基...</h3>

                <div class="gray">

                    <a href="#">桔色果汁[20#]</a>

                    <select name="1" id="">

                        <option value="1"></option>

                    </select>

                </div>

                <p class="price"><span>￥</span>99</p>

                <p class="depr">距离加入降￥5.00</p>

                <div class="amo">

                    <a href="#" class="iconfont">&#xe729;</a>

                    <a href="#" class="order">1</a>

                    <a href="#" class="iconfont">&#xeaf3;</a>

                </div>

                <div class="tiash">

                    <a href="#" class="iconfont">&#xe621;</a>

                </div>

            </div>

            <div class="com">

                <form>

                    <input type="radio" />

                </form>

                <img src="../images/01.png" alt="" />

                <h3>溪牧原山茶花洁面泡沫 氨基...</h3>

                <div class="gray">

                    <a href="#">桔色果汁[20#]</a>

                    <select name="1" id="">

                        <option value="1"></option>

                    </select>

                </div>

                <p class="price"><span>￥</span>99</p>

                <p class="depr">距离加入降￥5.00</p>

                <div class="amo">

                    <a href="#" class="iconfont">&#xe729;</a>

                    <a href="#" class="order">1</a>

                    <a href="#" class="iconfont">&#xeaf3;</a>

                </div>

                <div class="tiash">

                    <a href="#" class="iconfont">&#xe621;</a>

                </div>

            </div>

            <div class="com">

                <form>

                    <input type="radio" />

                </form>

                <img src="../images/01.png" alt="" />

                <h3>溪牧原山茶花洁面泡沫 氨基...</h3>

                <div class="gray">

                    <a href="#">桔色果汁[20#]</a>

                    <select name="1" id="">

                        <option value="1"></option>

                    </select>

                </div>

                <p class="price"><span>￥</span>99</p>

                <p class="depr">距离加入降￥5.00</p>

                <div class="amo">

                    <a href="#" class="iconfont">&#xe729;</a>

                    <a href="#" class="order">1</a>

                    <a href="#" class="iconfont">&#xeaf3;</a>

                </div>

                <div class="tiash">

                    <a href="#" class="iconfont">&#xe621;</a>

                </div>

            </div>

            <div class="top qian">

                <form>

                    <input type="radio" name="1" />

                </form>

                <p class="one">小U自营</p>

                <p class="yun">已免运费</p>

                <a href="#" class="quan">领券</a>

            </div>

            <div class="com">

                <form>

                    <input type="radio" />

                </form>

                <img src="../images/01.png" alt="" />

                <h3>溪牧原山茶花洁面泡沫 氨基...</h3>

                <div class="gray">

                    <a href="#">桔色果汁[20#]</a>

                    <select name="1" id="">

                        <option value="1"></option>

                    </select>

                </div>

                <p class="price"><span>￥</span>99</p>

                <p class="depr">距离加入降￥5.00</p>

                <div class="amo">

                    <a href="#" class="iconfont">&#xe729;</a>

                    <a href="#" class="order">1</a>

                    <a href="#" class="iconfont">&#xeaf3;</a>

                </div>

                <div class="tiash">

                    <a href="#" class="iconfont">&#xe621;</a>

                </div>

            </div>

            <!-- 结算 -->

            <div class="close">

                <form>

                    <input type="radio" name="1" />

                </form>

                <p class="self">全选</p>

                <p class="total">合计</p>

                <p class="freight">已免运费</p>

                <p class="money">￥1998</p>

                <p class="dis">已优惠￥200元</p>

                <a href="#">结算</a>

            </div>

            <!-- 尾部 -->

        <div class="footer">

            <div class="wei1">

                <span class="banner">

                    <a href="#" class="iconfont">&#xe63e;</a>

                    <p>商城</p>

                </span>

            </div>

            <div class="wei1">

                <span class="banner">

                    <a href="#" class="iconfont">&#xe6b6;</a>

                    <p>分类</p>

                </span>

            </div>

            <div class="wei1">

                <span class="banner">

                    <a href="#" class="iconfont">&#xe899;</a>

                    <p>购物车</p>

                </span>

            </div>

            <div class="wei1">

                <span class="banner">

                    <a href="#" class="iconfont">&#xe60c;</a>

                    <p>我的</p>

                </span>

            </div>

        </div>

       

           

        </div>

    </body>

    </html>

</body>

</html>

MOOO___
关注
HTML+CSS基础一阶段-项目实战（小U商城-PC端/移动端/响应式页面）
qq_41008567的博客
04-20 7274
项目实战知识点->>学习笔记-前端基础一阶段 一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作(PC端+移动端+响应式页面制作)
Html小项目---小商城
qq_46291038的博客
08-22 154
使用DIV+CSS完成如下布局，使用ul-li列表完成图文排列，要求： 1) 标题栏的“ css功能列表图文切换效果” 需设置字体颜色和背景颜色 2) 整体页面须有背景色的设置，页面效果如下图所示 3) 图文排列要求使用ul-li实现 4) 鼠标放在图片上时设定图片的透明化效果 5) 页面整体的居中及细节美化 6) 要求使用外部样式表 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http.
小u列表css
Korey__的博客
08-09 134
page {}/* 头部 */header {}}header>a {}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
小U商城（PC端、移动端、响应式页面）.zip
04-10
一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作，适合小白、新手。
小U商城响应式body
Korey__的博客
08-17 170
商品类型管理添加商品管理商品类型管理详细详细详细详细详细详细详细商品管理商品管理
小米商城 购物车
m0_67345482的博客
07-31 111
购物车
uni-app的商城购物车
weixin_44975002的博客
07-07 914
商城购物车代码
vue实现小u商城购物车
06-01
要实现小u商城购物车，可以遵循以下步骤： 1. 创建一个 Vue 实例，用于管理购物车数据。可以使用 Vue 的 data 属性来存储购物车的商品列表和总价等信息。 2. 在页面中渲染购物车列表。可以使用 v-for 指令遍历...
uni-app框架项目小U商城移动端+Vue项目后台管理系统+菜谱小程序
09-25
"uni-app框架项目小U商城移动端+Vue项目后台管理系统+菜谱小程序"提供了一套完整的解决方案，涵盖了前端、后端以及小程序开发的多个方面。这个项目组合包含了丰富的学习资源，包括实战项目的演示视频和GitHub上的源...
脱壳U体验多商家商城小程序 tuoke_shop 1.0.2.zip微信小程序模板源码
08-12
【标题】中的“脱壳U体验多商家商城小程序 tuoke_shop 1.0.2.zip微信小程序模板源码”指的是一个微信小程序应用的源代码，它是一个名为“tuoke_shop”的多商家商城模板的1.0.2版本，且已进行过“脱壳”处理，意味着...
小U商城电商网页制作（PC端+移动端+响应式页面）.zip
04-20
项目实战知识点->>学习笔记-前端基础一阶段 一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作（PC端+移动端+响应式页面） 含有项目实战的代码以及效果图
小购物商城系统源码
04-18
小购物商城系统源码
脱壳U体验多商家商城小程序 tuoke_shop 1.0.2.rar
最新发布
06-08
【标题】"脱壳U体验多商家商城小程序 tuoke_shop 1.0.2.rar" 涉及的核心知识点是微信小程序开发以及一个多商家商城系统的实现。在这个版本中，我们看到的是一个名为“tuoke_shop”的小程序应用，版本号为1.0.2，它是...
项目（小u商城）、项目初始化、封装网络请求、项目
yangyanqin2545的博客
05-03 656
项目【小U商城】 一、项目初始化 安装步骤 1.打开数据库服务 wampserve 2.新建数据库 导入shop_db root 没有密码 3.打开后台数据接口 shop_api npm install npm start 4.打开后台管理系统 shop_vue_admin npm install npm start admin 123123 5.导入静态页面 运行 h5 微信小程序 二、封装网络请求 1.封装config.js 管理常量 //
小U商城分类 body
Korey__的博客
08-10 317
美妆购物车
购物车完整效果（上）
da_caoyuan的博客
01-17 2352
这里写自定义目录标题左右列表的联动右边列表标题的悬停效果（粘性标签）[源码git地址](https://gitee.com/dacaoyuan/ShopCatDemo) 看到 饿了么，美团 的添加商品到购物车的效果，一直觉得很不错，虽然网上有很多博客已经实现了相似的效果，但是良莠不齐，有的也只是侧重一些效果的实现，然而用到自己的项目中，并没有那么实用。在此，系统的整理的一下，争取全面实用些！希望对...
html5盾牌代码,Web前端
weixin_36364707的博客
06-08 237
课程主题HTML5基础、CSS3基础、切图、综合项目：小U课堂、HTML5进阶、 CSS3进阶、综合项目：小U商城、综合项目：响应式布局实战项目PC端项目：小U课堂静态页面布局、移动端项目：小U商城移动端项目、响应式项目：小U商城后台管理系统培养方向1.熟练使用前端开发IDE:vscode编辑器；2.掌握HTML5基础和HTML5进阶中的常用标签；3.掌握CSS基本语法和文字字体属性；4.掌握盒模...
uni小程序实现购物车功能,包括全选,反选,单选和计算总价格,快递费和总件数
weixin_43090018的博客
05-26 2128
效果图 1、html <view class="content"> <checkbox-group @change="checkboxChange" class="wrapper"> <view class="cart-item" v-for="(item,index) in shopcartList" :key="index"> <label class="label"> <checkbox :value="item.
uni-app ——小程序购物车基本功能的实现过程
Bonsoir777的博客
11-14 1568
本文主要介绍如何使用uni-app实现基本的购物车功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值