一号店商品详情

最新推荐文章于 2021-08-19 14:05:00 发布
arimurakunn
最新推荐文章于 2021-08-19 14:05:00 发布
阅读量2.3k
点赞数 4
本文链接：https://blog.csdn.net/qq_33311727/article/details/84582082
版权
本文详细解析了一号店的商品详情页面，包括商品图片、价格、评价、规格选项等关键信息，帮助消费者做出明智的购物决策。同时，探讨了如何利用这些信息进行比价和筛选优质商品的方法。
摘要由CSDN通过智能技术生成
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .clear{
            content: '';
            display: block;
            clear: both;
        }
        header{
            background:linear-gradient(to bottom,#e0e0dd,#fffffc,#f2f2ef);
            height: 35px;
        }
        .daohang,.daohang1{
            float: right;
        }
        header span{
            display: inline-block;
            height: 35px;
            line-height: 35px;
            margin-left: 50px;
            color: #3b3b38;
        }
        header ul{
            display: inline-block;
            height: 35px;
            line-height: 35px;
            margin-right: 60px;
        }
        .daohang li{
            list-style-type: none;
            height: 35px;
            line-height: 35px;
        }
        .daohang1,.daohang1 a,.fl a{
            color: #3b3b38;
            text-decoration: none;
            vertical-align: middle;
        }
        .daohang1 img,.daohang1{
            vertical-align: middle;
        }
        header a:hover,.fl a:hover{
            color: #ff5d35;
        }
        .daohang li:nth-of-type(9) a{
            color: #ff5d35;
        }
        .service{
            overflow: hidden;
            background-color: #FFF;
            margin-top: 6px;
            padding: 10px 0px;
            border: 1px solid #cdcdcd;
            position: absolute;
            width: 116px;
            left: 50%;
            margin-left: -58px;
            z-index: 900;
            display: none;
        }
        .service a{
            color: black;
        }
        .service a:hover{
            color: #ff5d35;
        }
        .daohang li:nth-of-type(6):hover .service{
            display: block;
            position: relative;
        }
        section{
            padding-top: 40px;
            padding-left: 60px;
        }
        #logo{
            display: inline-block;
            float: left;
        }
        .search2{
            width: 494px;
            background: #ff324a;
            padding: 0px 2px 2px 2px;
        }
        .search2 input:nth-of-type(1){
            width: 400px;
            outline: none;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            border: none;
        }
        .search2 input:nth-of-type(2){
            width: 90px;
            height: 35px;
            background: #ff324a;
            border: none;
            color: white;
            font-size: 16px;
            outline: none;
        }
        .fl{
            float: left;
            list-style-type: none;
            padding-right: 20px;
            margin-top: 3px;
        }
        .search1{
            display: inline-block;
            margin: 10px 0px 0px 95px;
            float: left;
        }
        .car{
            width: 95px;
            height: 30px;
            line-height: 30px;
            float: left;
            border: #eaedee solid 1px;
            margin: 10px 0px 0px 210px;
            padding: 5px 15px 3px 10px;
            background: #f4f7f8;
        }
        .car a{
            color: #696c6d;
            text-decoration: none;
            font-size: 14px;
            margin-left: 20px;
        }
        .car span{
            vertical-align: middle;
        }
        .menu{
            width: 1200px;
            margin: 25px 100px 20px 80px;
        }
        .all{
            width: 185px;
            height: 44px;
            line-height: 44px;
            color: white;
            background: #ff4039;
            padding-left: 35px;
            font-size: 16px;
            float: left;
        }
        .all_daohang{
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: bold;
            float: left;
        }
        .all_daohang a{
            padding: 0px 20px 0px 10px;
            text-decoration: none;
            color: black;
        }
        .all_daohang a:nth-of-type(1),.all_daohang a:nth-of-type(2){
            color: #ff4039;
        }
        .all_daohang a:hover{
            color: #ff4039;
        }
        .menu_head{
            border-bottom: #ff4039 2px solid;
            height: 44px;
        }
        .phone_order{
            float: right;
            margin-top: 5px;
        }
        .sales{
            margin-top: 20px;
            color: #706f6f;
        }
        .sales span{
            color: #ff4039;
            font-style: italic;
        }
        .p_big{
            width: 400px;
            height: 400px;
            margin: 10px 0px;
            border: #e7e6e6 solid 1px;
        }
        #pics{
            display: inline-block;
            text-decoration: none;
        }
        .pic{
            display: inline-block;
            padding: 2px;
            height: 80px;
            border: #e7e6e6 solid 1px;
            vertical-align: middle;
            margin-bottom: 20px;
        }
        .pic_{
            display: inline-block;
            height: 80px;
        }
        .pic_ img{
            top: 10px;
            position: relative;
        }
        #pic{
            float: left;
            margin-right: 30px;
        }
        .shop{
            float: left;
        }
        h2{
            margin-top: 10px;
            color: #414040;
        }
        .itd{
            margin-top: 5px;
            color: #a5a4a4;
            font-size: 14px;
        }
        .price{
            margin-top: 30px;
        }
        .price span{
            color: #ff4039;
            font-size: 18px;
            font-weight: bold;
        }
        .reference{
            margin-top: 15px;
        }
        .reference span{
            font-size: 15px;
        }
        .size{
            margin-top: 30px;
            font-size: 12px;
            color: #8e8d8d;
        }
        .size a{
            display: inline-block;
            text-align: center;
            width: 70px;
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            margin-right: 10px;
            border: #bfbebe solid 1px;
            color: #8e8d8d;
            text-decoration: none;
        }
        .size a:nth-of-type(1):hover{
            margin-right: 10px;
        }
        .size a:hover{
            margin-right: 8px;
            border: #ff4039 2px solid;
        }
        .size a:nth-of-type(1){
            border: #ff4039 2px solid;
            position: relative;
        }
        .size a:nth-of-type(1) img{
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        .color{
            margin-top: 10px;
            color: #8e8d8d;
        }
        .color a{
            display: inline-block;
            text-align: center;
            width: 60px;
            height: 28px;
            line-height: 28px;
            font-size: 15px;
            margin-right: 10px;
            border: #bfbebe solid 1px;
            color: #8e8d8d;
            text-decoration: none;
        }
        .color a:nth-of-type(2){
            border: #ff4039 2px solid;
            position: relative;
        }
        .color a:nth-of-type(2) img{
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        .color a:nth-of-type(1){
            margin-left: 5px;
        }
        .color a:nth-of-type(1):hover{
            border: #ff4039 2px solid;
            margin-left: 4px;
            margin-right: 9px;
        }
        .share{
            margin-top: 35px;
        }
        .share span{
            display: inline-block;
            height: 15px;
            line-height: 15px;
        }
        .share,.share img{
            vertical-align: middle;
        }
        .attention{
            margin-top: 5px;
            margin-left: 70px;
        }
        .attention:hover{
            color: #ff4039;
        }
        .share_{
            display: inline-block;
            width: 50px;
            height: 25px;
            overflow: hidden;
            position: relative;
            float: left;
            border-top: white solid 1px;
            border-right: white solid 1px;
            border-left: white solid 1px;
        }
        .share_:hover{
            border-top: #bfbebe solid 1px;
            border-right: #bfbebe solid 1px;
            border-left: #bfbebe solid 1px;
            overflow: visible;
        }
        .share_ span:nth-of-type(1){
            width: 50px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            display: inline-block;
        }
        .share_ a{
            color: black;
            text-decoration: none;
        }
        .shares{
            width: 160px;
            height: 28px;
            padding-left: 5px;
            line-height: 28px;
            border: #bfbebe solid 1px;
        }
        .shares img{
            padding: 3px;
        }
        .buy{
            margin-top: 60px;
        }
        .buy input{
            display: inline-block;
            height: 40px;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
            float: left;
        }
        .buy img{
            margin-left: 10px;
        }
        .brand{
            float: right;
            height: 194px;
            border: #ebeaea solid 1px;
        }
        .getbrand{
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: #ebeaea;
            width: 200px;
            border-top: #ebeaea solid 1px;
        }
        .getbrand