天猫整站Springboot系列教材（八十三）- 原型-前端

天猫整站Springboot系列教材（八十二）- 原型-前端 - 分类页

天猫整站Springboot系列教材（八十四）- 原型-前端 - 购物车页面

工具版本兼容问题

步骤 1 :

效果

edit 顶折

纠问

注：这里的原型是展示效果，让大家有个感性的认识，编码不在这里进行，项目开发过程会在后面的章节从零开始。

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<html>

<head>
	<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>
	<style>
.show {
	border: 1px dotted skyblue !important;
}

body {
	font-size: 12px;
	font-family: Arial;
	min-width:1024px;

}

a {
	color: #999;
}

a:hover {
	text-decoration: none;
	color: #C40000;
}

nav.top {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #e7e7e7;
}

.redColor {
	color: #C40000;
}

.boldWord {
	font-weight: bold;
}

nav.top span {
	margin-right: 20px;
}

nav.top span, nav.top a {
	color: #999;
	margin: 0px 10px 0px 10px;
}

nav.top a:hover {
	color: #C40000;
}

nav.top {
	background-color: #f2f2f2;
}

nav.top div.row div {
	margin: 5px 0px;
}

nav.top div.row div {
	background-color: lightgray;
	border: 1px solid gray;
	text-align: center;
}

div.searchDiv {
	background-color: #C40000;
	width: 400px;
	margin: 50px auto;
	padding: 1px;
	height: 40px;
	display: block;
}

div.searchDiv input {
	width: 275px;
	border: 1px solid transparent;
	height: 36px;
	margin: 1px;
	outline:none;
}

div.searchDiv button {
	width: 110px;
	border: 1px solid transparent;
	background-color: #C40000;
	color: white;
	font-size: 20px;
	font-weight: bold;
}

div.categoryWithCarousel {
	width: 100%;
	position:relative;
}

div.carouselBackgroundDiv{
	width:100%;
	height:510px;
	background-color: #E8E8E8;
	position: absolute;
	top:36px;
	
	z-index:-1;
	
}

div.categoryWithCarousel div.headbar {
	background-color: #DD2727;
}

div.carousel-of-product {
	width: 1024px;
	height: 510px;
	margin:0px auto;
}
div.carousel-inner div.item img{

}

div.categoryWithCarousel div.categoryMenu {
	width: 200px;
	background-color: #e2e2e3;
	
	margin-left: 20px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

div.categoryWithCarousel div.productsAsideCategorys {
	width: 825px;
	height: 510px;
	background-color: white;
	
	margin-left: 220px;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

div.categoryWithCarousel div.eachCategory:hover {
	background-color: white;
}

div.categoryWithCarousel div.eachCategory span {
	margin-right: 10px;
}

div.categoryWithCarousel div.eachCategory {
	
	line-height: 30px;
	padding-left: 10px;
	
	font-size: 14px;
	
}

div.categoryWithCarousel div.rightMenu {
	display: inline-block;
}

div.categoryWithCarousel div.rightMenu img {
	height: 30px;
}

div.categoryWithCarousel div.rightMenu span {
	margin: 0px 20px 0px 20px;
}

div.categoryWithCarousel div.rightMenu a {
	font-size: 16px;
	color: white;
}

div.categoryWithCarousel div.head {
	width: 200px;
	background-color: #C60A0A;
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	margin-left: 20px;
	display: inline-block;
}

div.productsAsideCategorys a {
	color: #999;
	font-size: 14px;
	margin: 8px;
}

div.productsAsideCategorys a:hover {
	color: #C40000;
	text-decoration: none;
}

div.productsAsideCategorys div.row {
	margin: 20px 80px 0px 80px;
}

div.productsAsideCategorys div.row div.seperator {
	margin-top: 20px;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #e7e7e7;
}

div.categoryMenu a {
	color: #000;
}

div.categoryMenu a:hover {
	color: lightskyblue;
	text-decoration: none;
}

div.searchBelow span {
	color: #999;
}

div.searchBelow {
	margin-top: 3px;
	margin-left: -20px;
}

div.searchBelow a {
	padding: 0px 20px 0px 20px;
	font-size: 14px;
}

div.homepageDiv{
	position:relative;
}

img.catear {
	position: absolute;
	height: 15px;
	display: none;
}

img.logo {
	position: absolute;
	left: 0px;
	top: 30px;

}

div.homepageCategoryProducts {
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}

div.left-mark {
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}

span.categoryTitle {
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}

div.productItem {
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}

a.productItemDescLink {
	display: inline-block;
	height: 66px;
}

div.productItem:hover {
	border: 1px solid #C40000;
}

div.productItem span.productItemDesc {
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}

div.productItem span.productPrice {
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}

div.eachHomepageCategoryProducts {
	margin: 0px 0px 40px 0px;
}

div.productItem img {
	width: 187px;
	height: 190px;
}

div.productItem  img:hover {
	opacity: 0.7;
	filter: alpha(opacity = 70);
}

img.endpng {
	display: block;
	width: 82px;
	margin: 0 auto;
}

div.footer {
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: solid;
	border-top-color: #e7e7e7;
}

div.footer_ensure {
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}

div.footer_desc {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}

div.footer div.copyright div.white_link a {
	color: white;
	padding: 0px 5px;
}

div.footer div.copyright div.white_link {
	padding: 10px 0px;
	margin-left: 10px;
}

div.footer_desc div.descColumn {
	width: 20%;
	float: left;
	padding-left: 15px;
}

div.footer_desc div.descColumn span.descColumnTitle {
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}

div.footer_desc a {
	display: block;
	padding-top: 3px;
}

div.copyright {
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: solid;
	border-top-color: #C40000;
}

img.cateye {
	margin-left: 20px;
}

div.copyright span.slash {
	color: white;
}

div.license {
	margin-left: 10px;
	padding-bottom: 30px;
}

div.license div.copyRightYear {
	margin: 10px 0px;
	color: #686868;
}

div.license span {
	color: #A4A4A4;
}

div.simpleLogo {
	padding: 32px 0px;
}

img.loginBackgroundImg {
	display: block;
	margin: 0px auto;
}

div.loginDivInProductPageModalDiv {
	width: 350px;
}

div.deleteConfirmModalDiv {
	width: 350px;
}

div.loginDivInProductPage {
	background-color: white;
	width: 350px;
	height: 400px;
	padding: 60px 25px 80px 25px;
}

div.loginSmallDiv {
	background-color: white;
	position: absolute;
	right: 180px;
	top: 180px;
	width: 350px;
	height: 400px;
	padding: 60px 25px 80px 25px;
}

div.loginErrorMessageDiv {
	width: 300px;
	position: absolute;
	top: 20px;
	display: none;
}

div.loginErrorMessageDiv div.alert {
	padding: 5px !important;
}

div.login_acount_text {
	color: #3C3C3C;
	font-size: 16px;
	font-weight: bold;
}

div.loginInput {
	border: 1px solid #CBCBCB;
	margin: 20px 0px;
}

div.loginInput input {
	display: inline-block;
	border: 0px solid transparent;
	width: 244px;
	height: 30px;
	position: relative;
	left: 6px;
	top: 6px;
}

div.loginInput span, div.loginInput input {
	display: inline-block;
}

div.loginInput span.loginInputIcon {
	margin: 0px;
	background-color: #CBCBCB;
	width: 40px;
	height: 40px;
}

span.loginInputIcon span.glyphicon {
	font-size: 22px;
	position: relative;
	left: 9px;
	top: 9px;
	color: #606060;
}

button.redButton {
	color: white;
	background-color: #C40000;
	font-size: 14px;
	font-weight: bold;
}

div.categorySortBar {
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}

table.categorySortBarTable td {
	border: 1px solid #CCCCCC;
	padding: 3px;
	height: 23px;
}

table.categorySortBarTable {
	border-collapse: collapse;
	display: inline-table;
}

table.categorySortBarTable td a {
	color: #806F66;
	font-size:12px;
}

table.categorySortBarTable td a:hover {
	color: #C40000;
}

table.categorySortBarTable td.grayColumn {
	background-color: #F1EDEC;
}

table.categorySortBarTable td.priceMiddleColumn {
	width: 10px;
	vertical-align: middle;
	color: #CCCCCC;
}

table.categorySortTable td:hover {
	background-color: #F1EDEC;
}

table.categorySortBarTable span.glyphicon {
	font-size: 10px;
}

table.categorySortBarTable input {
	border-width: 0px;
	height: 100%;
	width: 50px;
	font-size:12px;
}

div.categoryProducts {
	padding: 0px 20px 40px 20px;
}

div.productUnit {
	width: 225px;
	height: 338px;
	border: 3px solid #fff;
	background-color: white;
	margin: 12px 5px;
	float: left;
	padding: 0px;
}

div.productUnit:hover {
	width: 225px;
	border: 3px solid #C40000;
	padding: 0px;
}

div.productUnit span.productUnitDesc {
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}

div.productUnitFrame{
	border:1px solid #eee;
}
div.productUnitFrame:hover{
	border:1px solid #C40000;
}

div.productUnit span.productPrice {
	font-size: 20px;
	color: #CC0000;
	display: block;
	padding-left: 4px;
}

div.productUnit span.productReview {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #EEEEEE;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #EEEEEE;
}

div.productUnit a.productLink {
	margin: 10px 0px;
	color: #333333;
	font: 0.8em;
	display: block;
}

div.productUnit a.productLink:hover {
	text-decoration: underline;
	color: #C40000;
}

div.productUnit a.tmallLink {
	margin: 10px 0px;
	color: #999999;
	font: 0.8em;
	display: block;
	text-decoration: underline;
}

div.productUnit a.tmallLink:hover {
	text-decoration: underline;
	color: #C40000;
}

div.productUnit div.productInfo {
	color: #999999;
}

div.productUnit span.monthDeal, div.productUnit span.productReview {
	display: inline-block;
	width: 90px;
	height: 30px;
	padding-top: 5px;
	padding-left: 5px;
}

div.productUnit span.wangwang {
	padding-left: 3px;
}

div.productUnit span.productDealNumber {
	font-weight: bold;
	color: #B57C5B;
}

div.productUnit span.productReviewNumber {
	font-weight: bold;
	color: #3388BB;
}

div.productUnit img.productImage {
	width: 100%;
	height: 190px;
}

div.productUnit div.productInfo {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #EEEEEE;
}

img.simpleLogo {
	position: absolute;
	left: 10px;
	top: 50px;
	width: 140px;
}

div.simpleSearchDiv {
	background-color: #C40000;
	width: 300px;
	margin: 10px 20px 40px;
	padding: 1px;
	height: 40px;
	display: block;
}

div.simpleSearchDiv input {
	width: 225px;
	border: 1px solid transparent;
	height: 34px;
	margin: 2px;
	outline:none;
}

div.simpleSearchDiv button {
	width: 60px;
	border: 1px solid transparent;
	background-color: #C40000;
	color: white;
	font-size: 14px;
	
}

div.imgAndInfo {
	margin: 40px 20px;
}

div.imgAndInfo img.bigImg {
	width: 400px;
	height: 400px;
	padding: 20px;
	border: 1px solid #F2F2F2;
}

div.imgAndInfo div.smallImageDiv {
	width: 80%;
	margin: 20px auto;
}

div.imgAndInfo img.smallImage {
	width: 60px;
	height: 60px;
	border: 2px solid white;
}

div.imgAndInfo img.smallImage:hover {
	border: 2px solid black;
}

div.imgInimgAndInfo {
	width: 400px;
	float: left;
}

div.infoInimgAndInfo {
	padding: 0px 20px;
	overflow: hidden;
}

div.infoInimgAndInfo div.productTitle {
	color: black;
	font-size: 16px;
	font-weight: bold;
	margin: 0px 10px;
}

div.infoInimgAndInfo div.productSubTitle {
	color: #DD2727;
	font-size: 12px;
	
	margin: 0px 10px;
}

div.infoInimgAndInfo div.juhuasuan {
	
	background-color: #2DA77A;
	color: white;
	text-align: center;
	line-height: 40px;
	margin-top: 10px;
}

div.infoInimgAndInfo span.juhuasuanBig {
	font-size: 18px;
	font-weight: bold;
	font-family: Arial;
}

div.infoInimgAndInfo span.juhuasuanTime {
	color: #FFC057;
	font-weight: bold;
}

div.infoInimgAndInfo div.gouwujuanDiv {
	margin-top: 5px;
}

div.infoInimgAndInfo div.originalDiv {
	margin-top: 5px;
}

div.infoInimgAndInfo div.promotionDiv {
	margin-top: 0px;
}

div.infoInimgAndInfo div.productPriceDiv {
	background-image: url(https://how2j.cn/tmall/img/site/priceBackground.png);
	height: 102px;
	padding: 10px;
	color: #666666;
}

div.infoInimgAndInfo span.originalPriceDesc {
	color: #999999;
	display: inline-block;
	width: 68px;
}

div.infoInimgAndInfo span.promotionPriceDesc {
	color: #999999;
	display: inline-block;
	width: 68px;
	position: relative;
	left: 0px;
	top: -10px;
}

div.infoInimgAndInfo span.originalPriceYuan {
	font-family: Arial;
	font-size: 12px;
}

div.infoInimgAndInfo span.originalPrice {
	font-family: Arial;
	font-size: 12px;
	color: #333333;
	text-decoration: line-through;
}

div.infoInimgAndInfo span.promotionPriceYuan {
	font-family: Arial;
	font-size: 18px;
	color: #C40000;
	
}

div.infoInimgAndInfo span.promotionPrice {
	color: #c40000;
	font-family: Arial;
	font-size: 30px;
	font-weight: bold;
	
}

div.infoInimgAndInfo div.productSaleAndReviewNumber {
	margin: 20px 0px;
	border-top-style: dotted;
	border-top-color: #C9C9C9;
	border-top-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #C9C9C9;
	border-bottom-width: 1px;
	padding: 10px;
}

div.infoInimgAndInfo div.productSaleAndReviewNumber div {
	display: inline-block;
	width: 49%;
	text-align: center;
	color: #999999;
	font-size: 12px;
}

div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E5DFDA;
}

div.infoInimgAndInfo div.productNumber {
	color: #999999;
}

div.infoInimgAndInfo span.productNumberSettingSpan {
	border: 1px solid #999;
	display: inline-block;
	width: 43px;
	height: 32px;
	padding: 7px 0;
}

div.infoInimgAndInfo input.productNumberSetting {
	border: 0px;
	height: 80%;
	width: 80%;
}

div.productNumber span.glyphicon {
	font-size: 6px;
}

div.productNumber span.arrow {
    display: inline-block;
    width: 22px;
    height: 32px;
    vertical-align:top;
}

div.productNumber span.updown img{
    display:inline-block;
    vertical-align:top;
}
div.productNumber span.updown {
    border: 1px solid #999;
    display: block;
    width: 20px;
    height: 14px;
    text-align: center;
    padding-top:4px;
}

div.productNumber span.updownMiddle {
	height: 4px;
	display: block;
}

div.serviceCommitment {
	margin: 20px 0px;
}

div.infoInimgAndInfo span.serviceCommitmentDesc {
	color: #999999;
}

div.infoInimgAndInfo span.serviceCommitmentLink a {
	color: #666666;
}

div.productDetailDiv {
	width: 790px;
	margin: 40px auto;
}

div.productReviewDiv {
	width: 790px;
	margin: 40px auto;
}

div.productReviewContentPart {
	padding-top: 50px;
}

div.productDetailTopPart {
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}

div.productReviewTopPart {
	border: 1px solid #DFDFDF;
}

div.productParamterPart {
	border: 1px solid #DFDFDF;
	padding: 40px;
}

div.productParamter {
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}

div.productParamterList span {
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}

a.selected {
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}

a.selected:after {
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}

a.selected:before {
	border-color: #b00000;
	border-style: solid;
	border-width: 1px;
	content: "";
	display: block;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}

a.productDetailTopReviewLink {
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}

span.productDetailTopReviewLinkNumber {
	color: #3355B9;
}

span.productReviewTopReviewLinkNumber {
	color: #3355B9;
}

div.productDetailImagesPart img {
	display: block; margin 20px 0px;
	width: 790px;
}

a.productReviewTopPartSelectedLink {
	padding: 0px 20px;
	color: #333333;
}

div.productReviewItem {
	border-bottom: 1px solid #E3E3E3;
	margin: 10px 0px;
}

div.productReviewItem div.productReviewItemDesc {
	width: 80%;
	display: inline-block;
	color: #333333;
	height: 94px;
	margin: 5px 20px;
	float: left;
}

div.productReviewItem div.productReviewItemUserInfo {
	color: #404040;
	margin: 5px 20px;
	overflow: hidden;
	padding: 20px 0;
}

div.productReviewItemContent {
	
}

div.productReviewItemDate {
	margin: 15px 0px 0px 0px;
	color: #CCCCCC;
}

span.userInfoGrayPart {
	color: #999999;
}

div.productReviewDiv {
	display: none;
}

div.buyPageDiv {
	margin: 20px auto;
	max-width: 1013px;
}

div.buyDiv {
	margin: 20px auto;
	text-align: center;
}

div.buyPageDiv button {
	display: inline-block;
	margin: 0px 10px;
	width: 180px;
	height: 40px;
}

div.buyDiv button {
	display: inline-block;
	margin: 0px 10px;
	width: 180px;
	height: 40px;
}

button.buyButton {
	border: 1px solid #C40000;
	background-color: #FFEDED;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	
	color: #C40000;
	font-family: arial;
}

button.addCartButton {
	border: 1px solid #C40000;
	background-color: #C40000;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	
	color: white;
	font-family: arial;
}

button.addCartButton span.glyphicon {
	font-size: 12px;
	margin-right: 8px;
}

div.address {
	margin: 20px 5px;
	text-align: left;
}

div.addressTip, div.productListTip {
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 30px;
}

table.addressTable {
	margin: 20px 20px;
	width: 600px;
}

table.addressTable td.firstColumn {
	width: 100px;
}

table.addressTable td {
	color: #333333;
	text-align: right;
	vertical-align: top;
	padding-right: 5px;
	text-align: left;
	height: 30px;
	font-size:12px;
}

span.redStar {
	color: red;
	font-size: 8px;
}

table.addressTable td input {
	border: 1px solid #AFAFAF;
	width: 200px;
}

table.addressTable td textarea {
	border: 1px solid #AFAFAF;
	margin-bottom: 10px;
	width: 400px;
}

img.tmallbuy {
	width: 15px;
}

a.marketLink {
	color: black;
	font-size: 12px;
	font-family: Arial;
	font-weight: normal;
}

a.marketLink:hover {
	color: black;
	font-size: 12px;
	text-decoration: underline;
	font-family: Arial;
	font-weight: normal;
}

span.wangwangGif {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: -83px -0px;
	position: relative;
	top: 8px;
	left: 2px;
}

table.productListTable {
	width: 100%;
	border-collapse: separate;
}

table.productListTable th {
	color: #999999;
	font-family: Arial;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	padding-bottom: 5px;
}

th.productListTableFirstColumn {
	text-align: left !important;
}

table.productListTable tr.rowborder td {
	background-color: #b2d1ff;
	border-right: 2px solid #fff;
	height: 3px;
}

img.orderItemImg {
	width: 50px;
	height: 50px;
	border: 1px solid #E9E9E9;
}

tr.orderItemTR td {
	padding: 10px 0px;
}

a.orderItemProductLink {
	color: #666666;
	display: block;
}

a.orderItemProductLink:hover {
	color: #666666;
	text-decoration: underline;
}

td.orderItemProductInfo {
	text-align: left;
}

td.orderItemProductInfo img {
	height: 16px;
}

span.orderItemProductPrice, span.orderItemProductNumber {
	color: #000000;
}

span.orderItemUnitSum {
	color: #CC0000;
	font-weight: bold;
}

tr.orderItemTR td {
	border-bottom: 1px solid #E5E5E5;
}

tbody.productListTableTbody td {
	text-align: center;
	font-size:12px;
}

tbody.productListTableTbody td.orderItemFirstTD {
	text-align: left;
}

tbody.productListTableTbody td.orderItemProductInfo {
	text-align: left;
}

td.orderItemFirstTD, td.orderItemLastTD {
	border-bottom: 0px solid black !important;
}

label.orderItemDeliveryLabel {
	color: #666666;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
}

select.orderItemDeliverySelect {
	width: 100px;
	height: 23px;
}

div.orderItemSumDiv span {
	color: #999999;
}

div.orderItemSumDiv {
	padding: 20px;
	border-top: 2px solid #B4D0FF;
	background-color: #F2F6FF;
	height: 50px;
}

textarea.leaveMessageTextarea {
	border: 1px solid #FFAD35;
	width: 250px;
	height: 60px;
	resize: none;
}

span.leaveMessageText {
	display: inilne-block;
	margin-right: 10px;
	float: left;
}

span.leaveMessageTextareaSpan {
	display: inilne-block;
}

div.orderItemTotalSumDiv {
	margin: 40px;
	height: 40px;
}

div.orderItemTotalSumDiv span {
	color: #999999;
}

span.orderItemTotalSumSpan {
	color: #C40000 !important;
	font-size: 22px;
	font-weight: bold;
	border-bottom: 1px dotted #F2F6FF;
}

div.submitOrderDiv {
	height: 40px;
	margin: 20px 0px;
}

button.submitOrderButton {
	border: 1px solid #C40000;
	background-color: #C40000;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	font-weight: 700;
	color: white;
	float: right;
}

div.aliPayPageLogo {
	margin: 20px;
}

div.aliPayPageDiv {
	text-align: center;
	padding-bottom: 40px;
	max-width: 1013px;
	margin: 10px auto;
}

span.confirmMoneyText {
	color: #4D4D4D;
}

span.confirmMoney {
	display: block;
	color: #FF6600;
	font-weight: bold;
	font-size: 20px;
	margin: 10px;
}

img.aliPayImg {
	
}

button.confirmPay {
	background-color: #00AAEE;
	border: 1px solid #00AAEE;
	text-align: center;
	line-height: 31px;
	font-size: 14px;
	font-weight: 700;
	color: white;
	width: 107px;
	margin-top: 20px;
}

div.payedDiv {
	border: 1px solid #D4D4D4;
	max-width: 1013px;
	margin: 10px auto 20px auto;
}

div.payedTextDiv {
	height: 61px;
	background-color: #ECFFDC;
	padding: 17px 0px 0px 25px;
}

div.payedTextDiv span {
	font-weight: bold;
	font-size: 14px;
	margin-left: 10px;
}

div.payedAddressInfo {
	padding: 26px 35px;
}

div.payedAddressInfo li {
	background-image: url("https://how2j.cn/tmall/img/site/li_dot.png");
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: 0px 13px;
	list-style-type: none;
	color: #333333;
	padding-left: 15px;
	padding-top: 5px;
	
}

span.payedInfoPrice {
	color: #B10000;
	font-weight: bold;
	font-size: 14px;
	font-family: arial;
}

a.payedCheckLink {
	color: #2D8CBA;
}

a.payedCheckLink:hover {
	color: #2D8CBA;
	text-decoration: underline;
}

div.paedCheckLinkDiv {
	margin-left: 38px;
}

div.payedSeperateLine {
	border-top: 1px dotted #D4D4D4;
	margin: 0px 31px;
}

div.warningDiv {
	margin: 23px 45px;
}

div.warningDiv {
	color: black;
}

div.cartDiv {
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}

span.cartTitlePrice {
	color: #C40000;
	font-size: 14px;
	font-weight: bold;
	margin-left: 5px;
	margin-right: 3px;
}

div.cartTitle button {
	background-color: #AAAAAA;
	border: 1px solid #AAAAAA;
	color: white;
	width: 53px;
	height: 25px;
	border-radius: 2px;
}

table.cartProductTable {
	width: 100%;
	font-size:12px;
}

table.cartProductTable th {
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}

img.cartProductImg {
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}

a.cartProductLink {
	color: #3C3C3C;
}

a.cartProductLink:hover {
	color: #C40000;
	text-decoration: underline;
}

div.cartProductLinkOutDiv {
	position: relative;
	height: 80px;
}

div.cartProductLinkInnerDiv {
	position: absolute;
	bottom: 0;
	height: 20px;
}

tr.cartProductItemTR td {
	padding: 20px 20px;
}

tr.cartProductItemTR {
	border: 1px solid #CCCCCC;
}

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;
}

span.cartProductItemSmallSumPrice {
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}

div.cartProductChangeNumberDiv {
	border: solid 1px #E5E5E5;
	width: 80px;
}

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

div.cartProductChangeNumberDiv a {
	text-decoration: none;
}

div.cartProductChangeNumberDiv a {
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}

img.cartProductItemIfSelected, img.selectAllItem {
	cursor: pointer;
}

div.cartFoot {
	background-color: #E5E5E5;
	line-height: 50px;
	margin: 20px 0px;
	color: black;
	padding-left: 20px;
}

span.cartSumNumber {
	color: #C40000;
	font-weight: bold;
	font-size: 16px;
}

span.cartSumPrice {
	color: #C40000;
	font-weight: bold;
	font-size: 20px;
}

div.cartFoot button {
	background-color: #AAAAAA;
	border: 0px solid #AAAAAA;
	color: white;
	height: height%;
	width: 120px;
	height: 50px;
	font-size: 20px;
	text-align: center;
	
}

div.boughtDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.orderType div.selectedOrderType {
	border-bottom: 2px solid #C40000;
}

div.orderType div {
	border-bottom: 2px solid #E8E8E8;
	float: left;
}

table.orderListTitleTable {
	border: 1px solid #E8E8E8;
	width: 100%;
	margin: 20px 0px;
	background-color: #F5F5F5;
	text-align: center;
}

table.orderListTitleTable td {
	padding: 12px 0px;
}

div.orderType a {
	border-right: 1px solid #E8E8E8;
	float: left;
	font-size: 16px;
	font-weight: bold;
	color: black;
	margin-bottom: 10px;
	padding: 0px 20px;
	text-decoration: none;
}

div.orderType div.selectedOrderType a {
	color: #C40000;
}

div.orderType a:hover {
	color: #C40000;
	text-decoration: none;
}

div.orderTypeLastOne {
	overflow: hidden;
	float: none !important;
	border-bottom: 2px solid #E8E8E8;
}

a.noRightborder {
	border-right-width: 0px !important;
}

table.orderListItemTable {
	border: 2px solid #ECECEC;
	width: 100%;
	margin: 20px 0px;
}

table.orderListItemTable:hover {
	border: 2px solid #aaa !important;
}

tr.orderListItemFirstTR {
	background-color: #F1F1F1;
	font-size:12px;
}

table.orderListItemTable td {
	padding: 8px 10px;
}

div.orderItemWangWangGif {
	display: inline-block;
	width: 67px;
	height: 22px;
	background-image: url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: -0px -0px;
	position: relative;
	top: 0px;
	left: 2px;
}

span.orderListItemDelete {
	display: inline-block;
	margin: 0px 10px;
	color: #999999;
	font-size: 16px;
}

div.orderListItemProductLinkOutDiv {
	position: relative;
	height: 80px;
	font-size:12px;
}

div.orderListItemProductLinkInnerDiv {
	position: absolute;
	bottom: 0px;
}

div.orderListItemProductOriginalPrice {
	color: #999999;
	font-size: 14px;
}

div.orderListItemProductPrice {
	color: #3C3C3C;
	font-size: 14px;
}

div.orderListItemProductRealPrice {
	color: #3C3C3C;
	font-size: 14px;
	font-weight: bold;
}

div.orderListItemPriceWithTransport {
	color: #6C6C6C;
	font-size: 12px;
}

td.orderListItemProductRealPriceTD {
	text-align: center;
}

button.orderListItemConfirm {
	background-color: #66B6FF;
	border-radius: 2px;
	color: white;
	font-size: 12px;
	font-weight: bold;
	border-width: 0px;
	padding: 6px 12px;
}

button.orderListItemConfirm:hover {
	background-color: #118ADB;
}

button.orderListItemReview {
	border: 1px solid #DCDCDC;
	background-color: #fff;
	border-radius: 2px;
	color: #3C3C3C;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 12px;
}

button.orderListItemReview:hover {
	border-color: #C40000;
	color: #C40000;
}

td.orderItemDeleteTD {
	text-align: right;
}

td.orderListItemButtonTD {
	text-align: center;
}

span.orderListItemNumber {
	color: #3C3C3C;
}

td.orderListItemNumberTD {
	text-align: center;
}

div.confirmPayPageDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.confirmPayImageDiv {
	margin: 40px auto 80px auto;
	width: 900px;
	position: relative;
}

div.confirmPayImageDiv div {
	color: #999999;
}

div.confirmPayTime1 {
	position: absolute;
	top: 100px;
	left: -20px;
}

div.confirmPayTime2 {
	position: absolute;
	top: 100px;
	left: 190px;
}

div.confirmPayTime3 {
	position: absolute;
	top: 100px;
	left: 400px;
}

div.confirmPayOrderInfoText {
	margin: 10px 10px 0px 10px;
	font-size: 16px;
	font-weight: bold;
	color: black;
	padding-bottom: 15px;
	border-bottom: 1px solid #ADC8E6;
}

div.confirmPayOrderItemDiv {
	margin: 0px 20px;
}

div.confirmPayOrderItemText {
	margin: 20px 10px;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

table.confirmPayOrderItemTable thead {
	background-color: #E8F2FF;
	height: 33px;
}

table.confirmPayOrderItemTable tr {
	border: 1px solid #DDDDDD;
}

table.confirmPayOrderItemTable {
	border: 1px solid #DDDDDD;
	width: 100%;
}

span.conformPayProductPrice {
	font-size: 18px;
	font-weight: bold;
	color: #666666;
}

table.confirmPayOrderItemTable th, table.confirmPayOrderItemTable td {
	text-align: center;
}

table.confirmPayOrderItemTable td {
	padding: 20px;
}

td.confirmPayOrderItemProductLink {
	text-align: left !important;
}

div.confirmPayOrderItemText {
	color: black;
	font-weight: normal;
}

span.confirmPayOrderItemSumPrice {
	color: #C40000;
}

table.confirmPayOrderDetailTable {
	width: 100%;
	border-top: 1px solid #DDDDDD;
}

table.confirmPayOrderDetailTable td {
	padding: 8px;
	color: black;
	font-size: 14px;
}

div.confirmPayOrderDetailDiv {
	margin: 40px;
}

span.confirmPayOrderDetailWangWangGif {
	display: inline-block;
	width: 67px;
	height: 22px;
	background-image: url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: -0px -0px;
	position: relative;
	top: 0px;
	left: 2px;
}

div.confirmPayButtonDiv {
	border: 1px solid #F58B0F;
	margin: 20px;
}

div.confirmPayWarning {
	margin: 20px 80px;
	font-size: 18px;
	color: red;
	font-weight: bold;
}

button.confirmPayButton:hover {
	background-color: #F6AE30;
}

button.confirmPayButton {
	margin: 20px 80px;
	width: 67px;
	height: 30px;
	border: 1px solid #E67C00;
	background-color: #F4A21D;
	border-radius: 4px;
	color: white;
}

div.orderFinishDiv {
	border: 1px solid #E5E5E5;
	padding: 40px;
	max-width: 1013px;
	margin: 10px auto;
}

div.orderFinishDiv span {
	font-size: 14px;
	color: black;
	font-weight: bold;
	margin-left: 20px;
	padding-top: 20px;
}

div.reviewDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.reviewProductInfoRightDiv {
	overflow: hidden;
	border-top: 1px solid #E7E7E7;
	padding: 30px 20px;
}

div.reviewProductInfoImg {
	border: 1px solid #E7E7E7;
	width: 464px;
	text-align: center;
	float: left;
}

div.reviewProductInfoRightText {
	color: black;
	font-size: 16px;
	font-weight: bold;
}

span.reviewProductInfoTablePrice {
	color: #C40000;
	font-size: 20px;
	font-weight: bold;
}

span.reviewProductInfoTableSellNumber {
	color: #C40000;
	font-size: 14px;
	font-weight: bold;
}

table.reviewProductInfoTable {
	margin: 20px 10px;
}

table.reviewProductInfoTable td {
	padding-bottom: 5px;
	color: #999999;
}

div.reviewProductInfoRightBelowDiv {
	border: 1px solid #F6F5F3;
	background-color: #FDFBFA;
	height: 166px;
	padding: 16px 81px;
}

span.reviewProductInfoRightBelowImg {
	background-color: white;
	border: 1px solid #E1E1E1;
	display: inline-block;
	width: 23px;
	height: 42px;
	background-image: url(https://how2j.cn/tmall/img/site/reviewLight.png);
	background-repeat: no-repeat;
	padding: 0px;
}

span.reviewProductInfoRightBelowText {
	border: 1px solid #EFEFEF;
	
	display: inline-block;
	width: 200px;
	height: 42px;
	padding: 4px;
	position: relative;
	left: -4px;
	top: -7px;
	color: #666666;
}

div.reviewStasticsLeft {
	width: 180px;
	float: left;
}

div.reviewStasticsLeftTop {
	background-color: #C40000;
	height: 6px;
}

div.reviewStasticsLeftContent {
	line-height: 29px;
	border-left: 1px solid #D5D4D4;
	border-right: 1px solid #D5D4D4;
	background-color: #F6F5F1;
	text-align: center;
	font-size: 14px;
	color: #363535;
	font-weight: bold;
}

span.reviewStasticsNumber {
	color: #284CA5;
}

div.reviewStasticsLeftFoot {
	height: 6px;
	border-left: 1px solid #D5D4D4;
	border-bottom: 1px solid #D5D4D4;
	background-color: #F6F5F1;
}

div.reviewStasticsRight {
	overflow: hidden;
}

div.reviewStasticsRightEmpty {
	height: 35px;
}

div.reviewStasticsFoot {
	background-color: #F6F5F1;
	border: 1px solid #D5D4D4;
	border-left-width: 0px;
	height: 6px;
}

div.makeReviewDiv {
	border: 1px solid #D1CCC8;
	margin: 20px 0px;
	background-color: #EFEFEF;
}

div.makeReviewText {
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	margin: 20px 40px;
}

table.makeReviewTable {
	margin: 20px 40px;
}

table.makeReviewTable td {
	border: 1px solid #E7E7E7;
	padding: 10px;
	background-color: white;
}

table.makeReviewTable textarea {
	border-width: 0px;
	resize: none;
	width: 420px;
	height: 120px;
}

td.makeReviewTableFirstTD {
	background-color: #F6F6F6;
}

div.makeReviewButtonDiv {
	background-color: white;
	text-align: center;
	padding: 15px;
}

div.makeReviewButtonDiv button {
	width: 72px;
	height: 26px;
	border-radius: 2px;
	background-color: #C40000;
	color: white;
	border-width: 0px;
	font-weight: bold;
}

div.registerDiv {
	margin: 10px 20px;
	text-align: center;
}

table.registerTable {
	color: #3C3C3C;
	font-size: 16px;
	table-layout: fixed;
	margin-top: 50px;
}

table.registerTable td {
	
	padding: 10px 30px;
}

td.registerTableLeftTD {
	width: 300px;
	text-align: right;
}

td.registerTableRightTD {
	width: 300px;
	text-align: left;
}

td.registerTip {
	font-weight: bold;
}

table.registerTable input {
	border: 1px solid #DEDEDE;
	width: 213px;
	height: 36px;
	font-size: 14px;
}

td.registerButtonTD {
	text-align: center;
}

table.registerTable button {
	width: 170px;
	height: 36px;
	border-radius: 2px;
	color: white;
	background-color: #C40000;
	border-width: 0px;
}

table.registerTable {
	
}

div.registerSuccessDiv {
	margin: 10px 20px;
	background-color: #F3FDF6;
	border: 1px solid #DEF3E6;
	font-size: 16px;
	color: #3C3C3C;
	padding: 20px 130px;
}

div.categoryPageDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.searchResultDiv {
	max-width: 1013px;
	margin: 10px auto;
	min-height: 300px;
}

div.productPageDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.categoryPictureInProductPageDiv {
	width: 100%;
	margin: 10px auto;
	text-align: center;
}

div.reviewStasticsDiv {
	margin-top: 20px;
}

div.registerErrorMessageDiv {
	width: 600px;
	margin: 0px auto;
	height: 50px;
	visibility: hidden;
}

td.orderItemProductInfoPartTD {
	border-bottom: solid 1px #ECECEC;
}

td.orderItemOrderInfoPartTD {
	border: solid 1px #ECECEC;
}

div.reviewDate {
	width: 100px;
}

div.reviewDivlistReviewsEach div {
	display: inline-block;
}

div.reviewDate {
	color: #CCCCDD;
}

div.reviewContent {
	color: #333333;
	width: 698px;
}

div.reviewUserInfo {
	color: #333333;
}

div.reviewDivlistReviewsEach {
	padding: 20px;
	border-bottom: 1px solid #ECECEC;
}

span.reviewUserInfoAnonymous {
	color: #CCCCDD;
	margin-left: 5px;
}

a.productLink {
	height: 34px;
}

img.carouselImage {
	height: 510px !important;
}

div.noMatch {
	font-size: 20px;
	width: 200px;
	margin: 100px auto;
	color: #888;
}

table.cartProductTable th.operation{
	width:80px;
}
table.cartProductTable th.selectAndImage{
	width:150px;
}

table td{
	font-size:12px;	
}

</style>
<script>
function formatMoney(num){
	num = num.toString().replace(/\$|\,/g,'');  
	if(isNaN(num))  
	    num = "0";  
	sign = (num == (num = Math.abs(num)));  
	num = Math.floor(num*100+0.50000000001);  
	cents = num%100;  
	num = Math.floor(num/100).toString();  
	if(cents<10)  
	cents = "0" + cents;  
	for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)  
	num = num.substring(0,num.length-(4*i+3))+','+  
	num.substring(num.length-(4*i+3));  
	return (((sign)?'':'-') + num + '.' + cents);  
}
function checkEmpty(id, name){
	var value = $("#"+id).val();
	if(value.length==0){
		
		$("#"+id)[0].focus();
		return false;
	}
	return true;
}

$(function(){

	$("a.productDetailTopReviewLink").click(function(){
		$("div.productReviewDiv").show();
		$("div.productDetailDiv").hide();
	});
	$("a.productReviewTopPartSelectedLink").click(function(){
		$("div.productReviewDiv").hide();
		$("div.productDetailDiv").show();		
	});
	
	$("span.leaveMessageTextareaSpan").hide();
	$("img.leaveMessageImg").click(function(){
		
		$(this).hide();
		$("span.leaveMessageTextareaSpan").show();
		$("div.orderItemSumDiv").css("height","100px");
	});
	
	$("div#footer a[href$=#nowhere]").click(function(){
		alert("模仿天猫的连接，并没有跳转到实际的页面");
	});
	
	$("a.wangwanglink").click(function(){
		alert("模仿旺旺的图标，并不会打开旺旺");
	});
	$("a.notImplementLink").click(function(){
		alert("这个功能没做，蛤蛤~");
	});
	
});

</script>	
</head>

<body>

<nav class="top ">
		<a href="#nowhere">
			<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span>
			天猫首页
		</a>	
		
		<span>喵，欢迎来天猫</span>
		
			<a href="#nowhere">tmalltest</a>
			<a href="#nowhere">退出</a>		
		
		<span class="pull-right">
			<a href="#nowhere">我的订单</a>
			<a href="#nowhere">
			<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-shopping-cart redColor"></span>
			购物车<strong>5</strong>件</a>		
		</span>
		
</nav>

<div >
	<a href="#nowhere">
		<img id="simpleLogo" class="simpleLogo" src="https://how2j.cn/tmall/img/site/simpleLogo.png">	
	</a>
	
	<form  method="post" >	
	<div class="simpleSearchDiv pull-right">
		<input type="text" placeholder="平衡车 原汁机" name="keyword">
		<button class="searchButton" type="button">搜天猫</button>
		<div class="searchBelow">
			
					<span>
						<a href="#nowhere">
							冰箱
						</a>
										
							<span>|</span>				
						
					</span>			
				
					<span>
						<a href="#nowhere">
							空调
						</a>
										
							<span>|</span>				
						
					</span>			
				
					<span>
						<a href="#nowhere">
							女表
						</a>
										
							<span>|</span>				
						
					</span>			
				
					<span>
						<a href="#nowhere">
							男表
						</a>
						
					</span>			
				
		</div>
	</div>
	</form>
	<div style="clear:both"></div>
</div>

<title>模仿天猫官网 名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女</title>
<div class="categoryPictureInProductPageDiv">
	<img class="categoryPictureInProductPage" src="https://how2j.cn/tmall/img/category/68.jpg">
</div>

<div class="productPageDiv">

<script>

$(function(){
	var stock = 66;
	$(".productNumberSetting").keyup(function(){
		var num= $(".productNumberSetting").val();
		num = parseInt(num);
		if(isNaN(num))
			num= 1;
		if(num<=0)
			num = 1;
		if(num>stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	
	$(".increaseNumber").click(function(){
		var num= $(".productNumberSetting").val();
		num++;
		if(num>stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	$(".decreaseNumber").click(function(){
		var num= $(".productNumberSetting").val();
		--num;
		if(num<=0)
			num=1;
		$(".productNumberSetting").val(num);
	});
	
	$(".addCartLink").click(function(){
		var page = "forecheckLogin";
		if(false)$.get(
	            page,
	            function(result){
	            	if("success"==result){
	            		var pid = 819;
	            		var num= $(".productNumberSetting").val();
	            		var addCartpage = "foreaddCart";
	            		if(false)$.get(
	            				addCartpage,
	            	            {"pid":pid,"num":num},
	            	            function(result){
	            	            	if("success"==result){
	            	            		$(".addCartButton").html("已加入购物车");
	            	            		$(".addCartButton").attr("disabled","disabled");
	            	            		$(".addCartButton").css("background-color","lightgray")
	            	            		$(".addCartButton").css("border-color","lightgray")
	            	            		$(".addCartButton").css("color","black")
	            	            		
	            	            	}
	            	            	else{
	            	            		
	            	            	}
	            	            }
	            		);		            		
	            	}
	            	else{
						$("#loginModal").modal('hide');	            		
	            	}
	            }
		);		
		return false;
	});
	$(".buyLink").click(function(){
		var page = "forecheckLogin";
		if(false)$.get(
	            page,
	            function(result){
	            	if("success"==result){
	            		var num = $(".productNumberSetting").val();
	            		location.href= $(".buyLink").attr("href")+"&num="+num;
	            	}
	            	else{
						$("#loginModal").modal('hide');	            		
	            	}
	            }
		);		
		return false;
	});
	
	$("button.loginSubmitButton").click(function(){
		var name = $("#name").val();
		var password = $("#password").val();
		
		if(0==name.length||0==password.length){
			$("span.errorMessage").html("请输入账号密码");
			$("div.loginErrorMessageDiv").show();			
			return false;
		}
		
		var page = "foreloginAjax";
		if(false)$.get(
	            page,
	            {"name":name,"password":password},
	            function(result){
	            	if("success"==result){
	            		location.reload();
	            	}
	            	else{
	            		$("span.errorMessage").html("账号密码错误");
	            		$("div.loginErrorMessageDiv").show();	            		
	            	}
	            }
		);			
		
		return true;
	});
	
	$("img.smallImage").mouseenter(function(){
		var bigImageURL = $(this).attr("bigImageURL");
        $("img.bigImg").attr("src",bigImageURL);
	});
	
	$("img.bigImg").load(
		function(){
			$("img.smallImage").each(function(){
				var bigImageURL = $(this).attr("bigImageURL");
				img = new Image();
				img.src = bigImageURL;
				
				img.onload = function(){
					console.log(bigImageURL);	
					$("div.img4load").append($(img));
				};
			});		
		}
	);
});

</script>

<div class="imgAndInfo">

	<div class="imgInimgAndInfo">
		<img src="https://how2j.cn/tmall/img/productSingle/8620.jpg" class="bigImg">
		<div class="smallImageDiv">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8620.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8620.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8619.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8619.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8618.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8618.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8617.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8617.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8616.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8616.jpg" class="smallImage">
			
		</div>
		<div class="img4load hidden" ></div>
	</div>
	
	<div class="infoInimgAndInfo">
		
		<div class="productTitle">
			名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
		</div>
		<div class="productSubTitle">
			高端定制 高档棉麻 现货即发 加购物车 领优惠卷  
		</div>
		
		<div class="productPrice">
			<div class="juhuasuan">
				<span class="juhuasuanBig" >聚划算</span>
				<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
			</div>
			<div class="productPriceDiv">
				<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
				<span> 全天猫实物商品通用</span>
				
				</div>
				<div class="originalDiv">
					<span class="originalPriceDesc">价格</span>
					<span class="originalPriceYuan">¥</span>
					<span class="originalPrice">
					
						399.00					
					</span>
				</div>
				<div class="promotionDiv">
					<span class="promotionPriceDesc">促销价 </span>
					<span class="promotionPriceYuan">¥</span>
					<span class="promotionPrice">
						379.05
					</span>				
				</div>
			</div>
		</div>
		<div class="productSaleAndReviewNumber">
			<div>销量 <span class="redColor boldWord"> 50</span></div>	
			<div>累计评价 <span class="redColor boldWord"> 19</span></div>	
		</div>
		<div class="productNumber">
			<span>数量</span>
			<span>
				<span class="productNumberSettingSpan">
				<input class="productNumberSetting" type="text" value="1">
				</span>
				<span class="arrow">
					<a href="#nowhere" class="increaseNumber">
					<span class="updown">
							<img src="https://how2j.cn/tmall/img/site/increase.png">
					</span>
					</a>
					
					<span class="updownMiddle"> </span>
					<a href="#nowhere"  class="decreaseNumber">
					<span class="updown">
							<img src="https://how2j.cn/tmall/img/site/decrease.png">
					</span>
					</a>
					
				</span>
					
			件</span>
			<span>库存66件</span>
		</div>
		<div class="serviceCommitment">
			<span class="serviceCommitmentDesc">服务承诺</span>
			<span class="serviceCommitmentLink">
				<a href="#nowhere">正品保证</a>
				<a href="#nowhere">极速退款</a>
				<a href="#nowhere">赠运费险</a>
				<a href="#nowhere">七天无理由退换</a>
			</span>
		</div>	
		
		<div class="buyDiv">
			<a class="buyLink" href="#nowhere"><button class="buyButton">立即购买</button></a>
			<a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
		</div>
	</div>
	
	<div style="clear:both"></div>
	
</div>

<div class="productReviewDiv" >
	<div class="productReviewTopPart">
		<a  href="#nowhere" class="productReviewTopPartSelectedLink">商品详情</a>
		<a  href="#nowhere" class="selected">累计评价 <span class="productReviewTopReviewLinkNumber">19</span> </a>
	</div>
	
	<div class="productReviewContentPart">
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					不错的购物，包装很精细，布料也不错舒服，因为之前一直购买品牌装，很好的一次网购，生完宝宝刚刚一个多月我一百五十斤穿2XL不错
				</div>
				<div class="productReviewItemDate">2016-08-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				哀****莉<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					面料很好，大小也刚刚好，本来买之前还担心，犹豫，等货到了，比我心中想象的好很多，大家放心购买，很满意的购物，以后还会来??
				</div>
				<div class="productReviewItemDate">2016-08-23</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				贤*闲<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					<span>商品：</span>宝贝料子和手感都不错，是值这价，卖家很贴心的送了内衣带，5分好评是必须的。喜欢的可以 下手了
				</div>
				<div class="productReviewItemDate">2016-08-16</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				孤*****爱<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服收到了，给朋友买的，真心不错，料子也特别好，穿起来特别有气质，跟模特穿的效果差不多。。。好评，好评
				</div>
				<div class="productReviewItemDate">2016-08-19</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				哀****莉<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服不错，手感不错，试穿很有型，真心的喜欢，谢谢老板
				</div>
				<div class="productReviewItemDate">2016-07-19</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				孤*****爱<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					喜欢(⊙o⊙)哦，美美哒，值得一试！！！宽松雪纺，很舒服
				</div>
				<div class="productReviewItemDate">2016-08-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				这****0<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服已经收到，大小很合适，面料也可以，就是感觉衣服面料有一点厚，其他都还不错，款式也好看，希望店家多出一点新款，以后回来光顾你们。?
				</div>
				<div class="productReviewItemDate">2016-07-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				y****心<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					很漂亮的衣服，料子有垂感，我很满意，老公也说好呢
				</div>
				<div class="productReviewItemDate">2016-07-27</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				阿*丶<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					真不错，已经迫不及待的穿上了，朋友们都说好，挺有气质的，就是上衣稍微有点肥，不过肉肉被藏起来了！有看上的赶紧下单吧！
				</div>
				<div class="productReviewItemDate">2016-08-12</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				名*****_<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					质量是真的不错，适合个子高一点的美眉穿，很漂亮?
				</div>
				<div class="productReviewItemDate">2016-08-03</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				安**°<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					再买的时候纠结了好久，最后还是选择在这里购买，一次满意的网购，让我对网购有了希望，或刚收到，因觉得物超所值，就迫不及待拍了照片，那个玻璃的声音非常脆，我个人觉得挺好的，值得拥有！
				</div>
				<div class="productReviewItemDate">2016-08-08</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				这****0<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					<span>服务：</span>不错
				</div>
				<div class="productReviewItemDate">2016-08-20</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				醉**心<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					强烈推荐，我的天，质量也太好了，让我情何以堪，大爱啊。说说我的体格吧，162.105斤，腰围大概是22，穿m码刚刚好。快递那么快，特地跟店家说10号要外出店家也尽心备注的很好。真的特别感动，我收藏店铺了，下次还来你们家。衣服比雪纺舒服，薄薄的，现在穿刚好，我配了高跟鞋和小白鞋都很完美。店家还送了无痕肩带，真的太细心了，给一百个好评，赞。衣服我看了没有线头，薄薄的。不说了，我赶紧发给我姐让她看看。
				</div>
				<div class="productReviewItemDate">2016-08-17</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				安**°<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					此用户没有填写评论！
				</div>
				<div class="productReviewItemDate">2016-07-21</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				乱**型<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服质量真心不错很厚实，上身效果很棒哦，穿起来很舒服，很洋气。价格也很合理……赞赞赞
				</div>
				<div class="productReviewItemDate">2016-08-19</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				丶***眠<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服裤子都很合身，同事笑我说这是我买得最好看最时尚的一套衣服，衣服上身效果也不错，很是满意，还送了隐形带，正好用上，质量很好穿着凉快，唯一不足的就是洗了后需要烫一下才不皱，不过不影响衣服的美，很满意。上传两张没P的照片
				</div>
				<div class="productReviewItemDate">2016-08-08</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				乱**型<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					不好意思好久才来评价  质量好  上身效果好  主要有胖子穿的漂亮衣服啦   赞赞赞
				</div>
				<div class="productReviewItemDate">2016-07-11</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				l******1<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					网购以来为数不多的质量好到超乎意料，穿上特别舒服，大小也正合适，超赞！这个店里值得好好逛逛！
				</div>
				<div class="productReviewItemDate">2016-07-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				盗**记<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					宝贝面料很舒服，一字领也非常美，说实话是充上衣买的！犹豫了很长时间才下定决心的，很喜欢，很满意！喜欢就是最值的！
				</div>
				<div class="productReviewItemDate">2016-07-24</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				贤*闲<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
	</div>

</div>

<div class="productDetailDiv" >
	<div class="productDetailTopPart">
		<a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a>
		<a href="#nowhere" class="productDetailTopReviewLink">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
	</div>
	
	<div class="productParamterPart">
		<div class="productParamter">产品参数：</div>
		
		<div class="productParamterList">
			
				<span>材质成分:  聚酯纤维100% </span>
			
				<span>品牌:  Emyche/艾米秋 </span>
			
				<span>货号:  129668 </span>
			
				<span>尺码:  L M S XL X </span>
			
				<span>上市年份季节:  2016年夏季 </span>
			
				<span>颜色分类:  白色 黑色 浅蓝 </span>
			
				<span>适用年龄:  18-25周岁 </span>
			
		</div>
		<div style="clear:both"></div>
	</div>
	
	<div class="productDetailImagesPart">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8625.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8624.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8623.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8622.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8621.jpg">
			
	</div>
</div>

</div>

<div class="modal " id="loginModal" tabindex="-1" role="dialog" >
	<div class="modal-dialog loginDivInProductPageModalDiv">
	        <div class="modal-content">
					<div class="loginDivInProductPage">
						<div class="loginErrorMessageDiv">
							<div class="alert alert-danger" >
							  <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
							  	<span class="errorMessage"></span>
							</div>
						</div>
							
						<div class="login_acount_text">账户登录</div>
						<div class="loginInput " >
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-user"></span>
							</span>
							<input id="name" name="name" placeholder="手机/会员名/邮箱" type="text">			
						</div>
						
						<div class="loginInput " >
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-lock"></span>
							</span>
							<input id="password" name="password"  type="password" placeholder="密码" type="text">			
						</div>
									<span class="text-danger">不要输入真实的天猫账号密码</span><br><br>
						<div>
							<a href="#nowhere">忘记登录密码</a> 
							<a href="#nowhere" class="pull-right">免费注册</a> 
						</div>
						<div style="margin-top:20px">
							<button class="btn btn-block redButton loginSubmitButton" type="button">登录</button>
						</div>
					</div>	
	      </div>
	</div>
</div>

<div class="modal" id="deleteConfirmModal" tabindex="-1" role="dialog" >
	<div class="modal-dialog deleteConfirmModalDiv">
       <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">确认删除？</h4>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary deleteConfirmButton" id="submit" type="button">确认</button>
          </div>
        </div>
      </div>
	</div>
</div>

<div id="footer"  class="footer" style="display: block;">
	
    <div id="footer_ensure" class="footer_ensure">
            <a href="#nowhere">
            	<img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    
    <div id="footer_desc" class="footer_desc">
            <div class="descColumn">
			    <span class="descColumnTitle">购物指南</span>
			    <a href="#nowhere" >免费注册</a> 
			    <a href="#nowhere" >开通支付宝</a> 
			    <a href="#nowhere" >支付宝充值</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">天猫保障</span>
			    <a href="#nowhere" >发票保障</a> 
			    <a href="#nowhere" >售后规则</a> 
			    <a href="#nowhere" >缺货赔付</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">支付方式</span>
			    <a href="#nowhere" >快捷支付</a> 
			    <a href="#nowhere" >信用卡</a> 
			    <a href="#nowhere" >蚂蚁花呗</a>
			    <a href="#nowhere" >货到付款</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">商家服务</span>
			    <a href="#nowhere" >商家入驻</a> 
			    <a href="#nowhere" >商家中心</a> 
			    <a href="#nowhere" >天猫智库</a>
			    <a href="#nowhere" >天猫规则</a>
			    <a href="#nowhere" >物流服务</a>
			    <a href="#nowhere" >喵言喵语</a>
			    <a href="#nowhere" >运营服务</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">手机天猫</span>
			    <a href="#nowhere" ><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
			</div>
			
    </div>
    
    <div style="clear:both"></div>
    
    <img id="cateye" class="cateye" src="https://how2j.cn/tmall/img/site/cateye.png">
    
    <div id="copyright" class="copyright">
		<div class="white_link" >
			<a href="#nowhere" >关于天猫</a>
			<a href="#nowhere" > 帮助中心</a>
			<a href="#nowhere" >开放平台</a>
			<a href="#nowhere" >  诚聘英才</a>
			<a href="#nowhere" >联系我们</a>
			<a href="#nowhere" >网站合作</a>
			<a href="#nowhere" >法律声明</a>
			<a href="#nowhere" >知识产权</a>
			<a href="#nowhere" >  廉正举报	</a>
		</div>
		<div class="white_link" >
			<a href="#nowhere" > 阿里巴巴集团</a><span class="slash">|</span>
			<a href="#nowhere" > 淘宝网</a><span class="slash">|</span>
			<a href="#nowhere" >天猫 </a><span class="slash">|</span>
			<a href="#nowhere" >  聚划算</a><span class="slash">|</span>
			<a href="#nowhere" >全球速卖通</a><span class="slash">|</span>
			<a href="#nowhere" >阿里巴巴国际交易市场</a><span class="slash">|</span>
			<a href="#nowhere" >1688</a><span class="slash">|</span>
			<a href="#nowhere" >阿里妈妈</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里云计算	</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里通信 	</a><span class="slash">|</span>
			<a href="#nowhere" >  YunOS	</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere" >   万网	</a><span class="slash">|</span>
			<a href="#nowhere" >  高德	</a><span class="slash">|</span>
			<a href="#nowhere" > 优视 	</a><span class="slash">|</span>
			<a href="#nowhere" >  友盟	</a><span class="slash">|</span>
			<a href="#nowhere" >  虾米	</a><span class="slash">|</span>
			<a href="#nowhere" >  天天动听	</a><span class="slash">|</span>
			<a href="#nowhere" >  来往	</a><span class="slash">|</span>
			<a href="#nowhere" >  钉钉	</a><span class="slash">|</span>
			<a href="#nowhere" >  支付宝 		</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="https://how2j.cn/tmall/img/site/copyRight1.jpg">
		    	<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
		    </div>
		</div>
    </div>
</div>
</body>
</html>

源代码

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

<html>

<head>
	<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>
	<style>
.show {
	border: 1px dotted skyblue !important;
}

body {
	font-size: 12px;
	font-family: Arial;
	min-width:1024px;

}

a {
	color: #999;
}

a:hover {
	text-decoration: none;
	color: #C40000;
}

nav.top {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #e7e7e7;
}

.redColor {
	color: #C40000;
}

.boldWord {
	font-weight: bold;
}

nav.top span {
	margin-right: 20px;
}

nav.top span, nav.top a {
	color: #999;
	margin: 0px 10px 0px 10px;
}

nav.top a:hover {
	color: #C40000;
}

nav.top {
	background-color: #f2f2f2;
}

nav.top div.row div {
	margin: 5px 0px;
}

nav.top div.row div {
	background-color: lightgray;
	border: 1px solid gray;
	text-align: center;
}

div.searchDiv {
	background-color: #C40000;
	width: 400px;
	margin: 50px auto;
	padding: 1px;
	height: 40px;
	display: block;
}

div.searchDiv input {
	width: 275px;
	border: 1px solid transparent;
	height: 36px;
	margin: 1px;
	outline:none;
}

div.searchDiv button {
	width: 110px;
	border: 1px solid transparent;
	background-color: #C40000;
	color: white;
	font-size: 20px;
	font-weight: bold;
}

div.categoryWithCarousel {
	width: 100%;
	position:relative;
}

div.carouselBackgroundDiv{
	width:100%;
	height:510px;
	background-color: #E8E8E8;
	position: absolute;
	top:36px;
	
	z-index:-1;
	
}

div.categoryWithCarousel div.headbar {
	background-color: #DD2727;
}

div.carousel-of-product {
	width: 1024px;
	height: 510px;
	margin:0px auto;
}
div.carousel-inner div.item img{

}

div.categoryWithCarousel div.categoryMenu {
	width: 200px;
	background-color: #e2e2e3;
	
	margin-left: 20px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

div.categoryWithCarousel div.productsAsideCategorys {
	width: 825px;
	height: 510px;
	background-color: white;
	
	margin-left: 220px;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

div.categoryWithCarousel div.eachCategory:hover {
	background-color: white;
}

div.categoryWithCarousel div.eachCategory span {
	margin-right: 10px;
}

div.categoryWithCarousel div.eachCategory {
	
	line-height: 30px;
	padding-left: 10px;
	
	font-size: 14px;
	
}

div.categoryWithCarousel div.rightMenu {
	display: inline-block;
}

div.categoryWithCarousel div.rightMenu img {
	height: 30px;
}

div.categoryWithCarousel div.rightMenu span {
	margin: 0px 20px 0px 20px;
}

div.categoryWithCarousel div.rightMenu a {
	font-size: 16px;
	color: white;
}

div.categoryWithCarousel div.head {
	width: 200px;
	background-color: #C60A0A;
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	margin-left: 20px;
	display: inline-block;
}

div.productsAsideCategorys a {
	color: #999;
	font-size: 14px;
	margin: 8px;
}

div.productsAsideCategorys a:hover {
	color: #C40000;
	text-decoration: none;
}

div.productsAsideCategorys div.row {
	margin: 20px 80px 0px 80px;
}

div.productsAsideCategorys div.row div.seperator {
	margin-top: 20px;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #e7e7e7;
}

div.categoryMenu a {
	color: #000;
}

div.categoryMenu a:hover {
	color: lightskyblue;
	text-decoration: none;
}

div.searchBelow span {
	color: #999;
}

div.searchBelow {
	margin-top: 3px;
	margin-left: -20px;
}

div.searchBelow a {
	padding: 0px 20px 0px 20px;
	font-size: 14px;
}

div.homepageDiv{
	position:relative;
}

img.catear {
	position: absolute;
	height: 15px;
	display: none;
}

img.logo {
	position: absolute;
	left: 0px;
	top: 30px;

}

div.homepageCategoryProducts {
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}

div.left-mark {
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}

span.categoryTitle {
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}

div.productItem {
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}

a.productItemDescLink {
	display: inline-block;
	height: 66px;
}

div.productItem:hover {
	border: 1px solid #C40000;
}

div.productItem span.productItemDesc {
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}

div.productItem span.productPrice {
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}

div.eachHomepageCategoryProducts {
	margin: 0px 0px 40px 0px;
}

div.productItem img {
	width: 187px;
	height: 190px;
}

div.productItem  img:hover {
	opacity: 0.7;
	filter: alpha(opacity = 70);
}

img.endpng {
	display: block;
	width: 82px;
	margin: 0 auto;
}

div.footer {
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: solid;
	border-top-color: #e7e7e7;
}

div.footer_ensure {
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}

div.footer_desc {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}

div.footer div.copyright div.white_link a {
	color: white;
	padding: 0px 5px;
}

div.footer div.copyright div.white_link {
	padding: 10px 0px;
	margin-left: 10px;
}

div.footer_desc div.descColumn {
	width: 20%;
	float: left;
	padding-left: 15px;
}

div.footer_desc div.descColumn span.descColumnTitle {
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}

div.footer_desc a {
	display: block;
	padding-top: 3px;
}

div.copyright {
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: solid;
	border-top-color: #C40000;
}

img.cateye {
	margin-left: 20px;
}

div.copyright span.slash {
	color: white;
}

div.license {
	margin-left: 10px;
	padding-bottom: 30px;
}

div.license div.copyRightYear {
	margin: 10px 0px;
	color: #686868;
}

div.license span {
	color: #A4A4A4;
}

div.simpleLogo {
	padding: 32px 0px;
}

img.loginBackgroundImg {
	display: block;
	margin: 0px auto;
}

div.loginDivInProductPageModalDiv {
	width: 350px;
}

div.deleteConfirmModalDiv {
	width: 350px;
}

div.loginDivInProductPage {
	background-color: white;
	width: 350px;
	height: 400px;
	padding: 60px 25px 80px 25px;
}

div.loginSmallDiv {
	background-color: white;
	position: absolute;
	right: 180px;
	top: 180px;
	width: 350px;
	height: 400px;
	padding: 60px 25px 80px 25px;
}

div.loginErrorMessageDiv {
	width: 300px;
	position: absolute;
	top: 20px;
	display: none;
}

div.loginErrorMessageDiv div.alert {
	padding: 5px !important;
}

div.login_acount_text {
	color: #3C3C3C;
	font-size: 16px;
	font-weight: bold;
}

div.loginInput {
	border: 1px solid #CBCBCB;
	margin: 20px 0px;
}

div.loginInput input {
	display: inline-block;
	border: 0px solid transparent;
	width: 244px;
	height: 30px;
	position: relative;
	left: 6px;
	top: 6px;
}

div.loginInput span, div.loginInput input {
	display: inline-block;
}

div.loginInput span.loginInputIcon {
	margin: 0px;
	background-color: #CBCBCB;
	width: 40px;
	height: 40px;
}

span.loginInputIcon span.glyphicon {
	font-size: 22px;
	position: relative;
	left: 9px;
	top: 9px;
	color: #606060;
}

button.redButton {
	color: white;
	background-color: #C40000;
	font-size: 14px;
	font-weight: bold;
}

div.categorySortBar {
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}

table.categorySortBarTable td {
	border: 1px solid #CCCCCC;
	padding: 3px;
	height: 23px;
}

table.categorySortBarTable {
	border-collapse: collapse;
	display: inline-table;
}

table.categorySortBarTable td a {
	color: #806F66;
	font-size:12px;
}

table.categorySortBarTable td a:hover {
	color: #C40000;
}

table.categorySortBarTable td.grayColumn {
	background-color: #F1EDEC;
}

table.categorySortBarTable td.priceMiddleColumn {
	width: 10px;
	vertical-align: middle;
	color: #CCCCCC;
}

table.categorySortTable td:hover {
	background-color: #F1EDEC;
}

table.categorySortBarTable span.glyphicon {
	font-size: 10px;
}

table.categorySortBarTable input {
	border-width: 0px;
	height: 100%;
	width: 50px;
	font-size:12px;
}

div.categoryProducts {
	padding: 0px 20px 40px 20px;
}

div.productUnit {
	width: 225px;
	height: 338px;
	border: 3px solid #fff;
	background-color: white;
	margin: 12px 5px;
	float: left;
	padding: 0px;
}

div.productUnit:hover {
	width: 225px;
	border: 3px solid #C40000;
	padding: 0px;
}

div.productUnit span.productUnitDesc {
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}

div.productUnitFrame{
	border:1px solid #eee;
}
div.productUnitFrame:hover{
	border:1px solid #C40000;
}

div.productUnit span.productPrice {
	font-size: 20px;
	color: #CC0000;
	display: block;
	padding-left: 4px;
}

div.productUnit span.productReview {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #EEEEEE;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #EEEEEE;
}

div.productUnit a.productLink {
	margin: 10px 0px;
	color: #333333;
	font: 0.8em;
	display: block;
}

div.productUnit a.productLink:hover {
	text-decoration: underline;
	color: #C40000;
}

div.productUnit a.tmallLink {
	margin: 10px 0px;
	color: #999999;
	font: 0.8em;
	display: block;
	text-decoration: underline;
}

div.productUnit a.tmallLink:hover {
	text-decoration: underline;
	color: #C40000;
}

div.productUnit div.productInfo {
	color: #999999;
}

div.productUnit span.monthDeal, div.productUnit span.productReview {
	display: inline-block;
	width: 90px;
	height: 30px;
	padding-top: 5px;
	padding-left: 5px;
}

div.productUnit span.wangwang {
	padding-left: 3px;
}

div.productUnit span.productDealNumber {
	font-weight: bold;
	color: #B57C5B;
}

div.productUnit span.productReviewNumber {
	font-weight: bold;
	color: #3388BB;
}

div.productUnit img.productImage {
	width: 100%;
	height: 190px;
}

div.productUnit div.productInfo {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #EEEEEE;
}

img.simpleLogo {
	position: absolute;
	left: 10px;
	top: 50px;
	width: 140px;
}

div.simpleSearchDiv {
	background-color: #C40000;
	width: 300px;
	margin: 10px 20px 40px;
	padding: 1px;
	height: 40px;
	display: block;
}

div.simpleSearchDiv input {
	width: 225px;
	border: 1px solid transparent;
	height: 34px;
	margin: 2px;
	outline:none;
}

div.simpleSearchDiv button {
	width: 60px;
	border: 1px solid transparent;
	background-color: #C40000;
	color: white;
	font-size: 14px;
	
}

div.imgAndInfo {
	margin: 40px 20px;
}

div.imgAndInfo img.bigImg {
	width: 400px;
	height: 400px;
	padding: 20px;
	border: 1px solid #F2F2F2;
}

div.imgAndInfo div.smallImageDiv {
	width: 80%;
	margin: 20px auto;
}

div.imgAndInfo img.smallImage {
	width: 60px;
	height: 60px;
	border: 2px solid white;
}

div.imgAndInfo img.smallImage:hover {
	border: 2px solid black;
}

div.imgInimgAndInfo {
	width: 400px;
	float: left;
}

div.infoInimgAndInfo {
	padding: 0px 20px;
	overflow: hidden;
}

div.infoInimgAndInfo div.productTitle {
	color: black;
	font-size: 16px;
	font-weight: bold;
	margin: 0px 10px;
}

div.infoInimgAndInfo div.productSubTitle {
	color: #DD2727;
	font-size: 12px;
	
	margin: 0px 10px;
}

div.infoInimgAndInfo div.juhuasuan {
	
	background-color: #2DA77A;
	color: white;
	text-align: center;
	line-height: 40px;
	margin-top: 10px;
}

div.infoInimgAndInfo span.juhuasuanBig {
	font-size: 18px;
	font-weight: bold;
	font-family: Arial;
}

div.infoInimgAndInfo span.juhuasuanTime {
	color: #FFC057;
	font-weight: bold;
}

div.infoInimgAndInfo div.gouwujuanDiv {
	margin-top: 5px;
}

div.infoInimgAndInfo div.originalDiv {
	margin-top: 5px;
}

div.infoInimgAndInfo div.promotionDiv {
	margin-top: 0px;
}

div.infoInimgAndInfo div.productPriceDiv {
	background-image: url(https://how2j.cn/tmall/img/site/priceBackground.png);
	height: 102px;
	padding: 10px;
	color: #666666;
}

div.infoInimgAndInfo span.originalPriceDesc {
	color: #999999;
	display: inline-block;
	width: 68px;
}

div.infoInimgAndInfo span.promotionPriceDesc {
	color: #999999;
	display: inline-block;
	width: 68px;
	position: relative;
	left: 0px;
	top: -10px;
}

div.infoInimgAndInfo span.originalPriceYuan {
	font-family: Arial;
	font-size: 12px;
}

div.infoInimgAndInfo span.originalPrice {
	font-family: Arial;
	font-size: 12px;
	color: #333333;
	text-decoration: line-through;
}

div.infoInimgAndInfo span.promotionPriceYuan {
	font-family: Arial;
	font-size: 18px;
	color: #C40000;
	
}

div.infoInimgAndInfo span.promotionPrice {
	color: #c40000;
	font-family: Arial;
	font-size: 30px;
	font-weight: bold;
	
}

div.infoInimgAndInfo div.productSaleAndReviewNumber {
	margin: 20px 0px;
	border-top-style: dotted;
	border-top-color: #C9C9C9;
	border-top-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #C9C9C9;
	border-bottom-width: 1px;
	padding: 10px;
}

div.infoInimgAndInfo div.productSaleAndReviewNumber div {
	display: inline-block;
	width: 49%;
	text-align: center;
	color: #999999;
	font-size: 12px;
}

div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E5DFDA;
}

div.infoInimgAndInfo div.productNumber {
	color: #999999;
}

div.infoInimgAndInfo span.productNumberSettingSpan {
	border: 1px solid #999;
	display: inline-block;
	width: 43px;
	height: 32px;
	padding: 7px 0;
}

div.infoInimgAndInfo input.productNumberSetting {
	border: 0px;
	height: 80%;
	width: 80%;
}

div.productNumber span.glyphicon {
	font-size: 6px;
}

div.productNumber span.arrow {
    display: inline-block;
    width: 22px;
    height: 32px;
    vertical-align:top;
}

div.productNumber span.updown img{
    display:inline-block;
    vertical-align:top;
}
div.productNumber span.updown {
    border: 1px solid #999;
    display: block;
    width: 20px;
    height: 14px;
    text-align: center;
    padding-top:4px;
}

div.productNumber span.updownMiddle {
	height: 4px;
	display: block;
}

div.serviceCommitment {
	margin: 20px 0px;
}

div.infoInimgAndInfo span.serviceCommitmentDesc {
	color: #999999;
}

div.infoInimgAndInfo span.serviceCommitmentLink a {
	color: #666666;
}

div.productDetailDiv {
	width: 790px;
	margin: 40px auto;
}

div.productReviewDiv {
	width: 790px;
	margin: 40px auto;
}

div.productReviewContentPart {
	padding-top: 50px;
}

div.productDetailTopPart {
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}

div.productReviewTopPart {
	border: 1px solid #DFDFDF;
}

div.productParamterPart {
	border: 1px solid #DFDFDF;
	padding: 40px;
}

div.productParamter {
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}

div.productParamterList span {
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}

a.selected {
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}

a.selected:after {
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}

a.selected:before {
	border-color: #b00000;
	border-style: solid;
	border-width: 1px;
	content: "";
	display: block;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}

a.productDetailTopReviewLink {
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}

span.productDetailTopReviewLinkNumber {
	color: #3355B9;
}

span.productReviewTopReviewLinkNumber {
	color: #3355B9;
}

div.productDetailImagesPart img {
	display: block; margin 20px 0px;
	width: 790px;
}

a.productReviewTopPartSelectedLink {
	padding: 0px 20px;
	color: #333333;
}

div.productReviewItem {
	border-bottom: 1px solid #E3E3E3;
	margin: 10px 0px;
}

div.productReviewItem div.productReviewItemDesc {
	width: 80%;
	display: inline-block;
	color: #333333;
	height: 94px;
	margin: 5px 20px;
	float: left;
}

div.productReviewItem div.productReviewItemUserInfo {
	color: #404040;
	margin: 5px 20px;
	overflow: hidden;
	padding: 20px 0;
}

div.productReviewItemContent {
	
}

div.productReviewItemDate {
	margin: 15px 0px 0px 0px;
	color: #CCCCCC;
}

span.userInfoGrayPart {
	color: #999999;
}

div.productReviewDiv {
	display: none;
}

div.buyPageDiv {
	margin: 20px auto;
	max-width: 1013px;
}

div.buyDiv {
	margin: 20px auto;
	text-align: center;
}

div.buyPageDiv button {
	display: inline-block;
	margin: 0px 10px;
	width: 180px;
	height: 40px;
}

div.buyDiv button {
	display: inline-block;
	margin: 0px 10px;
	width: 180px;
	height: 40px;
}

button.buyButton {
	border: 1px solid #C40000;
	background-color: #FFEDED;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	
	color: #C40000;
	font-family: arial;
}

button.addCartButton {
	border: 1px solid #C40000;
	background-color: #C40000;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	
	color: white;
	font-family: arial;
}

button.addCartButton span.glyphicon {
	font-size: 12px;
	margin-right: 8px;
}

div.address {
	margin: 20px 5px;
	text-align: left;
}

div.addressTip, div.productListTip {
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 30px;
}

table.addressTable {
	margin: 20px 20px;
	width: 600px;
}

table.addressTable td.firstColumn {
	width: 100px;
}

table.addressTable td {
	color: #333333;
	text-align: right;
	vertical-align: top;
	padding-right: 5px;
	text-align: left;
	height: 30px;
	font-size:12px;
}

span.redStar {
	color: red;
	font-size: 8px;
}

table.addressTable td input {
	border: 1px solid #AFAFAF;
	width: 200px;
}

table.addressTable td textarea {
	border: 1px solid #AFAFAF;
	margin-bottom: 10px;
	width: 400px;
}

img.tmallbuy {
	width: 15px;
}

a.marketLink {
	color: black;
	font-size: 12px;
	font-family: Arial;
	font-weight: normal;
}

a.marketLink:hover {
	color: black;
	font-size: 12px;
	text-decoration: underline;
	font-family: Arial;
	font-weight: normal;
}

span.wangwangGif {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: -83px -0px;
	position: relative;
	top: 8px;
	left: 2px;
}

table.productListTable {
	width: 100%;
	border-collapse: separate;
}

table.productListTable th {
	color: #999999;
	font-family: Arial;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	padding-bottom: 5px;
}

th.productListTableFirstColumn {
	text-align: left !important;
}

table.productListTable tr.rowborder td {
	background-color: #b2d1ff;
	border-right: 2px solid #fff;
	height: 3px;
}

img.orderItemImg {
	width: 50px;
	height: 50px;
	border: 1px solid #E9E9E9;
}

tr.orderItemTR td {
	padding: 10px 0px;
}

a.orderItemProductLink {
	color: #666666;
	display: block;
}

a.orderItemProductLink:hover {
	color: #666666;
	text-decoration: underline;
}

td.orderItemProductInfo {
	text-align: left;
}

td.orderItemProductInfo img {
	height: 16px;
}

span.orderItemProductPrice, span.orderItemProductNumber {
	color: #000000;
}

span.orderItemUnitSum {
	color: #CC0000;
	font-weight: bold;
}

tr.orderItemTR td {
	border-bottom: 1px solid #E5E5E5;
}

tbody.productListTableTbody td {
	text-align: center;
	font-size:12px;
}

tbody.productListTableTbody td.orderItemFirstTD {
	text-align: left;
}

tbody.productListTableTbody td.orderItemProductInfo {
	text-align: left;
}

td.orderItemFirstTD, td.orderItemLastTD {
	border-bottom: 0px solid black !important;
}

label.orderItemDeliveryLabel {
	color: #666666;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
}

select.orderItemDeliverySelect {
	width: 100px;
	height: 23px;
}

div.orderItemSumDiv span {
	color: #999999;
}

div.orderItemSumDiv {
	padding: 20px;
	border-top: 2px solid #B4D0FF;
	background-color: #F2F6FF;
	height: 50px;
}

textarea.leaveMessageTextarea {
	border: 1px solid #FFAD35;
	width: 250px;
	height: 60px;
	resize: none;
}

span.leaveMessageText {
	display: inilne-block;
	margin-right: 10px;
	float: left;
}

span.leaveMessageTextareaSpan {
	display: inilne-block;
}

div.orderItemTotalSumDiv {
	margin: 40px;
	height: 40px;
}

div.orderItemTotalSumDiv span {
	color: #999999;
}

span.orderItemTotalSumSpan {
	color: #C40000 !important;
	font-size: 22px;
	font-weight: bold;
	border-bottom: 1px dotted #F2F6FF;
}

div.submitOrderDiv {
	height: 40px;
	margin: 20px 0px;
}

button.submitOrderButton {
	border: 1px solid #C40000;
	background-color: #C40000;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	font-weight: 700;
	color: white;
	float: right;
}

div.aliPayPageLogo {
	margin: 20px;
}

div.aliPayPageDiv {
	text-align: center;
	padding-bottom: 40px;
	max-width: 1013px;
	margin: 10px auto;
}

span.confirmMoneyText {
	color: #4D4D4D;
}

span.confirmMoney {
	display: block;
	color: #FF6600;
	font-weight: bold;
	font-size: 20px;
	margin: 10px;
}

img.aliPayImg {
	
}

button.confirmPay {
	background-color: #00AAEE;
	border: 1px solid #00AAEE;
	text-align: center;
	line-height: 31px;
	font-size: 14px;
	font-weight: 700;
	color: white;
	width: 107px;
	margin-top: 20px;
}

div.payedDiv {
	border: 1px solid #D4D4D4;
	max-width: 1013px;
	margin: 10px auto 20px auto;
}

div.payedTextDiv {
	height: 61px;
	background-color: #ECFFDC;
	padding: 17px 0px 0px 25px;
}

div.payedTextDiv span {
	font-weight: bold;
	font-size: 14px;
	margin-left: 10px;
}

div.payedAddressInfo {
	padding: 26px 35px;
}

div.payedAddressInfo li {
	background-image: url("https://how2j.cn/tmall/img/site/li_dot.png");
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: 0px 13px;
	list-style-type: none;
	color: #333333;
	padding-left: 15px;
	padding-top: 5px;
	
}

span.payedInfoPrice {
	color: #B10000;
	font-weight: bold;
	font-size: 14px;
	font-family: arial;
}

a.payedCheckLink {
	color: #2D8CBA;
}

a.payedCheckLink:hover {
	color: #2D8CBA;
	text-decoration: underline;
}

div.paedCheckLinkDiv {
	margin-left: 38px;
}

div.payedSeperateLine {
	border-top: 1px dotted #D4D4D4;
	margin: 0px 31px;
}

div.warningDiv {
	margin: 23px 45px;
}

div.warningDiv {
	color: black;
}

div.cartDiv {
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}

span.cartTitlePrice {
	color: #C40000;
	font-size: 14px;
	font-weight: bold;
	margin-left: 5px;
	margin-right: 3px;
}

div.cartTitle button {
	background-color: #AAAAAA;
	border: 1px solid #AAAAAA;
	color: white;
	width: 53px;
	height: 25px;
	border-radius: 2px;
}

table.cartProductTable {
	width: 100%;
	font-size:12px;
}

table.cartProductTable th {
	font-weight: normal;
	color: #3C3C3C;
	padding: 20px 20px;
}

img.cartProductImg {
	padding: 1px;
	border: 1px solid #EEEEEE;
	width: 80px;
	height: 80px;
}

a.cartProductLink {
	color: #3C3C3C;
}

a.cartProductLink:hover {
	color: #C40000;
	text-decoration: underline;
}

div.cartProductLinkOutDiv {
	position: relative;
	height: 80px;
}

div.cartProductLinkInnerDiv {
	position: absolute;
	bottom: 0;
	height: 20px;
}

tr.cartProductItemTR td {
	padding: 20px 20px;
}

tr.cartProductItemTR {
	border: 1px solid #CCCCCC;
}

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;
}

span.cartProductItemSmallSumPrice {
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #C40000;
}

div.cartProductChangeNumberDiv {
	border: solid 1px #E5E5E5;
	width: 80px;
}

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

div.cartProductChangeNumberDiv a {
	text-decoration: none;
}

div.cartProductChangeNumberDiv a {
	width: 14px;
	display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
}

img.cartProductItemIfSelected, img.selectAllItem {
	cursor: pointer;
}

div.cartFoot {
	background-color: #E5E5E5;
	line-height: 50px;
	margin: 20px 0px;
	color: black;
	padding-left: 20px;
}

span.cartSumNumber {
	color: #C40000;
	font-weight: bold;
	font-size: 16px;
}

span.cartSumPrice {
	color: #C40000;
	font-weight: bold;
	font-size: 20px;
}

div.cartFoot button {
	background-color: #AAAAAA;
	border: 0px solid #AAAAAA;
	color: white;
	height: height%;
	width: 120px;
	height: 50px;
	font-size: 20px;
	text-align: center;
	
}

div.boughtDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.orderType div.selectedOrderType {
	border-bottom: 2px solid #C40000;
}

div.orderType div {
	border-bottom: 2px solid #E8E8E8;
	float: left;
}

table.orderListTitleTable {
	border: 1px solid #E8E8E8;
	width: 100%;
	margin: 20px 0px;
	background-color: #F5F5F5;
	text-align: center;
}

table.orderListTitleTable td {
	padding: 12px 0px;
}

div.orderType a {
	border-right: 1px solid #E8E8E8;
	float: left;
	font-size: 16px;
	font-weight: bold;
	color: black;
	margin-bottom: 10px;
	padding: 0px 20px;
	text-decoration: none;
}

div.orderType div.selectedOrderType a {
	color: #C40000;
}

div.orderType a:hover {
	color: #C40000;
	text-decoration: none;
}

div.orderTypeLastOne {
	overflow: hidden;
	float: none !important;
	border-bottom: 2px solid #E8E8E8;
}

a.noRightborder {
	border-right-width: 0px !important;
}

table.orderListItemTable {
	border: 2px solid #ECECEC;
	width: 100%;
	margin: 20px 0px;
}

table.orderListItemTable:hover {
	border: 2px solid #aaa !important;
}

tr.orderListItemFirstTR {
	background-color: #F1F1F1;
	font-size:12px;
}

table.orderListItemTable td {
	padding: 8px 10px;
}

div.orderItemWangWangGif {
	display: inline-block;
	width: 67px;
	height: 22px;
	background-image: url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: -0px -0px;
	position: relative;
	top: 0px;
	left: 2px;
}

span.orderListItemDelete {
	display: inline-block;
	margin: 0px 10px;
	color: #999999;
	font-size: 16px;
}

div.orderListItemProductLinkOutDiv {
	position: relative;
	height: 80px;
	font-size:12px;
}

div.orderListItemProductLinkInnerDiv {
	position: absolute;
	bottom: 0px;
}

div.orderListItemProductOriginalPrice {
	color: #999999;
	font-size: 14px;
}

div.orderListItemProductPrice {
	color: #3C3C3C;
	font-size: 14px;
}

div.orderListItemProductRealPrice {
	color: #3C3C3C;
	font-size: 14px;
	font-weight: bold;
}

div.orderListItemPriceWithTransport {
	color: #6C6C6C;
	font-size: 12px;
}

td.orderListItemProductRealPriceTD {
	text-align: center;
}

button.orderListItemConfirm {
	background-color: #66B6FF;
	border-radius: 2px;
	color: white;
	font-size: 12px;
	font-weight: bold;
	border-width: 0px;
	padding: 6px 12px;
}

button.orderListItemConfirm:hover {
	background-color: #118ADB;
}

button.orderListItemReview {
	border: 1px solid #DCDCDC;
	background-color: #fff;
	border-radius: 2px;
	color: #3C3C3C;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 12px;
}

button.orderListItemReview:hover {
	border-color: #C40000;
	color: #C40000;
}

td.orderItemDeleteTD {
	text-align: right;
}

td.orderListItemButtonTD {
	text-align: center;
}

span.orderListItemNumber {
	color: #3C3C3C;
}

td.orderListItemNumberTD {
	text-align: center;
}

div.confirmPayPageDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.confirmPayImageDiv {
	margin: 40px auto 80px auto;
	width: 900px;
	position: relative;
}

div.confirmPayImageDiv div {
	color: #999999;
}

div.confirmPayTime1 {
	position: absolute;
	top: 100px;
	left: -20px;
}

div.confirmPayTime2 {
	position: absolute;
	top: 100px;
	left: 190px;
}

div.confirmPayTime3 {
	position: absolute;
	top: 100px;
	left: 400px;
}

div.confirmPayOrderInfoText {
	margin: 10px 10px 0px 10px;
	font-size: 16px;
	font-weight: bold;
	color: black;
	padding-bottom: 15px;
	border-bottom: 1px solid #ADC8E6;
}

div.confirmPayOrderItemDiv {
	margin: 0px 20px;
}

div.confirmPayOrderItemText {
	margin: 20px 10px;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

table.confirmPayOrderItemTable thead {
	background-color: #E8F2FF;
	height: 33px;
}

table.confirmPayOrderItemTable tr {
	border: 1px solid #DDDDDD;
}

table.confirmPayOrderItemTable {
	border: 1px solid #DDDDDD;
	width: 100%;
}

span.conformPayProductPrice {
	font-size: 18px;
	font-weight: bold;
	color: #666666;
}

table.confirmPayOrderItemTable th, table.confirmPayOrderItemTable td {
	text-align: center;
}

table.confirmPayOrderItemTable td {
	padding: 20px;
}

td.confirmPayOrderItemProductLink {
	text-align: left !important;
}

div.confirmPayOrderItemText {
	color: black;
	font-weight: normal;
}

span.confirmPayOrderItemSumPrice {
	color: #C40000;
}

table.confirmPayOrderDetailTable {
	width: 100%;
	border-top: 1px solid #DDDDDD;
}

table.confirmPayOrderDetailTable td {
	padding: 8px;
	color: black;
	font-size: 14px;
}

div.confirmPayOrderDetailDiv {
	margin: 40px;
}

span.confirmPayOrderDetailWangWangGif {
	display: inline-block;
	width: 67px;
	height: 22px;
	background-image: url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: -0px -0px;
	position: relative;
	top: 0px;
	left: 2px;
}

div.confirmPayButtonDiv {
	border: 1px solid #F58B0F;
	margin: 20px;
}

div.confirmPayWarning {
	margin: 20px 80px;
	font-size: 18px;
	color: red;
	font-weight: bold;
}

button.confirmPayButton:hover {
	background-color: #F6AE30;
}

button.confirmPayButton {
	margin: 20px 80px;
	width: 67px;
	height: 30px;
	border: 1px solid #E67C00;
	background-color: #F4A21D;
	border-radius: 4px;
	color: white;
}

div.orderFinishDiv {
	border: 1px solid #E5E5E5;
	padding: 40px;
	max-width: 1013px;
	margin: 10px auto;
}

div.orderFinishDiv span {
	font-size: 14px;
	color: black;
	font-weight: bold;
	margin-left: 20px;
	padding-top: 20px;
}

div.reviewDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.reviewProductInfoRightDiv {
	overflow: hidden;
	border-top: 1px solid #E7E7E7;
	padding: 30px 20px;
}

div.reviewProductInfoImg {
	border: 1px solid #E7E7E7;
	width: 464px;
	text-align: center;
	float: left;
}

div.reviewProductInfoRightText {
	color: black;
	font-size: 16px;
	font-weight: bold;
}

span.reviewProductInfoTablePrice {
	color: #C40000;
	font-size: 20px;
	font-weight: bold;
}

span.reviewProductInfoTableSellNumber {
	color: #C40000;
	font-size: 14px;
	font-weight: bold;
}

table.reviewProductInfoTable {
	margin: 20px 10px;
}

table.reviewProductInfoTable td {
	padding-bottom: 5px;
	color: #999999;
}

div.reviewProductInfoRightBelowDiv {
	border: 1px solid #F6F5F3;
	background-color: #FDFBFA;
	height: 166px;
	padding: 16px 81px;
}

span.reviewProductInfoRightBelowImg {
	background-color: white;
	border: 1px solid #E1E1E1;
	display: inline-block;
	width: 23px;
	height: 42px;
	background-image: url(https://how2j.cn/tmall/img/site/reviewLight.png);
	background-repeat: no-repeat;
	padding: 0px;
}

span.reviewProductInfoRightBelowText {
	border: 1px solid #EFEFEF;
	
	display: inline-block;
	width: 200px;
	height: 42px;
	padding: 4px;
	position: relative;
	left: -4px;
	top: -7px;
	color: #666666;
}

div.reviewStasticsLeft {
	width: 180px;
	float: left;
}

div.reviewStasticsLeftTop {
	background-color: #C40000;
	height: 6px;
}

div.reviewStasticsLeftContent {
	line-height: 29px;
	border-left: 1px solid #D5D4D4;
	border-right: 1px solid #D5D4D4;
	background-color: #F6F5F1;
	text-align: center;
	font-size: 14px;
	color: #363535;
	font-weight: bold;
}

span.reviewStasticsNumber {
	color: #284CA5;
}

div.reviewStasticsLeftFoot {
	height: 6px;
	border-left: 1px solid #D5D4D4;
	border-bottom: 1px solid #D5D4D4;
	background-color: #F6F5F1;
}

div.reviewStasticsRight {
	overflow: hidden;
}

div.reviewStasticsRightEmpty {
	height: 35px;
}

div.reviewStasticsFoot {
	background-color: #F6F5F1;
	border: 1px solid #D5D4D4;
	border-left-width: 0px;
	height: 6px;
}

div.makeReviewDiv {
	border: 1px solid #D1CCC8;
	margin: 20px 0px;
	background-color: #EFEFEF;
}

div.makeReviewText {
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	margin: 20px 40px;
}

table.makeReviewTable {
	margin: 20px 40px;
}

table.makeReviewTable td {
	border: 1px solid #E7E7E7;
	padding: 10px;
	background-color: white;
}

table.makeReviewTable textarea {
	border-width: 0px;
	resize: none;
	width: 420px;
	height: 120px;
}

td.makeReviewTableFirstTD {
	background-color: #F6F6F6;
}

div.makeReviewButtonDiv {
	background-color: white;
	text-align: center;
	padding: 15px;
}

div.makeReviewButtonDiv button {
	width: 72px;
	height: 26px;
	border-radius: 2px;
	background-color: #C40000;
	color: white;
	border-width: 0px;
	font-weight: bold;
}

div.registerDiv {
	margin: 10px 20px;
	text-align: center;
}

table.registerTable {
	color: #3C3C3C;
	font-size: 16px;
	table-layout: fixed;
	margin-top: 50px;
}

table.registerTable td {
	
	padding: 10px 30px;
}

td.registerTableLeftTD {
	width: 300px;
	text-align: right;
}

td.registerTableRightTD {
	width: 300px;
	text-align: left;
}

td.registerTip {
	font-weight: bold;
}

table.registerTable input {
	border: 1px solid #DEDEDE;
	width: 213px;
	height: 36px;
	font-size: 14px;
}

td.registerButtonTD {
	text-align: center;
}

table.registerTable button {
	width: 170px;
	height: 36px;
	border-radius: 2px;
	color: white;
	background-color: #C40000;
	border-width: 0px;
}

table.registerTable {
	
}

div.registerSuccessDiv {
	margin: 10px 20px;
	background-color: #F3FDF6;
	border: 1px solid #DEF3E6;
	font-size: 16px;
	color: #3C3C3C;
	padding: 20px 130px;
}

div.categoryPageDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.searchResultDiv {
	max-width: 1013px;
	margin: 10px auto;
	min-height: 300px;
}

div.productPageDiv {
	max-width: 1013px;
	margin: 10px auto;
}

div.categoryPictureInProductPageDiv {
	width: 100%;
	margin: 10px auto;
	text-align: center;
}

div.reviewStasticsDiv {
	margin-top: 20px;
}

div.registerErrorMessageDiv {
	width: 600px;
	margin: 0px auto;
	height: 50px;
	visibility: hidden;
}

td.orderItemProductInfoPartTD {
	border-bottom: solid 1px #ECECEC;
}

td.orderItemOrderInfoPartTD {
	border: solid 1px #ECECEC;
}

div.reviewDate {
	width: 100px;
}

div.reviewDivlistReviewsEach div {
	display: inline-block;
}

div.reviewDate {
	color: #CCCCDD;
}

div.reviewContent {
	color: #333333;
	width: 698px;
}

div.reviewUserInfo {
	color: #333333;
}

div.reviewDivlistReviewsEach {
	padding: 20px;
	border-bottom: 1px solid #ECECEC;
}

span.reviewUserInfoAnonymous {
	color: #CCCCDD;
	margin-left: 5px;
}

a.productLink {
	height: 34px;
}

img.carouselImage {
	height: 510px !important;
}

div.noMatch {
	font-size: 20px;
	width: 200px;
	margin: 100px auto;
	color: #888;
}

table.cartProductTable th.operation{
	width:80px;
}
table.cartProductTable th.selectAndImage{
	width:150px;
}

table td{
	font-size:12px;	
}

</style>
<script>
function formatMoney(num){
	num = num.toString().replace(/\$|\,/g,'');  
	if(isNaN(num))  
	    num = "0";  
	sign = (num == (num = Math.abs(num)));  
	num = Math.floor(num*100+0.50000000001);  
	cents = num%100;  
	num = Math.floor(num/100).toString();  
	if(cents<10)  
	cents = "0" + cents;  
	for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)  
	num = num.substring(0,num.length-(4*i+3))+','+  
	num.substring(num.length-(4*i+3));  
	return (((sign)?'':'-') + num + '.' + cents);  
}
function checkEmpty(id, name){
	var value = $("#"+id).val();
	if(value.length==0){
		
		$("#"+id)[0].focus();
		return false;
	}
	return true;
}

$(function(){

$("a.productDetailTopReviewLink").click(function(){
		$("div.productReviewDiv").show();
		$("div.productDetailDiv").hide();
	});
	$("a.productReviewTopPartSelectedLink").click(function(){
		$("div.productReviewDiv").hide();
		$("div.productDetailDiv").show();		
	});
	
	$("span.leaveMessageTextareaSpan").hide();
	$("img.leaveMessageImg").click(function(){
		
		$(this).hide();
		$("span.leaveMessageTextareaSpan").show();
		$("div.orderItemSumDiv").css("height","100px");
	});
	
	$("div#footer a[href$=#nowhere]").click(function(){
		alert("模仿天猫的连接，并没有跳转到实际的页面");
	});
	
	$("a.wangwanglink").click(function(){
		alert("模仿旺旺的图标，并不会打开旺旺");
	});
	$("a.notImplementLink").click(function(){
		alert("这个功能没做，蛤蛤~");
	});
	
});

</script>	
</head>

<body>

<nav class="top ">
		<a href="#nowhere">
			<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span>
			天猫首页
		</a>	
		
		<span>喵，欢迎来天猫</span>
		
			<a href="#nowhere">tmalltest</a>
			<a href="#nowhere">退出</a>		
		
		<span class="pull-right">
			<a href="#nowhere">我的订单</a>
			<a href="#nowhere">
			<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-shopping-cart redColor"></span>
			购物车<strong>5</strong>件</a>		
		</span>
		
</nav>

<title>模仿天猫官网 名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女</title>
<div class="categoryPictureInProductPageDiv">
	<img class="categoryPictureInProductPage" src="https://how2j.cn/tmall/img/category/68.jpg">
</div>

$(function(){
	var stock = 66;
	$(".productNumberSetting").keyup(function(){
		var num= $(".productNumberSetting").val();
		num = parseInt(num);
		if(isNaN(num))
			num= 1;
		if(num<=0)
			num = 1;
		if(num>stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	
	$(".increaseNumber").click(function(){
		var num= $(".productNumberSetting").val();
		num++;
		if(num>stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	$(".decreaseNumber").click(function(){
		var num= $(".productNumberSetting").val();
		--num;
		if(num<=0)
			num=1;
		$(".productNumberSetting").val(num);
	});
	
	$(".addCartLink").click(function(){
		var page = "forecheckLogin";
		if(false)$.get(
	            page,
	            function(result){
	            	if("success"==result){
	            		var pid = 819;
	            		var num= $(".productNumberSetting").val();
	            		var addCartpage = "foreaddCart";
	            		if(false)$.get(
	            				addCartpage,
	            	            {"pid":pid,"num":num},
	            	            function(result){
	            	            	if("success"==result){
	            	            		$(".addCartButton").html("已加入购物车");
	            	            		$(".addCartButton").attr("disabled","disabled");
	            	            		$(".addCartButton").css("background-color","lightgray")
	            	            		$(".addCartButton").css("border-color","lightgray")
	            	            		$(".addCartButton").css("color","black")
	            	            		
	            	            	}
	            	            	else{
	            	            		
	            	            	}
	            	            }
	            		);		            		
	            	}
	            	else{
						$("#loginModal").modal('hide');	            		
	            	}
	            }
		);		
		return false;
	});
	$(".buyLink").click(function(){
		var page = "forecheckLogin";
		if(false)$.get(
	            page,
	            function(result){
	            	if("success"==result){
	            		var num = $(".productNumberSetting").val();
	            		location.href= $(".buyLink").attr("href")+"&num="+num;
	            	}
	            	else{
						$("#loginModal").modal('hide');	            		
	            	}
	            }
		);		
		return false;
	});
	
	$("button.loginSubmitButton").click(function(){
		var name = $("#name").val();
		var password = $("#password").val();
		
		if(0==name.length||0==password.length){
			$("span.errorMessage").html("请输入账号密码");
			$("div.loginErrorMessageDiv").show();			
			return false;
		}
		
		var page = "foreloginAjax";
		if(false)$.get(
	            page,
	            {"name":name,"password":password},
	            function(result){
	            	if("success"==result){
	            		location.reload();
	            	}
	            	else{
	            		$("span.errorMessage").html("账号密码错误");
	            		$("div.loginErrorMessageDiv").show();	            		
	            	}
	            }
		);			
		
		return true;
	});
	
	$("img.smallImage").mouseenter(function(){
		var bigImageURL = $(this).attr("bigImageURL");
        $("img.bigImg").attr("src",bigImageURL);
	});
	
	$("img.bigImg").load(
		function(){
			$("img.smallImage").each(function(){
				var bigImageURL = $(this).attr("bigImageURL");
				img = new Image();
				img.src = bigImageURL;
				
				img.onload = function(){
					console.log(bigImageURL);	
					$("div.img4load").append($(img));
				};
			});		
		}
	);
});

</script>

<div class="imgInimgAndInfo">
		<img src="https://how2j.cn/tmall/img/productSingle/8620.jpg" class="bigImg">
		<div class="smallImageDiv">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8620.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8620.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8619.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8619.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8618.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8618.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8617.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8617.jpg" class="smallImage">
			
				<img src="https://how2j.cn/tmall/img/productSingle_small/8616.jpg" bigImageURL="https://how2j.cn/tmall/img/productSingle/8616.jpg" class="smallImage">
			
		</div>
		<div class="img4load hidden" ></div>
	</div>
	
	<div class="infoInimgAndInfo">
		
		<div class="productTitle">
			名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
		</div>
		<div class="productSubTitle">
			高端定制 高档棉麻 现货即发 加购物车 领优惠卷  
		</div>
		
		<div class="productPrice">
			<div class="juhuasuan">
				<span class="juhuasuanBig" >聚划算</span>
				<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
			</div>
			<div class="productPriceDiv">
				<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
				<span> 全天猫实物商品通用</span>
				
				</div>
				<div class="originalDiv">
					<span class="originalPriceDesc">价格</span>
					<span class="originalPriceYuan">¥</span>
					<span class="originalPrice">
					
						399.00					
					</span>
				</div>
				<div class="promotionDiv">
					<span class="promotionPriceDesc">促销价 </span>
					<span class="promotionPriceYuan">¥</span>
					<span class="promotionPrice">
						379.05
					</span>				
				</div>
			</div>
		</div>
		<div class="productSaleAndReviewNumber">
			<div>销量 <span class="redColor boldWord"> 50</span></div>	
			<div>累计评价 <span class="redColor boldWord"> 19</span></div>	
		</div>
		<div class="productNumber">
			<span>数量</span>
			<span>
				<span class="productNumberSettingSpan">
				<input class="productNumberSetting" type="text" value="1">
				</span>
				<span class="arrow">
					<a href="#nowhere" class="increaseNumber">
					<span class="updown">
							<img src="https://how2j.cn/tmall/img/site/increase.png">
					</span>
					</a>
					
					<span class="updownMiddle"> </span>
					<a href="#nowhere"  class="decreaseNumber">
					<span class="updown">
							<img src="https://how2j.cn/tmall/img/site/decrease.png">
					</span>
					</a>
					
				</span>
					
			件</span>
			<span>库存66件</span>
		</div>
		<div class="serviceCommitment">
			<span class="serviceCommitmentDesc">服务承诺</span>
			<span class="serviceCommitmentLink">
				<a href="#nowhere">正品保证</a>
				<a href="#nowhere">极速退款</a>
				<a href="#nowhere">赠运费险</a>
				<a href="#nowhere">七天无理由退换</a>
			</span>
		</div>	
		
		<div class="buyDiv">
			<a class="buyLink" href="#nowhere"><button class="buyButton">立即购买</button></a>
			<a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
		</div>
	</div>
	
	<div style="clear:both"></div>
	
</div>

<div class="productReviewDiv" >
	<div class="productReviewTopPart">
		<a  href="#nowhere" class="productReviewTopPartSelectedLink">商品详情</a>
		<a  href="#nowhere" class="selected">累计评价 <span class="productReviewTopReviewLinkNumber">19</span> </a>
	</div>
	
	<div class="productReviewContentPart">
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					不错的购物，包装很精细，布料也不错舒服，因为之前一直购买品牌装，很好的一次网购，生完宝宝刚刚一个多月我一百五十斤穿2XL不错
				</div>
				<div class="productReviewItemDate">2016-08-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				哀****莉<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					面料很好，大小也刚刚好，本来买之前还担心，犹豫，等货到了，比我心中想象的好很多，大家放心购买，很满意的购物，以后还会来??
				</div>
				<div class="productReviewItemDate">2016-08-23</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				贤*闲<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					<span>商品：</span>宝贝料子和手感都不错，是值这价，卖家很贴心的送了内衣带，5分好评是必须的。喜欢的可以 下手了
				</div>
				<div class="productReviewItemDate">2016-08-16</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				孤*****爱<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服收到了，给朋友买的，真心不错，料子也特别好，穿起来特别有气质，跟模特穿的效果差不多。。。好评，好评
				</div>
				<div class="productReviewItemDate">2016-08-19</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				哀****莉<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服不错，手感不错，试穿很有型，真心的喜欢，谢谢老板
				</div>
				<div class="productReviewItemDate">2016-07-19</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				孤*****爱<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					喜欢(⊙o⊙)哦，美美哒，值得一试！！！宽松雪纺，很舒服
				</div>
				<div class="productReviewItemDate">2016-08-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				这****0<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服已经收到，大小很合适，面料也可以，就是感觉衣服面料有一点厚，其他都还不错，款式也好看，希望店家多出一点新款，以后回来光顾你们。?
				</div>
				<div class="productReviewItemDate">2016-07-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				y****心<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					很漂亮的衣服，料子有垂感，我很满意，老公也说好呢
				</div>
				<div class="productReviewItemDate">2016-07-27</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				阿*丶<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					真不错，已经迫不及待的穿上了，朋友们都说好，挺有气质的，就是上衣稍微有点肥，不过肉肉被藏起来了！有看上的赶紧下单吧！
				</div>
				<div class="productReviewItemDate">2016-08-12</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				名*****_<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					质量是真的不错，适合个子高一点的美眉穿，很漂亮?
				</div>
				<div class="productReviewItemDate">2016-08-03</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				安**°<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					再买的时候纠结了好久，最后还是选择在这里购买，一次满意的网购，让我对网购有了希望，或刚收到，因觉得物超所值，就迫不及待拍了照片，那个玻璃的声音非常脆，我个人觉得挺好的，值得拥有！
				</div>
				<div class="productReviewItemDate">2016-08-08</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				这****0<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					<span>服务：</span>不错
				</div>
				<div class="productReviewItemDate">2016-08-20</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				醉**心<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					强烈推荐，我的天，质量也太好了，让我情何以堪，大爱啊。说说我的体格吧，162.105斤，腰围大概是22，穿m码刚刚好。快递那么快，特地跟店家说10号要外出店家也尽心备注的很好。真的特别感动，我收藏店铺了，下次还来你们家。衣服比雪纺舒服，薄薄的，现在穿刚好，我配了高跟鞋和小白鞋都很完美。店家还送了无痕肩带，真的太细心了，给一百个好评，赞。衣服我看了没有线头，薄薄的。不说了，我赶紧发给我姐让她看看。
				</div>
				<div class="productReviewItemDate">2016-08-17</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				安**°<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					此用户没有填写评论！
				</div>
				<div class="productReviewItemDate">2016-07-21</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				乱**型<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服质量真心不错很厚实，上身效果很棒哦，穿起来很舒服，很洋气。价格也很合理……赞赞赞
				</div>
				<div class="productReviewItemDate">2016-08-19</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				丶***眠<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					衣服裤子都很合身，同事笑我说这是我买得最好看最时尚的一套衣服，衣服上身效果也不错，很是满意，还送了隐形带，正好用上，质量很好穿着凉快，唯一不足的就是洗了后需要烫一下才不皱，不过不影响衣服的美，很满意。上传两张没P的照片
				</div>
				<div class="productReviewItemDate">2016-08-08</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				乱**型<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					不好意思好久才来评价  质量好  上身效果好  主要有胖子穿的漂亮衣服啦   赞赞赞
				</div>
				<div class="productReviewItemDate">2016-07-11</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				l******1<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					网购以来为数不多的质量好到超乎意料，穿上特别舒服，大小也正合适，超赞！这个店里值得好好逛逛！
				</div>
				<div class="productReviewItemDate">2016-07-10</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				盗**记<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
		<div class="productReviewItem">
		
			<div class="productReviewItemDesc">
				<div class="productReviewItemContent">
					宝贝面料很舒服，一字领也非常美，说实话是充上衣买的！犹豫了很长时间才下定决心的，很喜欢，很满意！喜欢就是最值的！
				</div>
				<div class="productReviewItemDate">2016-07-24</div>
			</div>
			<div class="productReviewItemUserInfo">
			
				贤*闲<span class="userInfoGrayPart">（匿名）</span>
			</div>
			
			<div style="clear:both"></div>
		
		</div>
		
	</div>

</div>

<div class="productDetailDiv" >
	<div class="productDetailTopPart">
		<a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a>
		<a href="#nowhere" class="productDetailTopReviewLink">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
	</div>
	
	<div class="productParamterPart">
		<div class="productParamter">产品参数：</div>
		
		<div class="productParamterList">
			
				<span>材质成分:  聚酯纤维100% </span>
			
				<span>品牌:  Emyche/艾米秋 </span>
			
				<span>货号:  129668 </span>
			
				<span>尺码:  L M S XL X </span>
			
				<span>上市年份季节:  2016年夏季 </span>
			
				<span>颜色分类:  白色 黑色 浅蓝 </span>
			
				<span>适用年龄:  18-25周岁 </span>
			
		</div>
		<div style="clear:both"></div>
	</div>
	
	<div class="productDetailImagesPart">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8625.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8624.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8623.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8622.jpg">
			
				<img src="https://how2j.cn/tmall/img/productDetail/8621.jpg">
			
	</div>
</div>

</div>

<div class="modal " id="loginModal" tabindex="-1" role="dialog" >
	<div class="modal-dialog loginDivInProductPageModalDiv">
	        <div class="modal-content">
					<div class="loginDivInProductPage">
						<div class="loginErrorMessageDiv">
							<div class="alert alert-danger" >
							  <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
							  	<span class="errorMessage"></span>
							</div>
						</div>
							
						<div class="login_acount_text">账户登录</div>
						<div class="loginInput " >
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-user"></span>
							</span>
							<input id="name" name="name" placeholder="手机/会员名/邮箱" type="text">			
						</div>
						
						<div class="loginInput " >
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-lock"></span>
							</span>
							<input id="password" name="password"  type="password" placeholder="密码" type="text">			
						</div>
									<span class="text-danger">不要输入真实的天猫账号密码</span><br><br>
						<div>
							<a href="#nowhere">忘记登录密码</a> 
							<a href="#nowhere" class="pull-right">免费注册</a> 
						</div>
						<div style="margin-top:20px">
							<button class="btn btn-block redButton loginSubmitButton" type="button">登录</button>
						</div>
					</div>	
	      </div>
	</div>
</div>

<div class="modal" id="deleteConfirmModal" tabindex="-1" role="dialog" >
	<div class="modal-dialog deleteConfirmModalDiv">
       <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">确认删除？</h4>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary deleteConfirmButton" id="submit" type="button">确认</button>
          </div>
        </div>
      </div>
	</div>
</div>

<div id="footer"  class="footer" style="display: block;">
	
    <div id="footer_ensure" class="footer_ensure">
            <a href="#nowhere">
            	<img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    
    <div id="footer_desc" class="footer_desc">
            <div class="descColumn">
			    <span class="descColumnTitle">购物指南</span>
			    <a href="#nowhere" >免费注册</a> 
			    <a href="#nowhere" >开通支付宝</a> 
			    <a href="#nowhere" >支付宝充值</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">天猫保障</span>
			    <a href="#nowhere" >发票保障</a> 
			    <a href="#nowhere" >售后规则</a> 
			    <a href="#nowhere" >缺货赔付</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">支付方式</span>
			    <a href="#nowhere" >快捷支付</a> 
			    <a href="#nowhere" >信用卡</a> 
			    <a href="#nowhere" >蚂蚁花呗</a>
			    <a href="#nowhere" >货到付款</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">商家服务</span>
			    <a href="#nowhere" >商家入驻</a> 
			    <a href="#nowhere" >商家中心</a> 
			    <a href="#nowhere" >天猫智库</a>
			    <a href="#nowhere" >天猫规则</a>
			    <a href="#nowhere" >物流服务</a>
			    <a href="#nowhere" >喵言喵语</a>
			    <a href="#nowhere" >运营服务</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">手机天猫</span>
			    <a href="#nowhere" ><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
			</div>
			
    </div>
    
    <div style="clear:both"></div>
    
    <img id="cateye" class="cateye" src="https://how2j.cn/tmall/img/site/cateye.png">
    
    <div id="copyright" class="copyright">
		<div class="white_link" >
			<a href="#nowhere" >关于天猫</a>
			<a href="#nowhere" > 帮助中心</a>
			<a href="#nowhere" >开放平台</a>
			<a href="#nowhere" >  诚聘英才</a>
			<a href="#nowhere" >联系我们</a>
			<a href="#nowhere" >网站合作</a>
			<a href="#nowhere" >法律声明</a>
			<a href="#nowhere" >知识产权</a>
			<a href="#nowhere" >  廉正举报	</a>
		</div>
		<div class="white_link" >
			<a href="#nowhere" > 阿里巴巴集团</a><span class="slash">|</span>
			<a href="#nowhere" > 淘宝网</a><span class="slash">|</span>
			<a href="#nowhere" >天猫 </a><span class="slash">|</span>
			<a href="#nowhere" >  聚划算</a><span class="slash">|</span>
			<a href="#nowhere" >全球速卖通</a><span class="slash">|</span>
			<a href="#nowhere" >阿里巴巴国际交易市场</a><span class="slash">|</span>
			<a href="#nowhere" >1688</a><span class="slash">|</span>
			<a href="#nowhere" >阿里妈妈</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里云计算	</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里通信 	</a><span class="slash">|</span>
			<a href="#nowhere" >  YunOS	</a><span class="slash">|</span>
			<a href="#nowhere" >  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere" >   万网	</a><span class="slash">|</span>
			<a href="#nowhere" >  高德	</a><span class="slash">|</span>
			<a href="#nowhere" > 优视 	</a><span class="slash">|</span>
			<a href="#nowhere" >  友盟	</a><span class="slash">|</span>
			<a href="#nowhere" >  虾米	</a><span class="slash">|</span>
			<a href="#nowhere" >  天天动听	</a><span class="slash">|</span>
			<a href="#nowhere" >  来往	</a><span class="slash">|</span>
			<a href="#nowhere" >  钉钉	</a><span class="slash">|</span>
			<a href="#nowhere" >  支付宝 		</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="https://how2j.cn/tmall/img/site/copyRight1.jpg">
		    	<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
		    </div>
		</div>
    </div>
</div>
</body>
</html>

渲染中渲染完成

效果

天猫整站Springboot系列教材（八十二）- 原型-前端 - 分类页

天猫整站Springboot系列教材（八十四）- 原型-前端 - 购物车页面

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

问答区域

2021-06-14 产品添加不了

mikedog777

关于实践项目-天猫整站Springboot-产品页面的提问

没有配置搜索引擎，是不是要，不然产品添加不了

1 个答案

how2j
答案时间：2021-06-20

请按照项目要求来。项目要求你做什么，你就需要做什么才行。

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

提问之前请登陆

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

关于实践项目-天猫整站Springboot-产品页面的提问

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

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

上传截图