how2j.cn


注:这里的原型是展示效果,让大家有个感性的认识,编码不在这里进行,项目开发过程会在后面的章节从零开始。
<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> <script> $(function(){ $("form.loginForm").submit(function(){ if(0==$("#name").val().length||0==$("#password").val().length){ $("span.errorMessage").html("请输入账号密码"); $("div.loginErrorMessageDiv").show(); return false; } return true; }); $("form.loginForm input").keyup(function(){ $("div.loginErrorMessageDiv").hide(); }); var left = window.innerWidth/2+162; $("div.loginSmallDiv").css("left",left); }) </script> <div id="loginDiv" style="position: relative"> <div class="simpleLogo"> <img src="https://how2j.cn/tmall/img/site/simpleLogo.png"> </div> <img id="loginBackgroundImg" class="loginBackgroundImg" src="https://how2j.cn/tmall/img/site/loginBackground.png"> <form class="loginForm" method="post"> <div id="loginSmallDiv" class="loginSmallDiv"> <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 class="notImplementLink" href="#nowhere">忘记登录密码</a> <a href="#nowhere" class="pull-right">免费注册</a> </div> <div style="margin-top:20px"> <button class="btn btn-block redButton" type="button">登录</button> </div> </div> </form> </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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫整站Springboot-登录页面 的提问

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

上传截图