购物车悬浮 + 购物数量显示

上代码：

html界面

    <div class="cart">
        <div class="cart-num">99</div>
        <a href="#"><img class="cart-img" src="images/gwc.png"></a>
    </div>

css 样式

.cart{position: fixed; width: 40px; height: 40px; line-height:40px;top:20px;right:20px; z-index: 99999; border-radius: 180px; background-color: #787878; opacity: 0.8;}
.cart-img{ width: 32px; height: 32px; padding: 5px; margin: 4px 2px 2px 3px;}
.cart-num{position:absolute; margin:0; line-height: 12px; font-size: 0.55rem; color: #ffffff; padding: 0; top:-1px; right: -1px; width:13px; height: 13px; border: 1px solid #ea4b35; background-color: #ea4b35; z-index:999999; border-radius: 180px;}

时间： 2024-10-23 09:00:56

购物车悬浮 + 购物数量显示的相关文章

鼠标悬浮标题切换显示出标题的文字和图片效果

第一种效果: HTML结构: <div class="vewinfor"> <div class="leftin_hd"> <h3>作者热文</h3> <a href="" target="_blank" class="in_more">...</a> </div> <div class="leftin_bd

magento购物车添加减少数量实时更新购物车

magento实时更新购物车商品数量 <td> <button onclick="addQtyone();" type="submit">+</button> <input id="qtyPro" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->ge

js学习-购物数量+1，-1

看到商城里面,可以加减购物数量,就想学习一下代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js点击加1的实现</title> <style type="text/css"> .jia{height:16px;width: auto;text-align:center;display: inline

前面用户验证成功以后跳转到hall.jsp,展示商品 hall.jsp <%@ page language="java" import="java.util.*,com.wxh.domain.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML

12月16日增加一个购物车内product数量的功能，自定义method,在helper中定义,计算代码Refactor到Model中。

仿照Rails实战:购物网站教材:5-6 step5:计算总价,做出在nav上显示购物车内product的数量. 遇到的?: 1. <% sum = 0 %> <% current_cart.cart_items each do |cart_item| %> <% if cart_item.product.price.present? %> <% sum = sum + cart_item.quantity * cart_item.product.price %

微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图: wxml:  <view class="stepper">  <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

原生JS 购物车及购物页面的cookie使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;padding:0;margin:0;} .goods li{display:inline-block;border:1px solid #ddd;padding:10p

小程序购物车下架商品实时显示，只为更好用户体验！

单商户小程序V1.8.4版本更新说明更新时间:2018年9月10号一. 更新功能清单1.新增仅支持自提功能设置,用户下单仅可选到店自提!2.小程序前台优化购物车页面,已删除或已下架的商品,其状态展示在购物车提醒用户:3.商家后台总览页面新增常用入口:4.商家后台DIY活动组件增加是否显示参与人数设置:5.商加后台新增搜索自定义分销商品功能:6.商城后台添加服务商品处新增服务商品提交订单页的温馨提示自定义:二. 更新功能详细说明1. 增加仅支持自提功能设置,用户下单仅可选到店自提! 优化目的:很

分页之页码数量显示

javaScript页码简单算法实现, 在此留作笔记, 供以后参考 Js代码 /** * 页码计算, 仅适用于显示奇数数量的页码 * @param size 页大小 * @param index 当前页码 * @param rowCount 总行数 * @param numCount 要显示的页码数量 * @returns {Object} pageTotal(总页数), minNum(最小页码), maxNum(最大页码) */ function pageCalc(size, index, r