天猫前端系列教材（二十八）- 购物车页面

天猫前端系列教材（二十七）- 购物车页面 - 结算按钮

天猫前端系列教材（二十九）- 购物车页面 - 交互

工具版本兼容问题

步骤 1 : 效果
步骤 2 : 布局
步骤 3 : 纯html
步骤 4 : 加上样式
步骤 5 : 样式讲解
步骤 6 : 再整合在一起

步骤 1 :

效果

edit 顶折

纠问

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.cartDiv{
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}
table.cartProductTable{
	width: 100%;
	font-size:12px;
}
tr.cartProductItemTR{
	border: 1px solid #CCCCCC;
}
tr.cartProductItemTR td{
	padding: 20px 20px;
}
table.cartProductTable th{
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}
img.cartProductImg{
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}
table.cartProductTable th.selectAndImage{
	width:100px;
}
table.cartProductTable th.operation{
	width:30px;
}
div.cartProductLinkOutDiv{
	position: relative;
	height: 80px;
}
a.cartProductLink{
	color: #3C3C3C;
}
a.cartProductLink:hover{
	color: #C40000;
	text-decoration: underline;
}
div.cartProductLinkInnerDiv{
	position: absolute;
	bottom: 0;
	height: 20px;
}
span.cartProductItemOringalPrice{
	text-decoration: line-through;
	color: #9C9C9C;
	display: block;
	font-weight: bold;
	font-size: 14px;
}
span.cartProductItemPromotionPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
div.cartProductChangeNumberDiv{
	border: solid 1px #E5E5E5;
	width: 80px;
}
div.cartProductChangeNumberDiv a{
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}
div.cartProductChangeNumberDiv input{
	border: solid 1px #AAAAAA;
	width: 42px;
	display: inline-block;
}
span.cartProductItemSmallSumPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
img.cartProductItemIfSelected, img.selectAllItem{
	cursor: pointer;
}
</style>
<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.cartDiv{
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}
table.cartProductTable{
	width: 100%;
	font-size:12px;
}
tr.cartProductItemTR{
	border: 1px solid #CCCCCC;
}
tr.cartProductItemTR td{
	padding: 20px 20px;
}
table.cartProductTable th{
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}
img.cartProductImg{
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}
table.cartProductTable th.selectAndImage{
	width:100px;
}
table.cartProductTable th.operation{
	width:30px;
}
div.cartProductLinkOutDiv{
	position: relative;
	height: 80px;
}
a.cartProductLink{
	color: #3C3C3C;
}
a.cartProductLink:hover{
	color: #C40000;
	text-decoration: underline;
}
div.cartProductLinkInnerDiv{
	position: absolute;
	bottom: 0;
	height: 20px;
}
span.cartProductItemOringalPrice{
	text-decoration: line-through;
	color: #9C9C9C;
	display: block;
	font-weight: bold;
	font-size: 14px;
}
span.cartProductItemPromotionPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
div.cartProductChangeNumberDiv{
	border: solid 1px #E5E5E5;
	width: 80px;
}
div.cartProductChangeNumberDiv a{
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}
div.cartProductChangeNumberDiv input{
	border: solid 1px #AAAAAA;
	width: 42px;
	display: inline-block;
}
span.cartProductItemSmallSumPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
img.cartProductItemIfSelected, img.selectAllItem{
	cursor: pointer;
}
</style>
<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

渲染中渲染完成

效果

步骤 2 :

布局

edit 顶折

纠问

增值内容，请先登录

模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释），涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 3 :

纯html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

渲染中渲染完成

效果

步骤 4 :

加上样式

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.cartDiv{
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}
table.cartProductTable{
	width: 100%;
	font-size:12px;
}
tr.cartProductItemTR{
	border: 1px solid #CCCCCC;
}
tr.cartProductItemTR td{
	padding: 20px 20px;
}
table.cartProductTable th{
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}
img.cartProductImg{
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}
table.cartProductTable th.selectAndImage{
	width:140px;
}
table.cartProductTable th.operation{
	width:30px;
}
div.cartProductLinkOutDiv{
	position: relative;
	height: 80px;
}
a.cartProductLink{
	color: #3C3C3C;
}
a.cartProductLink:hover{
	color: #C40000;
	text-decoration: underline;
}
div.cartProductLinkInnerDiv{
	position: absolute;
	bottom: 0;
	height: 20px;
}
span.cartProductItemOringalPrice{
	text-decoration: line-through;
	color: #9C9C9C;
	display: block;
	font-weight: bold;
	font-size: 14px;
}
span.cartProductItemPromotionPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
div.cartProductChangeNumberDiv{
	border: solid 1px #E5E5E5;
	width: 80px;
}
div.cartProductChangeNumberDiv a{
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}
div.cartProductChangeNumberDiv input{
	border: solid 1px #AAAAAA;
	width: 42px;
	display: inline-block;
}
span.cartProductItemSmallSumPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
img.cartProductItemIfSelected, img.selectAllItem{
	cursor: pointer;
}
</style>
<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.cartDiv{
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}
table.cartProductTable{
	width: 100%;
	font-size:12px;
}
tr.cartProductItemTR{
	border: 1px solid #CCCCCC;
}
tr.cartProductItemTR td{
	padding: 20px 20px;
}
table.cartProductTable th{
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}
img.cartProductImg{
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}
table.cartProductTable th.selectAndImage{
	width:140px;
}
table.cartProductTable th.operation{
	width:30px;
}
div.cartProductLinkOutDiv{
	position: relative;
	height: 80px;
}
a.cartProductLink{
	color: #3C3C3C;
}
a.cartProductLink:hover{
	color: #C40000;
	text-decoration: underline;
}
div.cartProductLinkInnerDiv{
	position: absolute;
	bottom: 0;
	height: 20px;
}
span.cartProductItemOringalPrice{
	text-decoration: line-through;
	color: #9C9C9C;
	display: block;
	font-weight: bold;
	font-size: 14px;
}
span.cartProductItemPromotionPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
div.cartProductChangeNumberDiv{
	border: solid 1px #E5E5E5;
	width: 80px;
}
div.cartProductChangeNumberDiv a{
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}
div.cartProductChangeNumberDiv input{
	border: solid 1px #AAAAAA;
	width: 42px;
	display: inline-block;
}
span.cartProductItemSmallSumPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
img.cartProductItemIfSelected, img.selectAllItem{
	cursor: pointer;
}
</style>
<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

渲染中渲染完成

效果

步骤 5 :

样式讲解

edit 顶折

纠问

增值内容，请先登录

点击进入样式详解

步骤 6 :

再整合在一起

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.cartDiv{
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}
table.cartProductTable{
	width: 100%;
	font-size:12px;
}
tr.cartProductItemTR{
	border: 1px solid #CCCCCC;
}
tr.cartProductItemTR td{
	padding: 20px 20px;
}
table.cartProductTable th{
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}
img.cartProductImg{
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}
table.cartProductTable th.selectAndImage{
	width:140px;
}
table.cartProductTable th.operation{
	width:30px;
}
div.cartProductLinkOutDiv{
	position: relative;
	height: 80px;
}
a.cartProductLink{
	color: #3C3C3C;
}
a.cartProductLink:hover{
	color: #C40000;
	text-decoration: underline;
}
div.cartProductLinkInnerDiv{
	position: absolute;
	bottom: 0;
	height: 20px;
}
span.cartProductItemOringalPrice{
	text-decoration: line-through;
	color: #9C9C9C;
	display: block;
	font-weight: bold;
	font-size: 14px;
}
span.cartProductItemPromotionPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
div.cartProductChangeNumberDiv{
	border: solid 1px #E5E5E5;
	width: 80px;
}
div.cartProductChangeNumberDiv a{
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}
div.cartProductChangeNumberDiv input{
	border: solid 1px #AAAAAA;
	width: 42px;
	display: inline-block;
}
span.cartProductItemSmallSumPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
img.cartProductItemIfSelected, img.selectAllItem{
	cursor: pointer;
}
</style>
<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.cartDiv{
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}
table.cartProductTable{
	width: 100%;
	font-size:12px;
}
tr.cartProductItemTR{
	border: 1px solid #CCCCCC;
}
tr.cartProductItemTR td{
	padding: 20px 20px;
}
table.cartProductTable th{
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}
img.cartProductImg{
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}
table.cartProductTable th.selectAndImage{
	width:140px;
}
table.cartProductTable th.operation{
	width:30px;
}
div.cartProductLinkOutDiv{
	position: relative;
	height: 80px;
}
a.cartProductLink{
	color: #3C3C3C;
}
a.cartProductLink:hover{
	color: #C40000;
	text-decoration: underline;
}
div.cartProductLinkInnerDiv{
	position: absolute;
	bottom: 0;
	height: 20px;
}
span.cartProductItemOringalPrice{
	text-decoration: line-through;
	color: #9C9C9C;
	display: block;
	font-weight: bold;
	font-size: 14px;
}
span.cartProductItemPromotionPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
div.cartProductChangeNumberDiv{
	border: solid 1px #E5E5E5;
	width: 80px;
}
div.cartProductChangeNumberDiv a{
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}
div.cartProductChangeNumberDiv input{
	border: solid 1px #AAAAAA;
	width: 42px;
	display: inline-block;
}
span.cartProductItemSmallSumPrice{
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}
img.cartProductItemIfSelected, img.selectAllItem{
	cursor: pointer;
}
</style>
<div class="cartDiv">
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥7580.0</span>
                            <span class="cartProductItemPromotionPrice">￥5306.0</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="4" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935">
                        <td>
                            <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥235.0</span>
                            <span class="cartProductItemPromotionPrice">￥152.75</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

渲染中渲染完成

效果

天猫前端系列教材（二十七）- 购物车页面 - 结算按钮

天猫前端系列教材（二十九）- 购物车页面 - 交互

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2020-07-28 内联级元素排在一行会有空隙这个怎么解决浮动的话只有一边还可以，两边都有就不行了

秦时明月汉时关

关于实践项目-天猫前端-订单项内容的提问

。。

2 个答案

秦时明月汉时关
答案时间：2020-08-01

没有啊我用的是谷歌因为加减号这两个元素是行内块元素所以之间会有空隙这个应该怎么解决呢

how2j
答案时间：2020-07-28

不同浏览器表现不一样，我这里就没有空隙呢，我用的chrome，你用的是IE吗？

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-05-19 input文本框的autocomplete属性是不是可有可无了啊。不知道是因为浏览器缓存还是因为现在的浏览器支持这个了，，加不加都没区别诶？

萧瑟如枫	关于实践项目-天猫前端-订单项内容的提问。。。。

1 个答案

how2j
答案时间：2019-05-20

对的，浏览器本身就提供了这个功能了

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-01 是否可以去掉div.cartProductChangeNumberDiv input{display: inline-block;}

Cottonlion

关于实践项目-天猫前端-订单项内容的提问

请问站长 div.cartProductChangeNumberDiv input { display: inline-block; } 这里面的 display:inline-block 去掉好像也没有啥影响。我在样式详解模式下反复试过，请问是否可以这样操作？

div.cartProductChangeNumberDiv input
{
    border: solid 1px #AAAAAA;
 
   width: 42px;
 
   display: inline-block;
 
}

2 个答案

Flare
答案时间：2020-03-19

input是内联元素，所以去掉没有影响。

how2j
答案时间：2018-11-02

好像是的呢，当初做这个应该是记不得input默认 display 是 inline-block 还是 block了，所以加上一个确保它是 inline-block 吧~

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-10-15 为什么我用css设置的tr的边框不能显示呀

2018-08-31 为什么div.cartProductChangeNumberDiv a加了line-block就宽度正常了啊

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 7 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫前端-订单项内容的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图