时间戳

首页 > 技术文章 > 天猫网页前端实现

天猫网页前端实现

xiuhua 2019-05-10 16:47 原文

文章目录

前言

预览效果：点击预览
代码仓库：github

学习了jQuery和boostrap4的教程，苦于没有项目练手，于是决定模仿天猫网页，纯前端实现，积累经验。

用到的技术栈：

  • JavaScript
  • jQuery
  • bootstrap（用于图标和轮播图）

首先先把天猫网页规划一下，大致可以分为：

  • 公共页面
  • 首页
  • 我的订单
  • 登录
  • 注册
  • 购物车
  • 产品内页
  • 订单子页面
  • 其他

每一部分逐步完成，最后整合在一起。（未完成部分思路和前面几个一样，日后有空再继续完善）

公共页面

公共页面就是每个页面都有的内容，包括页头位置的置顶导航栏，紧接着页头的搜索框，以及页脚的证书链接，最后再将这三个子模块整合在一起得到公共页面。

代码构成如图：

置顶导航栏

效果：

布局： 最外层是nav元素，语义化作用，用来布局，与div的区别在于nav更加明确的告诉搜索引擎这是导航栏，帮助搜索引擎理解你的网页。

内部是连续摆放的几个元素，可以用span内嵌超链a，右边两个右浮动的元素。

注意到文字部分是居中显示，而置顶导航栏有个浅灰色的背景，需要把内部元素再套一个外层div，设置div的宽度和margin，使得div在nav中居中显示，然后nav宽度为100%并设置背景颜色。

代码：

		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.1.0/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
		<style type="text/css">
		body{
		    font-size:12px;
		    font-family:Arial;
		}
		nav.top_outer {
			background-color: rgb(242, 242, 242);
		    border-bottom:1px solid  #e7e7e7;
		}
		nav div.top {
			margin: 0 auto;
			width: 1000px;
			padding-top: 5px;
		    padding-bottom: 5px;
		}
		nav div.top a, nav div.top span {
			color: rgb(156, 155, 154);
			margin: 0 10px;
		}
		nav div.top a:hover {
			text-decoration: none;
			color: rgb(196, 0, 0);
		}
		.redColor {
			color: rgb(196, 0, 0) !important;
		}
		.reverse {
			transform: rotateY(180deg); /*原来的购物车图标方向向左，改成向右*/
		}
	</style>
	
	<nav class="top_outer">
		<div class="top">
			<a href="#">
				<span class="glyphicon glyphicon-home redColor"></span>
				天猫首页
			</a>
			<span>喵，欢迎来到天猫</span>
			<a href="#">请登录</a>
			<a href="#">免费注册</a>
			<span class="pull-right">
				<a href="#">我的订单</a>
				<a href="#">
					<span class="glyphicon glyphicon-shopping-cart redColor reverse"></span>
					购物车<strong>0</strong>件
				</a>
			</span>
		</div>
	</nav>

其中引入了bootstrap3和jQuery。方便使用图标和后面的轮播效果。

搜索框

效果：

布局：

搜索栏居中div，内部包含同行排列的input和button元素，以及换行排列的子div。

天猫logo使用absolute定位，实现水平排列。
（也可以将居中div设置为inline-block，不过我习惯于调整div内容，所以就让图片位置先定下来。）

居中div即.searchDiv其实包含了搜索框和搜索按钮，设置了height之后，添加div，这个div实际上是overflow的。

其他细节：logo外套锚点a，灵活运用span。

代码：

<style type="text/css">
	body{
	    font-size:12px;
	    font-family:Arial;
	}
	img#logo {
		position: absolute;
		left: 230px;
		top: 30px;
	}
	div.searchDiv {
		background-color: #C40000;
	    width: 400px;
	    margin: 50px auto;
	    padding: 1px;
	    height: 40px;
	}
	div.searchDiv input {
		outline: none;
		width: 275px;
		height: 36px;
		margin: 1px;
		border: 1px solid transparent;
	}
	div.searchDiv button {
		background-color: #C40000;
		border: 1px solid transparent;
		color: white;
		font-weight: bold;
		font-size: 20px;
		width: 110px;
	}
	div.searchBelow span, div.searchBelow a {
		color: rgb(134, 134, 134);
		display: inline-block;
		margin-top: -17px;
	}
	div.searchBelow>span>span {
		margin: 20px;
	}
	div.searchBelow a:hover {
		color: #C40000;
		text-decoration: none;
	}
</style>

<div class="search_outer">
	<a href="#">
		<img id="logo" src="http://how2j.cn/tmall/img/site/logo.gif" />
	</a>
	<div class="searchDiv">
		<input type="text" name="keyword" placeholder="JavaScript高级程序设计">
		<button type="submit" >搜索</button>
		<div class="searchBelow">
			<span><a href="#">鼠标</a><span>|</span></span>
			<span><a href="#">显示屏</a><span>|</span></span>
			<span><a href="#">手机</a><span>|</span></span>
			<span><a href="#">电脑</a></span>
		</div>
	</div>
</div>

页脚

效果：

布局： 原理和指定导航栏类似，不多赘述。

代码：

<style type="text/css">
	body{
	    font-size: 12px;
	    font-family: Arial;
	}
	footer {
		margin-top: 20px;
		border-top: 1px solid rgb(231, 231, 231);
	}
	div.footerImg {
		text-align: center;
		padding: 20px;
		border-bottom: 1px solid rgb(231, 231, 231);
	}
	div.footerMid {
		padding: 30px 10px;
		width: 1007px;
		margin: 0 auto;
	}
	div.mid_column {
		float: left;
		width: 220px; 
		top: 100px;
	}
	div.mid_column a {
		display: block;
		padding-top: 3px;
		color:#999;
	}
	div.mid_column span.mid_column_title, div.mid_img span.mid_column_title {
		color: #646464;
	    font-weight: bold;
	    font-size: 16px;
	}
	div.mid_column a:hover {
		text-decoration:none;
		color: #C40000;
	}
	div.footerLogo {
		margin: 0 auto;
		width: 1007px;
	}
	div.footerBelow_outer {
		border-top: 2px solid rgb(196, 0, 0);
		background-color: black;
	}
	div.footerBelow {
		margin: 0 auto;
		width: 1007px;
		padding: 5px;
	}
	div.footerBelow .whiteLink a, div.footerBelow .whiteLink span {
		color: white;
		padding-right: 5px;
	}
	div.footerBelow .whiteLink, div.footerBelow .license {
		padding: 5px 0 10px 5px;
	}
	div.footerBelow .license span {
		color: rgb(151, 152, 156);
	}
	div.footerBelow .license div {
		padding: 10px 0 5px 0;
	}
	div.footerBelow .whiteLink a:hover {
		text-decoration: none;
	}
</style>

<footer>
	<div class="footerImg">
		<a href="#"><img src="http://how2j.cn/tmall/img/site/ensure.png"></a>
	</div>
	<div class="footerMid">
		<div class="mid_column">
			<span class="mid_column_title">购物指南</span> 
			<a href="#">免费注册</a>
			<a href="#">开通支付宝</a>
			<a href="#">支付宝充值</a>
		</div>
		<div class="mid_column"> 
			<span class="mid_column_title">天猫保障</span> 
			<a href="#">发票保障</a>
			<a href="#">售后规则</a>
			<a href="#">缺货赔付</a>
		</div>
		<div class="mid_column"> 
			<span class="mid_column_title">支付方式</span> 
			<a href="#">快捷支付</a>
			<a href="#">信用卡</a>
			<a href="#">蚂蚁花呗</a>
			<a href="#">货到付款</a>
		</div>
		<div class="mid_column"> 
			<span class="mid_column_title">商家服务</span> 
			<a href="#">商家入驻</a>
			<a href="#">商家中心</a>
			<a href="#">天猫智库</a>
			<a href="#">天猫规则</a>
			<a href="#">物流服务</a>
			<a href="#">喵言喵语</a>
			<a href="#">运营服务</a>
		</div>
		<div class="mid_img">
			<span class="mid_column_title">手机天猫</span> 
			<img src="http://how2j.cn/tmall/img/site/ma.png">
		</div>
		<div style="clear: both;"></div>
	</div>
	<div style="clear: both;"></div>

	<div class="footerLogo">
		<img src="http://how2j.cn/tmall/img/site/cateye.png"> <!-- 天猫logo -->
	</div>
	<div class="footerBelow_outer">
		<div class="footerBelow">
			<div class="whiteLink">
				<a href="#">关于天猫</a>
				<a href="#">帮助中心</a>
				<a href="#">开放平台</a>
				<a href="#">诚聘英才</a>
				<a href="#">联系我们</a>
				<a href="#">网站合作</a>
				<a href="#">法律声明</a>
				<a href="#">知识产权</a>
				<a href="#">廉正举报</a>
			</div>
			<div class="whiteLink">
				<a href="#">阿里巴巴集团</a>
				<span>|</span>
				<a href="#">淘宝网</a>
				<span>|</span>
				<a href="#">天猫</a>
				<span>|</span>
				<a href="#">聚划算</a>
				<span>|</span>
				<a href="#">全球速卖通</a>
				<span>|</span>
				<a href="#">阿里巴巴国际交易市场</a>
				<span>|</span>
				<a href="#">1688</a>
				<span>|</span>
				<a href="#">阿里妈妈</a>
				<span>|</span>
				<a href="#">阿里旅行·去啊</a>
				<span>|</span>
				<a href="#">阿里云计算</a>
				<span>|</span>
				<a href="#">阿里通信</a>
				<span>|</span>
				<a href="#">YunOS</a>
				<span>|</span>
				<a href="#">天天动听</a>
				<span>|</span>
				<a href="#">来往</a>
				<span>|</span>
				<a href="#">钉钉</a>
				<span>|</span>
				<a href="#">支付宝</a>
				<span>|</span>
				<a href="#">万网</a>
				<span>|</span>
				<a href="#">高德</a>
				<span>|</span>
				<a href="#">优视</a>
				<span>|</span>
				<a href="#">友盟</a>
				<span>|</span>
				<a href="#">虾米</a>	
			</div>
			<div class="license">
				<span>增值电信业务经营许可证： 浙B2-20110446</span>
	            <span>网络文化经营许可证：浙网文[2015]0295-065号</span>
	            <span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
	            <span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
	            <div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
	            <div>
	                <img src="http://how2j.cn/tmall/img/site/copyRight1.jpg">
	                <img src="http://how2j.cn/tmall/img/site/copyRight2.jpg">
            	</div>
			</div>
		</div>
	</div>
</footer>

首页

包括了前面的公共页面，以及导航轮播、分类和推荐产品以及产品列表。再加上js交互。

导航轮播

效果：

布局：

代码：

<style type="text/css">
	body{
	    font-size:12px;
	    font-family:Arial;
	}
    div.item img {
        width: 100%;
    }

    div#carousel-outer {
        width: 1000px;
        margin: 20px auto;
    }
    div.headBar {
    	background-color: rgb(221, 39, 39);
    }
    div.headBar div.head {
    	display: inline-block;
    	width: 200px;
    	height: 36px;
    	line-height: 36px;
    	font-weight: bold; 
    	font-size: 16px;
    	margin:0 20px; 
    	color: white;
    	background-color: #C60A0A;
    	padding-left: 10px;
    }
    div.headBar div.rightMenu {
    	display: inline-block;
    }
    div.headBar div.rightMenu img {
    	height: 30px;
    }
    div.headBar div.rightMenu span {
    	margin-right: 40px;
    }
    div.headBar div.rightMenu span a {
    	color: white;
    	font-size: 16px;
    	text-decoration: none;
    }
    div.headBar div.rightMenu img#tmall {
    	display: inline;
    	width: 50%;
    }
    div#headBar_fill {
    	position: relative;
    	width: 100%;
    	height: 36px;
    	background-color: rgb(221, 39, 39);
    	top: -480px;
    	z-index: -1;
    }
    div#carousel_fill {
    	position: relative;
    	width: 100%;
    	height: 424px;
    	background-color: rgb(232, 232, 232);
    	top: -480px;
    	z-index: -1;
    }
</style>

<div id="carousel-outer" class="carousel slide" data-ride="carousel">
    	<div class="headBar">
    		<div class="head">
    			<span class="glyphicon glyphicon-th-list"></span>
		        <span>商品分类</span>
    		</div>
    		<div class="rightMenu">
    			<span><a href="#"><img src="http://how2j.cn/tmall/img/site/chaoshi.png"></a></span>
		        <span><a href="#"><img src="http://how2j.cn/tmall/img/site/guoji.png"></a></span>
                <span><a href="#">平板电视</a></span>        
                <span><a href="#">马桶</a></span>        
                <span><a href="#">沙发</a></span>        
                <span><a href="#">电热水器</a></span> 
    		</div>
    	</div>

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-outer" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-outer" data-slide-to="1"></li>
            <li data-target="#carousel-outer" data-slide-to="2"></li>
            <li data-target="#carousel-outer" data-slide-to="3"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://how2j.cn/tmall/img/lunbo/1.jpg">
            </div>
            <div class="item">
                <img src="http://how2j.cn/tmall/img/lunbo/2.jpg">
            </div>
            <div class="item">
                <img src="http://how2j.cn/tmall/img/lunbo/3.jpg">
            </div>
            <div class="item">
                <img src="http://how2j.cn/tmall/img/lunbo/4.jpg">
            </div>
        </div>
        
    </div>
    <!-- 轮播图颜色填充 -->
    <div id="headBar_fill"></div>
    <div id="carousel_fill"></div>
    <!-- 轮播图颜色填充 -->
</body>

关于背景颜色

单纯使用轮播，居中之后，两边是空白的，要添加背景颜色就需要像前面的置顶导航栏和页脚一样，添加外层div，设置width为100%，设置背景颜色。

但这里我觉得单纯轮播的代码块就够大了，所以我就在轮播div后添加了两个颜色填充div，使用relative定位移动到相应的位置，实现轮播图两边的背景颜色。

关于轮播图

细节部分我不是很了解，一开始我直接找到bootstrap4文档中的轮播图，复制粘贴过来，发现图片底部的指示器没有作用，点击没反应。

解决方法：
通过浏览器自带的开发者工具，打开之后发现报错提示bootstrap的版本不对，才发现我的库调用的是bootstrap3的版本，改成相应版本之后轮播图就正常了。


商品分类

布局：
如图所示。

商品列表

布局： 商品列表有很多类，每一个类作为一个div，每个div中包含五个商品div。如图所示。



交互

导航栏猫耳朵交互效果

思路： 将一张猫耳朵图片隐藏起来，当鼠标移到导航栏选项时，通过jQuery获取此时位置的left值，通过一定的平移显示得到相应的效果。由于每个选项的长度不一，为了使猫耳朵能在每个选项的正中间出现，可以把选项的宽度考虑在平移的长度中。

关键：jQuery的position()方法。
position() 方法返回第一个匹配元素的位置（相对于它的父元素）。
该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

代码：

					// 显示和隐藏猫耳朵
                $("div.headBar div.rightMenu span").mouseover(function() {
                    var pos_left = $(this).position().left;
                    var width_menu = $(this).css("width");
                    var pos_Left = parseInt(pos_left) + parseInt(width_menu)/2;
                    // 注意为$(this)而不是this
                    $("img.catEar").css({
                        left: pos_Left+246,
                    });
                    $("img.catEar").fadeIn(350);
                });
                $("div.headBar div.rightMenu span").mouseout(function() {
                    $("img.catEar").css("display", "none");
                    // 由于使用了绝对定位，使用fadeOut会有偏移
                });

分类页交互

思路： 一开始我打算用多级菜单，但想着想着头都大了，其实直接用两个块级元素就可以解决。左右两个块，左边块为分类标签，右边块为具体商品名字，把右边块隐藏起来，当鼠标移到分类标签上和右边块上时，相应右边块才显示出来，这里要注意，不仅是鼠标在分类标签上才显示，鼠标移到具体商品页的时候也要显示，不然鼠标移开标签，右边块就消失了。

关键：
1.jQuery的mouseover和mouseout方法。用原生JavaScript也可以做，不过从DOM结点树中找到想要的元素显然没有直接用CSS选择器来得方便和简洁。（这里又一次感受到jQuery库对于DOM操作的方便）
2. [cid="+cid_temp+"] cid为自定义的属性，用于区分不同的分类标签，同时cid的值为字符串，cid_temp经过前面的计算之后转化为Number数值类型，通过"+cid_temp+"重新转化为字符串。

jQuery代码：

				// 鼠标移到分类标签上，显示分类页内容
                $("div.category div.categoryMenu_list").mouseover(function() {
                    var cid_temp = $(this).attr("cid");
                    cid_temp = cid_temp%4 + 87;
                    // 总共14个list，由于懒的原因...用4个分类内容循环表示
                    $("div.categoryContent[cid="+cid_temp+"]").show();
                });
                // 鼠标移开分类标签，隐藏分类页内容
                $("div.category div.categoryMenu_list").mouseout(function() {
                    var cid_temp = $(this).attr("cid");
                    cid_temp = cid_temp%4 + 87;
                    $("div.categoryContent[cid="+cid_temp+"]").hide();
                });
                // 鼠标移到分类内容上，持续显示
                $("div.categoryContent").mouseover(function() {
                    var cid_temp = $(this).attr("cid");
                    $("div.categoryContent[cid="+cid_temp+"]").show();
                });
                // 鼠标移开分类内容，隐藏分类页内容
                $("div.categoryContent").mouseout(function() {
                    var cid_temp = $(this).attr("cid");
                    $("div.categoryContent[cid="+cid_temp+"]").hide();
                });

商品列表交互

思路： 鼠标移至商品div上，图片透明度变小，加上外边框。

关键：
1.CSS中hover即可。
2. outline由于固定了width，使用border会破坏水平方向布局，或者导致图片闪动，使用outline则可以规避这些问题。

代码：

			div.eachCategoryProducts div.productsItem:hover {
                outline: 0.5px solid red;
                /*不使用border，border会破坏水平布局*/
            }
            div.eachCategoryProducts div.productsItem img:hover {
                opacity: 0.7;
            }

登录和注册界面

登录

效果：

布局： 登录界面布局比较简单，用几个div即可，其中账户登录的外层div可以使用绝对定位脱离文档流，并定位到如图位置。

布局代码：

		body{
		    font-size:12px;
		    font-family:Arial;

                min-width:1020px;
		}
    	div.loginInterface {
    		width: 1190px;
    		margin: 0 auto;
    		position: relative;
    	}
 		div.loginInterface div.loginLogo {
 			margin: 20px 20px 20px 0;
 		} 
 		div.loginInterface div.loginBlock {
 			position: absolute;
 			width: 350px;
 			height: 400px;
 			top: 150px;
 			right: 100px;
 			border: 1px solid white;
 			background-color: white;
 			padding: 20px 10px 0px 10px;
 		}	
 		div.loginInterface div.loginBlock div.loginBlock_text {
 			font-weight: bold;
 			font-size: 15px;
 			color: rgb(60, 60, 60);
 			margin: 20px 10px;
 		}
 		div.loginInterface div.loginBlock div.loginBlock_input {
 			margin: 10px 10px;
 		}
 		div.loginInterface div.loginBlock div.loginBlock_input span {
 			width: 35px;
 			line-height: 35px;
 			text-align: center;
 			font-size: 20px;
 			display: inline-block;
 			color: rgb(96, 96, 96);
 			background-color: rgb(203, 203, 203);
 		}
 		div.loginInterface div.loginBlock div.loginBlock_input input {
 			height: 34px;
 			width: 269px;
 			position: relative;
 			top: -4px;
 			left: -5px;
 			padding-left: 5px;
 			border: 1px solid lightgray;
 		}
 		div.loginInterface div.loginBlock a {
 			display: inline-block;
 			margin: 10px 10px 20px 10px;
 			text-decoration: none;
 			color: gray;
 		}
 		div.loginInterface div.loginBlock a:hover {
 			color: rgb(218, 13, 30);
 		}
 		div.loginInterface div.loginBlock_button button {
 			width: 307px;
 			margin-left: 8px;
 			background-color: rgb(196, 0, 0);
 			color: white;
 			font-weight: bold;
 		}
 		div.loginSuccess {
            width: 200px;
            text-align: center;
            margin: 10px auto;
            font-size: 16px;
            color: rgb(196, 0, 0);
            display: none;
        }
        
	<div class="loginInterface">
		<div class="loginLogo">
			<a href="../首页/total.html"><img src="http://how2j.cn/tmall/img/site/simpleLogo.png"></a>
		</div>
		<img src="http://how2j.cn/tmall/img/site/loginBackground.png" class="loginBackground">
		<div class="loginBlock">
			<div class="loginBlock_text">账户登录</div>
			<div class="loginBlock_input">
				<span class=" glyphicon glyphicon-user"></span>
				<input type="text" placeholder="手机/会员名/邮箱" name="name" id="name">
			</div>
			<div class="loginBlock_input">
				<span class=" glyphicon glyphicon-lock"></span>
				<input type="password" placeholder="密码" name="password" id="password">
			</div>			
			<a href="#">忘记登录密码</a>
			<a href="register.html" class="pull-right">免费注册</a>
			<div class="loginBlock_button">
				<button class="btn btn-block">登录</button>
			</div>
			<div class="loginSuccess">
		        <p>登录成功！</p>
		    </div>
		</div>
	</div>

注册

效果：

布局： 注册界面和登录界面类似，我是直接套用登录界面的布局，其实可以再加上几个input输入，比如“确认密码”、“注册邮箱”、“手机号”和“已阅读XXX同意书”等等。

布局代码：参考登录界面布局代码。


交互

登录/注册界面输入提示

思路： 在登录模块后增加一行文字，采用绝对定位，并先隐藏起来，点击“登录”按钮事件之后，获取两个输入框的值，根据值是否为空分为对应的三种情况，修改文字块的字符串，再显示出来。在用户名和密码都输入了之后为“登录成功”，应跳转到首页。

关键：

  1. display隐藏；
  2. 获取input的值用value，jQuery：$("XX").val()方法，原生JavaScript：document.getElementById("xx").value属性；
  3. 修改字符串可以用innerHTML，也可以用jQuery的html()方法；
  4. 自动跳转页面使用BOM的window.location.replace(url)。

location对象：
是window对象的一部分，通过window.location属性访问，包含当前url的相关信息。

方法 说明
assign() 载入新的文档，可以后退上一页
reload() 重新载入当前文档
replace() 用新文档替换当前文档，不可后退上一页

window.location.assign(url)： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

代码：

$("div.loginBlock_button button").click(function() {
    var name = $("div.loginBlock_input input#name").val();
    // 注意这里与js的区别，js：.value，jQuery：.val()
    var password = $("div.loginBlock_input input#password").val()
    if (name == "")
        $("div.loginSuccess").html("请输入用户名！");
    else if (password == "")
        $("div.loginSuccess").html("请输入密码！");
    else {
        $("div.loginSuccess").html("登录成功！");
        window.location.replace("../首页/total_login.html");
    }
    $("div.loginSuccess").show();
});

注册界面交互实现类似，不赘述。

我的订单

效果：

布局： 订单页面布局相对复杂，分为标题部分和商品选项部分。

  1. 标题部分：同样用外层div嵌套内部几个div，margin: 0 auto居中；标题栏在五个文字后加入一个空div，实现大横条效果，（为什么不用大div border-bottom？-因为后面还有交互，点击“所有订单”、“待付款”等时，相应的文字下方的灰色横线变红，所以用每个span的下边框，而不是大div的下边框）。
  2. 商品选项部分：多个商品选项，每个选项都是一个table表格，通过colspan进行多列的合并。

布局代码：

div.myOrder_headBar {
	width: 1000px;
	margin: 0 auto;
	/*padding: 10px;*/
    padding-left: 0;
    padding-bottom: 0;
	/*border-bottom: 2px solid rgb(232, 232, 232);*/
}
div.myOrder_headBar:after {
	content: "";
	display: block;
	clear: both;
}
div.myOrder_headBar div.myOrder_headItem {
	float: left;
	text-align: center;
	width: 100px;   
    padding: 10px;
    border-bottom: 2px solid rgb(232, 232, 232);
}
div.myOrder_headBar div.myOrder_lastone {
    width: 500px;
    height: 19px;
    float: left;
    margin-top: 25.5px;
    border-bottom: 2px solid rgb(232, 232, 232);
}
div.myOrder_headBar div.myOrder_headItem a {
    color: black;
    font-weight: bold;
    font-size: 16px;
    width: 90px;
    display: inline-block;
    text-decoration: none;
    padding-right: 10px;
    border-right: 1px solid rgb(232, 232, 232);
}
div.myOrder_headBar div.myOrder_headItem a:active {

}
/*div.myOrder_headBar div.myOrder_headItem:hover {
	border-bottom: 2px solid rgb(196, 0, 0);
}*/
div.myOrder_headBar div.myOrder_headItem:hover a {
	color: rgb(196, 0, 0);
	text-decoration: none;
}
div.myOrder_tableTitle {
	width: 1000px;
	margin: 20px auto;
	background-color: rgb(245, 245, 245);
	line-height: 40px;
	border: 1px solid rgb(232, 232, 232);
}
div.myOrder_tableTitle span{
	display: inline-block;
	text-align: center;
}
div.myOrder_itemList {
    width: 1000px;
    margin: 20px auto;
}
div.myOrder_itemList table {
    width: 1000px;
    margin-top: 20px;
    border: 1px solid rgb(232, 232, 232);
}
div.myOrder_itemList a.wangwanglick {
    display: inline-block;
    background-image:url(http://how2j.cn/tmall/img/site/wangwang.gif);
}
div.myOrder_itemList tr.myOrder_itemTitle {
    background-color: rgb(241, 241, 241);
    height: 40px;
}
div.myOrder_itemList tr.myOrder_itemTitle td.myOrder_desc {
    /*padding: 10px;*/
    padding-left: 10px;
}
tr.myOrder_itemTitle_Content td.myOrder_desc {
    width: 470px;
}
tr.myOrder_itemTitle_Content td.myOrder_desc a {
    text-decoration: none;
    display: inline-block;
    position: relative;
    top: -30px;
    color: rgb(184, 184, 184);
}
tr.myOrder_itemTitle_Content td.myOrder_desc div {
    position: relative;
    bottom: -10px;
}
div.myOrder_itemList tr.myOrder_itemTitle div.wangwanglink {
    display: inline-block;
    background-image: url("http://how2j.cn/tmall/img/site/wangwang.gif");
    width: 67px;
    height: 22px;
}
div.myOrder_itemList table td {
    /*border: 1px solid black;*/
}
tr.myOrder_itemTitle_Content td.myOrder_pic {
    display: inline-block;
    margin: 10px;
    width: 70px;
} 
td.wangwanglink, td.myOrder_sum {
    text-align: center;
}
td.myOrder_sum {

    border-right: 1px solid rgb(232, 232, 232);
}
td.myOrder_price {
    width: 80px;
    border-right: 1px solid rgb(232, 232, 232);
}
td.myOrder_amount {
    width: 100px;
    text-align: center;
    border-right: 1px solid rgb(232, 232, 232);
}
td.orderItemDeleteTD a.deleteOrderLink {
    color: gray;
    font-size: 16px;
}
td.myOrder_confirm, td.orderItemDeleteTD{
    text-align: center;
    width: 110px;
}
td.myOrder_confirm button {
    color: white;
    background-color: rgb(102, 182, 255);
    border: rgb(102, 182, 255);
}
tr.myOrder_itemTitle_Content td.myOrder_desc a:hover {
    color: rgb(196, 0, 0);
}
div.myOrder_itemList table:hover {
    outline: 2px solid rgb(170, 170, 170);
}

<div class="myOrder_headBar">
		<div class="myOrder_headItem" sit="all">
			<a href="#" sit="all">所有订单</a>
		</div>
		<div class="myOrder_headItem" sit="pay">
			<a href="#" sit="pay">待付款</a>
		</div>
		<div class="myOrder_headItem" sit="send">
			<a href="#" sit="send">待发货</a>
		</div>
		<div class="myOrder_headItem" sit="confirm">
			<a href="#" sit="confirm">待收货</a>
		</div>
		<div class="myOrder_headItem" sit="evaluation">
			<a href="#" sit="evaluation">待评价</a>
		</div>
        <div class="myOrder_lastone">
        </div>
	</div>
	<div class="myOrder_tableTitle">
		<span id="baby" style="width: 560px;">宝贝</span>
		<span id="price" style="width: 100px;">单价</span>
		<span id="amount" style="width: 100px;">数量</span>
		<span id="pay" style="width: 120px;">实付款</span>
		<span id="deal" style="width: 100px;">交易操作</span>
	</div>
    <div class="myOrder_itemList">
        <table class="myOrder_itemContent" sit="evaluation">
            <tbody>
                <tr class="myOrder_itemTitle">
                    <td colspan="2" class="myOrder_desc">
                        <b>2019-04-12 17:00:41</b>
                        <span>订单号: 20190412170041674790
                    </td>
                    <td colspan="2">
                        <img width="13px" src="http://how2j.cn/tmall/img/site/orderItemTmall.png">天猫商场
                    </td>
                    <td colspan="1" class="wangwanglink">
                        <a href="#nowhere" class="wangwanglink">
                           <div class="wangwanglink"></div>
                        </a>
                    </td>
                    <td class="orderItemDeleteTD">
                        <a href="#nowhere" oid="946" class="deleteOrderLink">
                            <span class="orderListItemDelete glyphicon glyphicon-trash"></span>
                        </a>
                    </td>
                </tr>
                <tr class="myOrder_itemTitle_Content">
                    <td class="myOrder_pic">
                        <img src="https://gw.alicdn.com/bao/uploaded/i1/3283306745/O1CN01zQkMM91zhFyyBNHDj_!!0-item_pic.jpg" width="80px" height="80px">
                    </td>
                    <td class="myOrder_desc">
                        <div class="myOrder_ItemProductLinkOuterDiv">
                            <a href="#">影巨人蓝牙耳机无线耳塞式双耳苹果X通用</a>
                            <div class="myOrder_ItemProductLinkInnerDiv">
                                <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                                <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                                <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">                    
                            </div>
                        </div>
                    </td>
                    <td class="myOrder_price">
                        <p>￥88.00</p>
                    </td>
                    <td class="myOrder_amount">
                        <div>
                            1
                        </div>
                    </td>
                    <td class="myOrder_sum">
                        <div class="orderListItemProductRealPrice">
                            ￥88.00
                        </div>
                        <div class="orderListItemPriceWithTransport">
                            (含运费：￥0.00)
                        </div>
                    </td>
                    <td class="myOrder_confirm" sit="evaluation">
                        <a href="#nowhere">
                            <button class="orderListItemReview btn btn-primary">评价</button>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
	</div>
</div>

交互

商品选项选中浮现框

思路： 添加hover即可。

删除操作

（待更新）

标题标签点击切换

思路： 点击标题栏触发点击，根据自定义的属性值判断是什么要求，将满足要求的商品项显示，不满足的隐藏，同时将相应的标题栏选项的下边框和字体改变颜色。

关键：

  1. 可以用的显示/隐藏：display, hide(), show()，fadeIn()，fadeOut()；
  2. 自定义属性：属性值用字符串时要注意选择元素时，选择器中"+attribute_name+"，使用字符串和转换的变量都会出错；
  3. 修改CSS：jQuery的css()方法，原生JavaScript的style.cssText属性。

扩展：

  1. 没有做点击按钮之后的页面，其实可以加上点击按钮之后显示的页面，完善订单页的功能；
  2. 其他链接：商品的链接，商城链接，旺旺商家链接等等。
  3. 没有数据库操作。

推荐阅读