天猫前端购物车页面订单项内容 | 基于实例代码分步讲解一站式学习Java

工具版本兼容问题

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

步骤 1 :

效果

顶折

"); window.frames["iframe_show3274"].document.write(decodeHtml($("textarea#stepcodeTextarea3274").val())); window.frames["iframe_show3274"].document.close(); $(window.frames["iframe_show3274"]).load(function(){ $("#iframe_show3274").height($("#iframe_show3274").contents().find("body").height()+showittryitheight); }); $("#iframe_show3274").height($("#iframe_show3274").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/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="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="http://127.0.0.1/tmall../../../img/site/cartSelected.png"></a>
                            <img width="40px" src="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="http://127.0.0.1/tmall../../../img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="http://127.0.0.1/tmall../../../img/site/cartSelected.png"></a>
                            <img width="40px" src="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="http://127.0.0.1/tmall../../../img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="http://127.0.0.1/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>

"); window.frames["iframe3274"].document.write(decodeHtml(code3274)); window.frames["iframe3274"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3274"]).load(function(){ $("#iframe3274").height($("#iframe3274").contents().find("body").height()+showittryitheight); }); $("#iframe3274").height($("#iframe3274").contents().find("body").height()+showittryitheight); alreadyWriteCode3274 = code3274; $("#rendering3274").hide(); $("#rendered3274").show(); } var tRereshRetry2DemoPanel3274 = setInterval(rereshRetry2DemoPanel3274,1000); var binded3274 = false; $("textarea#stepcodeTextarea3274").keyup(function(){ if(!binded3274){ $(window).bind('beforeunload',function(){ binded3274 = true; return "xxxx"; }); } var newCode = $(this).val() code3274 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code3274!=newCode){ // window.frames["iframe3274"].document.write("

"); // window.frames["iframe3274"].document.write(decodeHtml($("textarea#stepcodeTextarea3274").val())); // window.frames["iframe3274"].document.close(); // $(window.frames["iframe3274"]).load(function(){ // $("#iframe3274").height($("#iframe3274").contents().find("body").height()+showittryitheight); // }); // code3274 = newCode; // } }); $(".tryButton3274").click(function(){ $("#tryDiv3274").show(); $("#stepcodeTextarea3274").focus(); $("#stepcodeTextarea3274").height(200); $("#iframe3274").height(0); window.frames["iframe3274"].document.write("

"); window.frames["iframe3274"].document.write(decodeHtml($("textarea#stepcodeTextarea3274").val())); window.frames["iframe3274"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3274"]).load(function(){ $("#iframe3274").height($("#iframe3274").contents().find("body").height()+showittryitheight); }); $("#iframe3274").height($("#iframe3274").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor3274.focus(); editor3274.setSize(null, "250"); $("#rendering3274").hide(); $("#rendered3274").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor3274 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3274"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor3274.on("change",function(doc){ if(!binded3274){ $(window).bind('beforeunload',function(){ binded3274 = true; return "xxxx"; }); } var newCode = doc.getValue(); code3274 = newCode; $("textarea#stepcodeTextarea3274").val(newCode); if(alreadyWriteCode3274!=code3274){ lastModifedTime3274 = new Date().getTime(); $("#rendering3274").show(); $("#rendered3274").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor3274 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor3274.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv3274").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/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="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="http://127.0.0.1/tmall../../../img/site/cartSelected.png"></a>
                            <img width="40px" src="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="http://127.0.0.1/tmall../../../img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="http://127.0.0.1/tmall../../../img/site/cartSelected.png"></a>
                            <img width="40px" src="http://127.0.0.1/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="http://127.0.0.1/tmall../../../img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="http://127.0.0.1/tmall../../../img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="http://127.0.0.1/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 :

布局

顶折

增值内容，请先登录

步骤 3 :

纯html

顶折

增值内容，请先登录

步骤 4 :

加上样式

顶折

增值内容，请先登录

步骤 5 :

样式讲解

顶折

增值内容，请先登录

步骤 6 :

再整合在一起

顶折

增值内容，请先登录

结算按钮

交互

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

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

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

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

上传截图