纯 html css淘宝页面静态图

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} body{margin:0; padding:0; overflow-x:hidden;font-family:Arial,"Microsoft YaHei";font-size:1em;} html{font-size: 100%;height: 100%;} audio,canvas,video {display: inline-block;*display: inline;*zoom: 1;} input,select,textarea{font-family:Arial,"Microsoft YaHei";} table{border-collapse:collapse;border-spacing:0;} th{text-align:inherit;} del{text-decoration:line-through;} address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:500;} iframe{display:block;} abbr,acronym{border:0;font-variant:normal;} ol,ul,li {list-style:none;} caption,th {text-align:left;} fieldset,img{border:0;} img{border:none;display:block;} a{text-decoration:none;} a:hover {text-decoration:none;} ol, ul{list-style:none;} input,button,select,textarea,a,label{outline:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-appearance: none;-moz-appearance:none;} textarea{resize:none} /*--global--*/ .fleft{ float: left;} .fright{ float: right;} .none{display:none;} .hide{visibility: hidden;} .relative{position:relative; z-index:9;} /*-- clear float --*/ .clear{clear:both;} .clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{height:1%;} .bgfix{ position: absolute; height: 64px; width: 100%; background-color: #fff; position: fixed; z-index: 50; display: none; }

.bbfix{
font-size: 12px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin-left: 0;
height: 40px;
background: #f4f4f4;
color: #3c3c3c;
text-align: center;
line-height: 40px;
width: 74px;
position: absolute;
left: 185px;
top: 5px;
z-index: 100px;
}
.bbfix a{
color: #3c3c3c;
}

.tianmaofix,.dianpufix {

width: 74px;
height: 40px;
background: #f4f4f4;
display: none;

}
.tianmaofix{
border-bottom: 1px solid #ff5000;
}
.tianmaofix a{
color: #ff5000;
}
.dianpufix:hover a{
color: #ff5000;
}
.bbfix:hover .baobeifix{
border-top-left-radius: 20px;

background: #f4f4f4;

}
.bbfix:hover .tianmaofix{

display: block;

}
.bbfix:hover .dianpufix{
display: block;
}
.ssfix{
width: 1194px;
margin: 0 auto;
}
.sousuofix{
position: relative;
}

.lfix{
float: left;
width: 100px;
height: 50px;
margin-right:84px;
}
.cafix{
position: absolute;
left: 700px;
bottom: 8px;
}

.bg1{
background-color: #f5f5f5;

}
.clearfix:after{
content:’’;
display: block;
clear: both;
}
.nr1,.nr2,.nr3,.nr4,.nr10{

width: 1194px;
margin: 0 auto;

}
.z{
font-size: 12px;
line-height: 38px;
width: 80px;

}
.nr1 a,.gang{
color:#666666;
font-family: Microsoft YaHei;

}
.gang{
margin-left: 17px;
}
.z .zhong{
color: black;
}
.le{
float: left;
}
.ri{
float: right;
}
.q{
font-size: 12px;
line-height: 38px;
width: 100px;

}
.gou{
width: 80px;
}

.g{
display: block;
height: 14px;
width: 14px;
background-size: 14px;
background-image: url(./xiaoche.png);
background-repeat: no-repeat;
float: left;
margin-top:13px;

}
.xx{
height: 17px;
width: 17px;
display: block;
background-size: 17px;
background-image: url(./xx.png);
background-repeat: no-repeat;
float: left;
margin-top:13px;
}

.sj{
display: block;
width: 0;
height: 0;
border-top:3px solid #999999;
border-left:3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
float: right;
position: relative;
right: 15px;
top: 15px;
}
.city p,.q p,.col p{
padding-left: 5px;<