*{ -webkit-box-sizing: border-box; box-sizing: border-box; /*background: rgba(0,0,0,.1);*/ -webkit-box-sizing: background 200ms ; -o-transition: background 200ms ; transition: background 200ms;/*改变页面中颜色变换时间*/ } .container{ display: block; max-width:1080px; margin:0 auto; } body{ font-size: 14px; color: #444; background: #f9f9f9; line-height: 1.7; } a{ text-decoration: none;/*下划线去掉*/ } img{ display: block; max-width: 100%; } .fl{ float: left; } .fr{ float:right; } .clear-float:after, .clear-float:before{ content:""; display: block; clear: both; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9{ display: block; position: relative; min-height: 1px; float: left; } .col-1{ width: 10%; } .col-2{ width: 20%; } .col-3{ width: 30%; } .col-4{ width: 40%; } .col-5{ width: 50%; } .col-6{ width: 60%; } .col-7{ width: 70%; } .col-8{ width: 80%; } .col-9{ width: 90%; } .top-nav{ background: #eee; } .top-nav .item{ display: inline-block; padding: 6px 10px; color: #666; } .top-nav .item:hover{ color: #333; } .header .span-1 { line-height:5px ; margin-top: 20px ; font-size: 40px; color:#dd182b ; font-weight: 800; font-family: "Sitka Text"; width: 200px; text-align: justify; } .header .span-1 i{ display: inline-block; width: 100%; } .header .span-2 { font-size: 6px; color:black ; font-weight: 600; width: 200px; text-align: justify; } .header .span-2 i{ display: inline-block; width: 100%; } .header .logo{ font-size: 30px; } .header .search-bar{ border: 2px solid #dd128b; background: #dd182b; padding-top: 2px; padding-left: 2px; } .header .search-bar input, .header .search-bar button{ float: left; border: 0; padding: 10px; outline: 0; } .header .search-bar input{ width: 80%; } .header .search-bar input:focus{ /*在输入时的一点点投影*/ -webkit-box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3); box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3); } .header .search-bar button{ width: 20%; background: #dd182b; color: #fff; } .header .search-bar button:hover{ background: #ce1829; } .product .col-6 .product-info{ font-size: 20px; } .product .price{ font-size: 40px; color:red; vertical-align: middle/*让促销价也居中显示*/ } .product .note{ color: goldenrod; } .product .price-background{ background: gainsboro; padding-left: 10px; } .product .table1{ border-style: dashed hidden dashed hidden; } .product .xiaoliang, .product .leijipingjia, .product .songxianshubi { color: red; }