天猫整站SSH系列教材（九十九）- 原型-前端

天猫整站SSH系列教材（九十八）- 原型-前端 - 收货成功页面

天猫整站SSH系列教材（一百）- 原型-前端 - 登录页面

工具版本兼容问题

步骤 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>

<div class="reviewDiv">
	<div class="reviewProductInfoDiv">
		<div class="reviewProductInfoImg"><img width="400px" height="400px" src="https://how2j.cn/tmall/img/productSingle/1917.jpg"></div>
		<div class="reviewProductInfoRightDiv">
			<div class="reviewProductInfoRightText">
				依然美佳欧式布艺沙发组合可拆洗新款实木雕花大户型奢华别墅家具
			</div>
			<table class="reviewProductInfoTable">
				<tr>
					<td width="75px">价格:</td>
					<td><span class="reviewProductInfoTablePrice">￥10,012.00</span> 元 </td>
				</tr>
				<tr>
					<td>配送</td>
					<td>快递:  0.00</td>
				</tr>
				<tr>
					<td>月销量:</td>
					<td><span class="reviewProductInfoTableSellNumber">15</span> 件</td>
				</tr>
			</table>
			
			<div class="reviewProductInfoRightBelowDiv">
				<span class="reviewProductInfoRightBelowImg"><img1 src="https://how2j.cn/tmall/img/site/reviewLight.png"></span>
				<span class="reviewProductInfoRightBelowText" >现在查看的是 您所购买商品的信息
于2016年11月22下单购买了此商品 </span>
			
			</div>
		</div>
		<div style="clear:both"></div>
	</div>
	<div class="reviewStasticsDiv">
		<div class="reviewStasticsLeft">
				<div class="reviewStasticsLeftTop"></div>
				<div class="reviewStasticsLeftContent">累计评价 <span class="reviewStasticsNumber"> 15</span></div>
				<div class="reviewStasticsLeftFoot"></div>
		</div>
		<div class="reviewStasticsRight">
			<div class="reviewStasticsRightEmpty"></div>
			<div class="reviewStasticsFoot"></div>
		</div>
	</div>		
	
		<div class="makeReviewDiv">
		<form method="post" >
			<div class="makeReviewText">其他买家，需要你的建议哦！</div>
			<table class="makeReviewTable">
				<tr>
					<td class="makeReviewTableFirstTD">评价商品</td>
					<td><textarea name="content"></textarea></td>
				</tr>
			</table>
			<div class="makeReviewButtonDiv">
				<input type="hidden" name="oid" value="965">
				<input type="hidden" name="pid" value="205">
				<button type="button">提交评价</button>
			</div>
		</form>
		</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>

<div class="reviewDiv">
	<div class="reviewProductInfoDiv">
		<div class="reviewProductInfoImg"><img width="400px" height="400px" src="https://how2j.cn/tmall/img/productSingle/1917.jpg"></div>
		<div class="reviewProductInfoRightDiv">
			<div class="reviewProductInfoRightText">
				依然美佳欧式布艺沙发组合可拆洗新款实木雕花大户型奢华别墅家具
			</div>
			<table class="reviewProductInfoTable">
				<tr>
					<td width="75px">价格:</td>
					<td><span class="reviewProductInfoTablePrice">￥10,012.00</span> 元 </td>
				</tr>
				<tr>
					<td>配送</td>
					<td>快递:  0.00</td>
				</tr>
				<tr>
					<td>月销量:</td>
					<td><span class="reviewProductInfoTableSellNumber">15</span> 件</td>
				</tr>
			</table>
			
			<div class="reviewProductInfoRightBelowDiv">
				<span class="reviewProductInfoRightBelowImg"><img1 src="https://how2j.cn/tmall/img/site/reviewLight.png"></span>
				<span class="reviewProductInfoRightBelowText" >现在查看的是 您所购买商品的信息
于2016年11月22下单购买了此商品 </span>
			
			</div>
		</div>
		<div style="clear:both"></div>
	</div>
	<div class="reviewStasticsDiv">
		<div class="reviewStasticsLeft">
				<div class="reviewStasticsLeftTop"></div>
				<div class="reviewStasticsLeftContent">累计评价 <span class="reviewStasticsNumber"> 15</span></div>
				<div class="reviewStasticsLeftFoot"></div>
		</div>
		<div class="reviewStasticsRight">
			<div class="reviewStasticsRightEmpty"></div>
			<div class="reviewStasticsFoot"></div>
		</div>
	</div>		
	
		<div class="makeReviewDiv">
		<form method="post" >
			<div class="makeReviewText">其他买家，需要你的建议哦！</div>
			<table class="makeReviewTable">
				<tr>
					<td class="makeReviewTableFirstTD">评价商品</td>
					<td><textarea name="content"></textarea></td>
				</tr>
			</table>
			<div class="makeReviewButtonDiv">
				<input type="hidden" name="oid" value="965">
				<input type="hidden" name="pid" value="205">
				<button type="button">提交评价</button>
			</div>
		</form>
		</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>

渲染中渲染完成

效果

天猫整站SSH系列教材（九十八）- 原型-前端 - 收货成功页面

天猫整站SSH系列教材（一百）- 原型-前端 - 登录页面

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

提问之前请登陆

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

关于已下架的-天猫整站SSH-评价页面的提问

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

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

上传截图