首页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<title>全布局：首页 </title>
<style>
* {
margin: 0;
}
.a ul li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.a {
width: 100%;
background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
height: 30px;
font-size: 12px;
line-height: 30px;
color: gray;
}
.a ul {
margin-left: 630px;
margin-top: -28px;
}
.a ul a {
color: gray;
text-decoration: none;
}
#a-ul {
color: gray;
}
#a-ul:hover {
color: red;
}
#aa1{
color: red;
}
.a a:hover{
color: red;
}
.a span {
margin-left: 40px;
}
.b1 {
margin-left: 60px;
margin-top: 40px;
}
.b2 {
margin-top: -50px;
}
.bb {
width: 320px;
height: 35px;
border: 2px red solid;
margin-left: 500px;
display: inline-block;
}
.b3 {
background: #F6F6F6;
width: 100px;
height: 35px;
margin-top: -45px;
margin-left: 1200px;
padding-top: 10px;
padding-left: 10px;
border: 1px gray solid;
}
.b3 img {
margin-right: 10px;
}
.bb1 {
width: 60px;
height: 34px;
background: red;
color: white;
display: inline-block;
border: 2px red solid;
margin-left: -5px;
margin-top: 10px;
line-height: 20px;
}
.b4 ul {
list-style: none;
margin-left: 460px;
}
.b4 ul li {
display: inline-block;
font-size: 12px;
color: gray;
}
.b4 ul li:hover {
color: orangered;
}
.c1 {
background: red;
color: white;
width: 190px;
height: 40px;
font-size: 17px;
line-height: 40px;
text-align: center;
margin-left: 150px;
margin-top: 30px;
}
.c2 ul li {
display: inline-block;
list-style: none;
font-size: 17px;
font-weight: bolder;
padding-right: 30px;
margin-bottom: 10px;
}
.c2 ul {
margin-left: 320px;
margin-top: -34px;
border-bottom: 2px red solid;
width: 970px;
}
.c2 span {
color: red;
}
.c3 {
float: right;
margin-top: -35px;
margin-right: 210px;
}
.d1 ul {
list-style: none;
background: #B01D1D;
width: 150px;
height: 410px;
margin-left: 150px;
color: white;
font-size: 14px;
}
.d1 li {
padding-bottom: 10px;
padding-top: 10px;
}
.dd1 {
margin-left: -35px;
padding-right: 5px;
}
.dd2 {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.d1 ul li:hover {
transform: translate(40px, 0);
transition: all 1.5s linear;
}
.d2 img:nth-of-type(1) {
position: absolute;
margin-left: 345px;
margin-top: -410px;
}
.d2 img:nth-of-type(2) {
position: absolute;
left: 346px;
top: 400px;
}
.d2 img:nth-of-type(3) {
position: absolute;
margin-left: 1105px;
margin-top:-230px;
}
.d2 li {
list-style: none;
display: inline-block;
background: #CCC0B3;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
}
.d2 ul {
position: absolute;
left: 650px;
top: 600px;
}
.d2 ul li:hover {
background: red;
color: white;
}
.d3-1 ul li {
list-style: none;
display: inline-block;
}
.d3-1 {
border: 1px gray solid;
width: 200px;
height: 25px;
margin-left: 1130px;
margin-top: -410px;
border-top: none;
border-bottom: 1px gray dashed;
padding-top: 5px;
}
.d3-1 span {
font-weight: bolder;
margin-left: -30px;
padding-top: 500px;
}
.d3-1 li:nth-of-type(2) {
margin-left: 80px;
color: gray;
}
.d3-1 li:nth-of-type(3) {
color: gray;
}
.d3-2 {
border: 1px gray solid;
width: 200px;
height: 170px;
margin-left: 1130px;
border-top: none;
}
.d3-2 ul {
list-style: none;
font-size: 12px;
padding-left: 10px;
padding-top: 10px;
line-height: 30px;
color: gray;
}
.d3-2 span {
font-weight: bolder;
color: black;
}
.d3-2 a:hover {
color: red;
}
.d3-3 {
font-weight: bolder;
border: 1px gray solid;
margin-left: 1130px;
width: 190px;
height: 35px;
padding-left: 10px;
padding-top: 10px;
border-bottom: 1px gray dashed;
}
.d3-4 {
border: 1px gray solid;
width: 190px;
height: 150px;
margin-left: 1130px;
padding-top: 10px;
padding-left: 10px;
line-height: 30px;
}
.d3-4 span {
color: gray;
font-size: 13px;
}
.e1 img {
margin-left: 150px;
margin-top: 20px;
border: 1px gray solid;
width: 188px;
height: 188px;
display: inline-block;
margin-bottom: -20px;
}
.e1 img:hover {
transform: scaleX(1.1);
transition: 1s linear;
}
.e1 p {
display: inline-block;
margin-right: -100px;
margin-left: 150px;
}
.e1 p:nth-of-type(1) {
background: red;
width: 60px;
height: 25px;
color: white;
padding-left: 5px;
padding-top: 5px;
position: absolute;
top: 820px;
left: 10px;
}
.e1 p:nth-of-type(2) {
color: red;
font-size: 14px;
position: absolute;
top: 825px;
left: 140px;
}
.e2 {
border: 1px gray solid;
width: 250px;
height: 190px;
margin-left: 345px;
display: inline-block;
}
.e2 a {
text-decoration: none;
}
.e2 a:hover {
text-decoration: underline;
}
.e2 ul li{
list-style: none;
color: gray;
}
.e2 a{
color: gray;
}
.e2 span{
color: black;
font-weight: bolder;
padding-right: 140px;
}
.e2 img {
margin-bottom: -10px;
margin-left: -20px;
}
.e2 img:hover{
transform: scale(1.1);
transition: 1s linear;
}
.e2 li:nth-of-type(3){
color: red;
font-size: 16px;
font-weight: bolder;
}
.e2 li:nth-of-type(4){
margin-left: 140px;
margin-top: -20px;
}
.e3 {
border: 1px gray solid;
width: 250px;
height: 190px;
display: inline-block;
}
.e3 a {
text-decoration: none;
}
.e3 a:hover {
text-decoration: underline;
}
.e3 ul li{
list-style: none;
color: gray;
}
.e3 a{
color: gray;
}
.e3 span{
color: black;
font-weight: bolder;
padding-right: 100px;
}
.e3 img {
margin-bottom: -10px;
margin-left: -20px;
}
.e3 img:hover{
transform: scale(1.1);
transition: 1s linear;
}
.e3 li:nth-of-type(3){
color: red;
font-size: 16px;
font-weight: bolder;
}
.e3 li:nth-of-type(4){
margin-left: 140px;
margin-top: -20px;
}
.e4{
border: 1px gray solid;
width: 250px;
height: 190px;
display: inline-block;
}
.e4 a {
text-decoration: none;
}
.e4 a:hover {
text-decoration: underline;
}
.e4 ul li{
list-style: none;
color: gray;
}
.e4 a{
color: gray;
}
.e4 span{
color: black;
font-weight: bolder;
padding-right: 90px;
}
.e4 img {
margin-bottom: -10px;
margin-left: -20px;
}
.e4 img:hover{
transform: scale(1.1);
transition: 1s linear;
}
.e4 li:nth-of-type(3){
color: red;
font-size: 16px;
font-weight: bolder;
}
.e4 li:nth-of-type(4){
margin-left: 140px;
margin-top: -20px;
}
.e5{
border: 1px gray solid;
width: 250px;
height: 190px;
display: inline-block;
}
.e5 a {
text-decoration: none;
}
.e5 a:hover {
text-decoration: underline;
}
.e5 ul li{
list-style: none;
color: gray;
}
.e5 a{
color: gray;
}
.e5 span{
color: black;
font-weight: bolder;
padding-right: 30px;
}
.e5 img {
margin-bottom: -10px;
margin-left: -20px;
}
.e5 img:hover{
transform: scale(1.1);
transition: 1s linear;
}
.e5 li:nth-of-type(3){
color: red;
font-size: 16px;
font-weight: bolder;
}
.e5 li:nth-of-type(4){
margin-left: 140px;
margin-top: -20px;
}
.e5 li:nth-of-type(2){
margin-left: -20px;
}
.e2,.e3,.e4,.e5{
margin-top: -240px;
}
.e5,.e3,.e4{
margin-left: -5px;
}
.e6 img{
display: inline-block;
margin-right: 220px;
position: relative;
top: -180px;
}
.e6 img:nth-of-type(1){
margin-left: 350px;
}
.e7{
margin-left: 345px;
margin-top: -160px;
}
.e7 img:nth-of-type(2){
margin-left: 938px;
}
.f{
margin-top: 70px;
margin-left: 150px;
}
.n2{
margin-top: 30px;
margin-left: 150px;
}
.g ul li{
list-style: none;
display: inline-block;
margin-right: 50px;
font-size: 12px;
}
.g ul{
margin-left: 35px;
margin-top: -25px;
vertical-align: auto;
}
.g ul li:nth-of-type(1){
margin-left: 80px;
margin-right: 30px;
color: white;
font-size: 14px;
}
.g ul li:nth-of-type(2){
color: red;
font-size: 16px;
margin-right: 580px;
}
.g img{
margin-left: 150px;
margin-top: 20px;
}
.g1:hover{
color: red;
}
.g2{
border: 2px red solid;
width: 1160px;
margin-left: 150px;
margin-top: 10px;
}
.h1{
margin-left: 150px;
}
.h1 ul{
list-style: none;
background: #E4F7EC;
width: 170px;
height: 150px;
}
.h1 ul li{
padding-bottom: 10px;
padding-top: 10px;
font-size: 14px;
}
.h3 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: -155px;
}
.h4 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: 40px;
}
.h5 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: 40px;
}
.h1 img:nth-of-type(1){
margin-bottom: -5px;
}
.h1 img:nth-of-type(2){
position: relative;
top:-320px;
padding-right: 165px;
}
.h1 img:nth-of-type(3){
position: relative;
top:-320px
}
.h1 span:hover{
color: red;
}
.i1{
border: 1px gray solid;
width: 230px;
height:230px;
margin-left: 360px;
border-top: none;
margin-top: -407px;
}
.i1 img{
margin-left: 20px;
margin-top: 10px;
}
.i2 img{
margin-left: 20px;
margin-top: 10px;
}
.i2{
border: 1px gray solid;
width: 230px;
height:230px;
margin-top: -231px;
border-top: none;
margin-left:591px;
}
.i3{
border: 1px gray solid;
width: 230px;
height:230px;
margin-top: -231px;
border-top: none;
margin-left:822px;
}
.i4{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: 0px;
border-bottom: none;
margin-left:360px;
border-left: none;
}
.i5{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: -205px;
border-bottom: none;
margin-left:591px;
}
.i6{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: -205px;
border-bottom: none;
margin-left:822px;
}
.i ul{
list-style: none;
margin-left: -40px;
}
.j ul{
list-style: none;
}
.j ul li:nth-of-type(2){
color: red;
font-weight: bolder;
}
.j ul li{
line-height: 30px;
font-size: 14px;
}
.j ul:nth-of-type(1){
position: absolute;
margin-left: 350px;
margin-top: -300px;
}
.j ul:nth-of-type(2){
position: absolute;
margin-left: 560px;
margin-top: -300px;
}
.j ul:nth-of-type(3){
position: absolute;
margin-left: 850px;
margin-top: -300px;
}
.j ul:nth-of-type(4){
position: absolute;
margin-left: 350px;
margin-top: -50px;
}
.j ul:nth-of-type(5){
position: absolute;
margin-left: 600px;
margin-top: -50px;
}
.j ul:nth-of-type(6){
position: absolute;
margin-left: 850px;
margin-top: -50px;
}
.j1 img:nth-of-type(1){
position: absolute;
margin-left: 1055px;
margin-top: -435px;
}
.j1 img:nth-of-type(2){
position: absolute;
margin-left: 1055px;
margin-top: -215px;
}
.i img:hover{
transform: scale(1.1);
transition: all 1s linear;
}
.j li:hover{
color: red;
}
.k ul li{
list-style: none;
display: inline-block;
margin-right: 50px;
font-size: 12px;
}
.k ul{
margin-left: 35px;
margin-top: -25px;
vertical-align: auto;
}
.k ul li:nth-of-type(1){
margin-left: 80px;
margin-right: 30px;
color: white;
font-size: 14px;
}
.k ul li:nth-of-type(2){
color: red;
font-size: 16px;
margin-right: 630px;
}
.k img{
margin-left: 150px;
margin-top: 20px;
}
.k1:hover{
color: red;
}
.k{
margin-bottom: 10px;
}
.k2{
border: 2px red solid;
width: 1160px;
margin-left: 150px;
margin-top: 0px;
position: absolute;
}
.l1{
margin-left: 150px;
}
.l1 ul{
list-style: none;
background: pink;
width: 170px;
height: 150px;
}
.l1 ul li{
padding-bottom: 10px;
padding-top: 10px;
font-size: 14px;
}
.l3 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: -155px;
}
.l4 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: 40px;
}
.l5 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: 40px;
}
.l1 img:nth-of-type(1){
margin-bottom: -5px;
}
.l1 img:nth-of-type(2){
position: relative;
top:-320px;
padding-right: 165px;
}
.l1 img:nth-of-type(3){
position: relative;
top:-320px
}
.l1 span:hover{
color: red;
}
.m1{
border: 1px gray solid;
width: 230px;
height:230px;
margin-left: 360px;
border-top: none;
margin-top: -407px;
border-left:none ;
}
.m2{
border: 1px gray solid;
width: 230px;
height:230px;
margin-top: -231px;
border-top: none;
margin-left:591px;
}
.m3{
border: 1px gray solid;
width: 230px;
height:230px;
margin-top: -231px;
border-top: none;
margin-left:822px;
}
.m4{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: 0px;
border-bottom: none;
margin-left:360px;
border-left: none;
}
.m5{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: -205px;
border-bottom: none;
margin-left:591px;
}
.m6{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: -205px;
border-bottom: none;
margin-left:822px;
}
.m ul{
list-style: none;
margin-left: -40px;
}
.n ul{
list-style: none;
}
.n ul li:nth-of-type(2){
color: red;
font-weight: bolder;
}
.n ul li{
line-height: 30px;
font-size: 14px;
}
.n ul:nth-of-type(1){
position: absolute;
margin-left: 350px;
margin-top: -300px;
}
.n ul:nth-of-type(2){
position: absolute;
margin-left: 600px;
margin-top: -300px;
}
.n ul:nth-of-type(3){
position: absolute;
margin-left: 850px;
margin-top: -300px;
}
.n ul:nth-of-type(4){
position: absolute;
margin-left: 350px;
margin-top: -50px;
}
.n ul:nth-of-type(5){
position: absolute;
margin-left: 600px;
margin-top: -50px;
}
.n ul:nth-of-type(6){
position: absolute;
margin-left: 850px;
margin-top: -50px;
}
.n1 img:nth-of-type(1){
position: absolute;
margin-left: 1055px;
margin-top: -435px;
}
.n1 img:nth-of-type(2){
position: absolute;
margin-left: 1055px;
margin-top: -215px;
}
.m img:hover{
transform: scale(1.1);
transition: all 1s linear;
}
.n li:hover{
color: red;
}
.o ul li{
list-style: none;
display: inline-block;
margin-right: 50px;
font-size: 12px;
}
.o ul{
margin-left: 35px;
margin-top: -25px;
}
.o{
margin-bottom: 5px;
}
.o ul li:nth-of-type(1){
margin-left: 80px;
margin-right: 30px;
color: white;
font-size: 14px;
}
.o ul li:nth-of-type(2){
color: red;
font-size: 16px;
margin-right: 600px;
}
.o img{
margin-left: 150px;
margin-top: 20px;
}
.o1:hover{
color: red;
}
.o2{
border: 2px red solid;
width: 1160px;
margin-left: 150px;
margin-top: -3px;
margin-bottom: 2px;
position: absolute;
}
.p1{
margin-left: 150px;
}
.p1 ul{
list-style: none;
background: #FCEBF2;
width: 170px;
height: 150px;
}
.p1 ul li{
padding-bottom: 10px;
padding-top: 10px;
font-size: 14px;
}
.p3 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: -155px;
}
.p4 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: 40px;
}
.p5 {
border-top: 1px gray dashed;
width: 210px;
margin-left: 150px;
margin-top: 40px;
}
.p1 img:nth-of-type(1){
margin-bottom: -5px;
}
.p1 img:nth-of-type(2){
position: relative;
top:-320px;
padding-right: 165px;
}
.p1 img:nth-of-type(3){
position: relative;
top:-320px
}
.p1 span:hover{
color: red;
}
.q1{
border: 1px gray solid;
width: 230px;
height:230px;
margin-left: 360px;
border-top: none;
margin-top: -407px;
border-left:none ;
}
.q2{
border: 1px gray solid;
width: 230px;
height:230px;
margin-top: -231px;
border-top: none;
margin-left:591px;
}
.q3{
border: 1px gray solid;
width: 230px;
height:230px;
margin-top: -231px;
border-top: none;
margin-left:822px;
}
.q4{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: 0px;
border-bottom: none;
margin-left:360px;
border-left: none;
}
.q5{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: -205px;
border-bottom: none;
margin-left:591px;
}
.q6{
border: 1px gray solid;
width: 230px;
height:204px;
margin-top: -205px;
border-bottom: none;
margin-left:822px;
}
.q ul{
list-style: none;
margin-left: -40px;
}
.r ul{
list-style: none;
}
.r ul li:nth-of-type(2){
color: red;
font-weight: bolder;
}
.r ul li{
line-height: 30px;
font-size: 14px;
}
.r ul:nth-of-type(1){
position: absolute;
margin-left: 350px;
margin-top: -300px;
}
.r ul:nth-of-type(2){
position: absolute;
margin-left: 600px;
margin-top: -300px;
}
.r ul:nth-of-type(3){
position: absolute;
margin-left: 850px;
margin-top: -300px;
}
.r ul:nth-of-type(4){
position: absolute;
margin-left: 350px;
margin-top: -50px;
}
.r ul:nth-of-type(5){
position: absolute;
margin-left: 600px;
margin-top: -50px;
}
.r ul:nth-of-type(6){
position: absolute;
margin-left: 850px;
margin-top: -50px;
}
.r1 img:nth-of-type(1){
position: absolute;
margin-left: 1055px;
margin-top: -434px;
}
.r1 img:nth-of-type(2){
position: absolute;
margin-left: 1055px;
margin-top: -215px;
}
.q img:hover{
transform: scale(1.1);
transition: all 1s linear;
}
.r li:hover{
color: red;
}
.s ul li{
list-style: none;
display: inline-block;
}
.s img{
margin-left: 220px;
margin-top: 50px;
}
.s1{
margin-left: 220px;
margin-top: 20px;
}
.s1 li{
margin-right: 220px;
}
.s2{
margin-left: 220px;
margin-top: 20px;
color: gray;
}
.s2 li{
margin-right: 150px;
}
.s img:hover{
transform: rotate(360deg) scale(1.2) ;
transition: all 1.5s linear;
}
.s3 ul{
display: inline-block;
margin-left: 150px;
margin-right: -110px;
}
.s4{
position: relative;
bottom: -60px;
}
.s3 a{
color: black;
text-decoration: none;
font-weight: bolder;
font-size: 16px;
}
.s3 :hover{
color: red;
}
.s3 a:hover{
text-decoration: underline;
color: black;
}
.s3 ul li{
list-style: none;
color: gray;
font-size: 13px;
line-height: 30px;
}
.s9 ul{
list-style: none;
color: gray;
margin-left: 950px;
margin-top: -120px;
}
.s10 {
position: relative;
right: -150px;
top: -150px;
line-height: 50px;
}
.s10 span:hover{
color: red;
}
.s10 span{
position: relative;
top:-5px;
right: -10px;
}
.s11 {
position: relative;
right: -150px;
top: -150px;
line-height: 30px;
}
.s11 a{
color: red;
font-size: 22px;
}
.s12{
margin-left: -900px;
width: 1265px;
position: relative;
top: -70px;
}
.s13 ul {
margin-left: 140px;
list-style: none;
margin-top: -50px;
}
.s13 ul li{
display: inline-block;
margin-right: 60px;
border: 1px gray solid;
border-radius:5px ;
width: 140px;
}
</style>
<body>
<header>
<div class="a">
<span>送货至：四川</span>
<ul>
<li>你好!请
<a id="a-ul" href="#">登入</a>
</li>
<li>
<a id="aa1" href="#">免费注册</a>
</li>
<li>|</li>
<li><a>我的订单</a></li>
<li>|</li>
<li><a>收藏夹</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li><a>客户服务</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li><a>网站导航</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li>|</li>
<li>关注我们：</a></li>
<li><img src="img/sh1.png" </li>
<li><img src="img/sh2.png" /></li>
<li>|</li>
<li>手机版</li>
<li><img src="img/s_tel.png" /> </li>
</ul>
</div>
<div class="b1">
<img src="img/logo.png" width="200px" />
</div>
<div class="b2">
<input type="search" placeholder="请输入关键词" class="bb">
<input type="submit" value="搜索" class="bb1">
</div>
<div class="b3">
<img src="img/car.png" /> 购物车
</div>
<div class="b4">
<ul>
<li>咖啡</li>
<li>ihpone 6s</li>
<li>新鲜美食</li>
<li>蛋糕</li>
<li>日用品</li>
<li>连衣裙</li>
</ul>
</div>
</header>
<article>
<div class="c1">
全部商品分类
</div>
<div class="c2">
<ul>
<li><span>首页</span></li>
<li><span>自营超市</span></li>
<li>1号团</li>
<li>1号超市</li>
<li>女装</li>
<li>美妆</li>
<li>1号海团</li>
<li>团购</li>
</ul>
<img class="c3" src="img/phone.png" />
</div>
<div class="d1">
<ul>
<li><img class="dd1" src="img/nav1.png" />进口商品、生鲜<img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav2.png" />食品、饮料、酒> <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav3.png" />母婴、玩具、童装 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav4.png" />家居、家庭清洁、纸品 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav5.png" />美妆、个人护理、洗护 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav6.png" />女装、内衣、中老年 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav7.png" />鞋靴、箱包。腕表配饰 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav8.png" />男装、运动 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav9.png" />手机、小家电、电脑 <img class="dd2" src="img/r_right.png" width="6px" /></li>
<li><img class="dd1" src="img/nav10.png" />礼品、充值<img class="dd2" src="img/r_right.png" width="6px" /></li>
</ul>
</div>
<div class="d2">
<img src="img/ban1.jpg" width="780px" />
<img src="img/s_left.png" />
<img src="img/s_right.png" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="d3">
<div class="d3-1">
<ul>
<li><span>快讯</span></li>
<li>更多</li>
<li>></li>
</ul>
</div>
<div class="d3-2">
<ul>
<li><span>【特惠】</span>
<a>掬一轮明月 表无尽惦念</a>
</li>
<li><span>【公告】</span>
<a>好奇金装成长裤新品上市</a>
</li>
<li><span>【特惠】</span>
<a>大牌闪购 · 抢！</a>
</li>
<li><span>【公告</span>】
<a>发福利 买车就抢千元油卡</a>
</li>
<li><span>【公告】</span>
<a>家电低至五折</a>
</li>
</ul>
</div>
<div class="d3-3">
1号钱包
</div>
<div class="d3-4">
<span>收益日结，收益赚High！</span>
<img src="img/oneAD.jpg" width="170px" />
</div>
<div class="e1">
<img src="img/l_img.jpg" />
<p>￥53.00</p>
<p>16R</p>
</div>
<div class="e2">
<ul>
<li><img src="img/hot1.jpg" /></li>
<li>
<a href="#"><span>德国进口</span>德亚全脂纯牛奶200ml*48盒</a>
</li>
<li>￥189</li>
<li>26R</li>
</ul>
</div>
<div class="e3">
<ul>
<li><img src="img/hot2.jpg" /></li>
<li>
<a href="#"><span>iphone 6S</span> Apple/苹果 iPhone 6s Plus</a>
</li>
<li>￥5288</li>
<li>25R</li>
</ul>
</div>
<div class="e4">
<ul>
<li><img src="img/hot3.jpg" /></li>
<li>
<a href="#"><span>倩碧特惠组合套</span>装倩碧补水组合套装8折促销</a>
</li>
<li>￥368</li>
<li>18R</li>
</ul>
</div>
<div class="e5">
<ul>
<li><img src="img/hot4.jpg" /></li>
<li>
<a href="#"><span>品利特级橄榄油</span> 750ml*4瓶装组合 西班牙原装进口</a>
</li>
<li>￥280</li>
<li>30R</li>
</ul>
</div>
<div class="e6">
<img src="img/hot.png" width="40px" />
<img src="img/hot.png" width="40px" />
<img src="img/hot.png" width="40px" />
<img src="img/hot.png" width="40px" />
</div>
<div class="e7">
<img src="img/b_left.png" />
<img src="img/b_right.png" />
</div>
<div class="f">
<img src="img/mban_2.jpg" width="1165"/>
</div>
<div class="g">
<img src="img/floor.png" />
<ul>
<li>1F</li>
<li>进口 · 生鲜</li>
<li class="g1">进口咖啡</li>
<li class="g1">进口酒</li>
<li class="g1">进口母婴</li>
<li class="g1">新鲜蔬菜</li>
<li class="g1">新鲜水果</li>
</ul>
</div>
<div class="g2">
</div>
<div class="h1">
<img src="img/fre_r.jpg">
<ul>
<li><span>进口水果</span> <span>奇异果</span> <span>西柚</span> </li>
<li><span>海鲜水产</span> <span>品质牛肉</span></li>
<li><span>奶粉</span> <span>鲜活禽蛋</span> <span>进口酒</span></li>
<li><span>进口奶粉</span> <span>鲜活禽蛋</span></li>
</ul>
<img src="img/s_left.png" />
<img src="img/s_right.png" />
</div>
<div class="h3">
</div>
<div class="h4">
</div>
<div class="h5">
</div>
<div class="i">
<ul>
<li class="i1"><img src="img/fre_1.jpg" width="120px"></li>
<li class="i2"><img src="img/fre_2.jpg"width="120px"/></li>
<li class="i3"><img src="img/fre_3.jpg"/></li>
<li class="i4"><img src="img/fre_4.jpg"/></li>
<li class="i5"><img src="img/fre_5.jpg"/></li>
<li class="i6"><img src="img/fre_6.jpg"/></li>
</ul>
</div>
<div class="j">
<ul>
<li>贝思客 草莓先生&蓝莓小姐</li>
<li>￥98.00</li>
</ul>
<ul>
<li>微笑果园SMILE 智利进口绿奇异果</li>
<li>￥84.00</li>
</ul>
<ul>
<li>新鲜美味 进口美食</li>
<li>￥98.00</li>
</ul>
<ul>
<li>新鲜美味 进口美食</li>
<li>￥24.00</li>
</ul>
<ul>
<li>新鲜美味 纯牛奶</li>
<li>￥142.00</li>
</ul>
<ul>
<li>莫斯利安</li>
<li>￥62.00</li>
</ul>
</div>
<div class="j1">
<img src="img/fre_b1.jpg" />
<img src="img/fre_b2.jpg" />
</div>
<div class="k">
<img src="img/floor.png" />
<ul>
<li>2F</li>
<li>个人美妆</li>
<li class="k1">洗发护发</li>
<li class="k1">面膜 </li>
<li class="k1">洗面奶</li>
<li class="k1">香水</li>
<li class="k1">沐浴露</li>
</ul>
</div>
<div class="k2">
</div>
<div class="l1">
<img src="img/make_r.jpg" width="195px"/>
<ul>
<li><span>洗发护发</span> <span>牙刷牙膏</span> </li>
<li><span>面膜</span> <span>补水面膜</span><span>香水</span> </li>
<li><span>面霜</span> <span>洗面奶</span> <span>脱毛膏</span></li>
<li><span>沐浴露</span> </li>
</ul>
<img src="img/s_left.png" />
<img src="img/s_right.png" />
</div>
<div class="l3">
</div>
<div class="l4">
</div>
<div class="l5">
</div>
<div class="m">
<ul>
<li class="m1"><img src="img/make_1.jpg" width="120px"></li>
<li class="m2"><img src="img/make_2.jpg"width="120px"/></li>
<li class="m3"><img src="img/make_3.jpg"/></li>
<li class="m4"><img src="img/make_4.jpg"/></li>
<li class="m5"><img src="img/make_5.jpg"/></li>
<li class="m6"><img src="img/make_6.jpg"/></li>
</ul>
</div>
<div class="n">
<ul>
<li>美宝莲粉饼</li>
<li>￥260.00</li>
</ul>
<ul>
<li>洗衣液</li>
<li>￥60.00</li>
</ul>
<ul>
<li>洗发水</li>
<li>￥160.00</li>
</ul>
<ul>
<li>男士洗发水</li>
<li>￥120.00/li>
</ul>
<ul>
<li>美宝莲粉饼</li>
<li>￥260.00</li>
</ul>
<ul>
<li>男士设计 洗面奶</li>
<li>￥90.00</li>
</ul>
</div>
<div class="n1">
<img src="img/make_b1.jpg" />
<img src="img/make_b2.jpg" />
</div>
<div class="n2">
<img src="img/mban_2.jpg" width="1165px" />
</div>
<div class="o">
<img src="img/floor.png" />
<ul>
<li>3F</li>
<li>母婴玩具</li>
<li class="o1">营养品 </li>
<li class="o1">孕妈背带裤 </li>
<li class="o1">儿童玩具</li>
<li class="o1">婴儿床 </li>
<li class="o1">喂奶器</li>
</ul>
</div>
<div class="o2">
</div>
<div class="p1">
<img src="img/baby_r.jpg" width="210px"/>
<ul>
<li><span>孕妈必备</span> <span>儿童玩具</span> </li>
<li><span>重装童鞋</span> <span>辅助食品</span> </li>
<li><span>奶粉</span> <span>鲜活禽蛋</span> <span>维生素</span></li>
<li><span>重装童鞋</span> <span>辅助食品</span> </li>
</ul>
<img src="img/s_left.png" />
<img src="img/s_right.png" />
</div>
<div class="p3">
</div>
<div class="p4">
</div>
<div class="p5">
</div>
<div class="q">
<ul>
<li class="q1"><img src="img/baby_1.jpg" width="120px"/></li>
<li class="q2"><img src="img/baby_2.jpg"width="120px"/></li>
<li class="q3"><img src="img/baby_3.jpg"/></li>
<li class="q4"><img src="img/baby_4.jpg"/></li>
<li class="q5"><img src="img/baby_5.jpg"/></li>
<li class="q6"><img src="img/baby_6.jpg"/></li>
</ul>
</div>
<div class="r">
<ul>
<li>儿童推车</li>
<li>￥560.00</li>
</ul>
<ul>
<li>妈咪纸尿裤</li>
<li>￥260.00</li>
</ul>
<ul>
<li>儿童玩具 挖掘机</li>
<li>￥160.00</li>
</ul>
<ul>
<li>纸尿裤</li>
<li>￥260.00</li>
</ul>
<ul>
<li>儿童推车</li>
<li>￥86.00</li>
</ul>
<ul>
<li>奶粉</li>
<li>￥660.00</li>
</ul>
</div>
<div class="r1">
<img src="img/baby_b1.jpg" />
<img src="img/baby_b2.jpg" />
</div>
</article>
<footer>
<div class="s">
<ul>
<li><img src="img/b1.png"/></li>
<li><img src="img/b2.png"/></li>
<li><img src="img/b3.png"/></li>
<li><img src="img/b4.png"/></li>
</ul>
<ul class="s1">
<li>正品保障</li>
<li>满38包邮</li>
<li>天天低价</li>
<li>准时送达</li>
</ul>
<ul class="s2">
<li>正品行货 放心购买</li>
<li>满38包邮 免运费</li>
<li>天天低价 畅选无忧</li>
<li>收货时间由你做主</li>
</ul>
</div>
<div class="s3">
<ul class="s4">
<li><a href="#">新手上路</a></li>
<li>售后流程</li>
<li>购物流程</li>
<li>订购方式</li>
<li>隐私声明</li>
<li>推荐分享说明</li>
</ul>
<ul class="s5">
<li><a href="#">配送与支付</a></li>
<li>货到付款区域</li>
<li>配送支付查询</li>
<li>支付方式说明</li>
</ul>
<ul class="s6">
<li><a href="#">会员中心</a></li>
<li>资金管理</li>
<li>我的收藏</li>
<li>我的订单</li>
</ul>
<ul class="s7">
<li><a href="#">服务保证</a></li>
<li>退换货原则</li>
<li>售后服务保证</li>
<li>产品质量保证</li>
</ul>
<ul class="s8">
<li><a href="#">联系我们</a></li>
<li>网站故障报告</li>
<li>购物咨询</li>
<li>投诉与建议</li>
</ul>
</div>
<div class="s9">
<ul>
<li><img src="img/er.gif"/></li>
<li>扫一扫关注我们！</li>
<li class="s10"><img src="img/b_sh_1.png"/><span>新浪微博</span></li>
<li class="s10"><img src="img/b_sh_2.png"/><span>腾讯微博</span></li>
<li class="s11">服务热线：</li>
<li class="s11"><a>400-123-4567</a></li>
<li class="s12"><hr></li>
<li class="s12">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg Group </li>
</ul>
</div>
<div class="s13">
<ul>
<li><img src="img/b_1.gif" /></li>
<li><img src="img/b_2.gif" /></li>
<li><img src="img/b_3.gif" /></li>
<li><img src="img/b_4.gif" /></li>
<li><img src="img/b_5.gif" /></li>
<li><img src="img/b_6.gif" /></li>
</ul>
</div>
</footer>
</body>
</html>
注册：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
.b ul li {
list-style: none;
display: inline-block;
}
.a {
border: 1px gray solid;
width: 1545px;
height: 100px;
position: relative;
left: -30px;
top: -16px;
border-bottom: 1px gainsboro solid;
font-size: 14px;
color: gray;
}
.a img {
margin-left: 150px;
margin-top: 20px;
}
.a a {
position: relative;
right: -600px;
top: -50px;
}
.a span {
color: blue;
}
.a span:hover {
color: red;
}
.b ul {
border: 1px gray solid;
width: 110px;
height: 25px;
margin-left: 1200px;
font-size: 12px;
padding-top: 10px;
padding-left: 10px;
margin-top: -100px;
}
.b ul li {
padding-right: 5px;
display: inline-block;
vertical-align: middle;
}
.c ul{
list-style: none;
margin-top: 100px;
text-align: center;
}
.c1 {
font-weight: bolder;
font-size: 22px;
margin-bottom: 10px;
}
.c2,.c5,.c6{
width: 200px;
height: 40px;
padding-left: 20px;
}
.c3{
width: 100px;
height: 40px;
padding-left: 20px;
margin-left: -100px;
margin-top: 20px;
}
.c4{
color: white;
background: gray;
width: 95px;
height: 35px;
text-align: center;
margin-left: 750px;
margin-top: -46px;
padding-top: 10px;
margin-bottom: 10px;
}
.c6{
margin-top: 10px;
}
.c a{
text-decoration: none;
}
.c7{
font-size: 12px;
margin-top: 20px;
}
.c8{
background: red;
color: white;
width: 230px;
height: 40px;
margin-top: 20px;
border: 1px red solid;
}
.c span:hover{
color: red;
}
.c9{
font-size: 12px;
line-height: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<div class="a">
<img src="img/logo.png" />
<a>您好，欢迎光临1号店！<span>请登录</span></a>
</div>
<div class="b">
<ul>
<li><img src="img/runbun.png" /></li>
<li>帮助中心</li>
<li><img src="img/turnb.png" /></li>
</ul>
</div>
<div class="c">
<ul>
<li class="c1">1号店注册</li>
<li><input class="c2" type="text" placeholder="手机号" required="请填写"/></li>
<li><input class="c3" type="text" placeholder="手机号"/></li>
<li class="c4">获取验证码</li>
<li><input class="c5" type="password" placeholder="密码"/></li>
<li><input class="c6" type="password" placeholder="确认密码"/></li>
<li class="c7">点击注册，表示您同意1号店 <a href="#">《服务协议》</a></li>
<li><input class="c8" type="submit" value="同意协议并注册" /></li>
<li class="c9"><span>沪ICP备13044278号|</span> 合字B1.B2-20130004 <span>|营业执照</span></li>
<li class="c9">Copyright ©" 1号店网上超市 2007-2016，All Rights Reserved</li>
</ul>
</div>
</body>
</html>
登录：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
.b ul li {
list-style: none;
display: inline-block;
}
.a {
border: 1px gray solid;
width: 1545px;
height: 100px;
position: relative;
left: -30px;
top: -16px;
border-bottom: 1px gainsboro solid;
font-size: 14px;
color: gray;
}
.a img {
margin-left: 150px;
margin-top: 20px;
}
.a a {
position: relative;
right: -600px;
top: -50px;
}
.a span {
color: blue;
}
.a span:hover {
color: red;
}
.b ul {
border: 1px gray solid;
width: 110px;
height: 25px;
margin-left: 1200px;
font-size: 12px;
padding-top: 10px;
padding-left: 10px;
margin-top: -100px;
}
.b ul li {
padding-right: 5px;
display: inline-block;
vertical-align: middle;
}
.c {
margin-top: 120px;
margin-left: 250px;
}
.d ul {
margin-left: 900px;
position: relative;
top: -330px;
color: gray;
list-style: none;
}
.d1 {
font-weight: bolder;
font-size: 14px;
}
.d a {
text-decoration: none;
font-size: 12px;
margin-left: 200px;
position: relative;
top: -20px;
}
.d a:hover {
color: red;
}
.d2,
.d4 {
width: 200px;
height: 46px;
padding-left: 50px;
margin-bottom: 20px;
}
.e ul {
list-style: none;
position: absolute;
top: 205px;
right: 520px;
}
.e1,
.e2 {
margin-bottom: 45px;
margin-left: -37px;
}
.d6 {
margin-left: 180px;
margin-top: -20px;
}
.d7 {
background: red;
color: white;
width: 250px;
height: 40px;
border-radius: 5px;
text-align: center;
margin-top: 20px;
border: 1px red solid;
}
.d8 {
margin-top: 10px;
margin-bottom: 10px;
}
.f ul li {
display: inline-block;
list-style: none;
}
.f ul {
margin-left: 900px;
margin-top: -330px;
}
.f1 {
position: relative;
top: -10px;
color: gray;
font-size: 13px;
}
.f1 img {
vertical-align: middle;
}
.g {
font-size: 13px;
margin-left: 550px;
margin-top: -200px;
}
.g span:hover {
color: red;
}
ul{
list-style: none;
}
.e3 {
position: absolute;
right: 420px;
top: 450px;
}
.e3 li{
display: inline-block;
margin-right: -15PX;
margin-top: 20px;
}
.e3 li:nth-of-type(1){
width: 50px;
height: 50px;
background: url(img/l_1.png) no-repeat ;
}
.e3 li:nth-of-type(1):hover{
background: url(img/l_1_h.png) no-repeat ;
width: 50px;
height: 50px;
}
.e3 li:nth-of-type(2){
width: 50px;
height: 50px;
background: url(img/l_2.png) no-repeat ;
}
.e3 li:nth-of-type(2):hover{
background: url(img/l_2_h.png) no-repeat ;
width: 50px;
height: 50px;
}
.e3 li:nth-of-type(3){
width: 50px;
height: 50px;
background: url(img/l_3.png) no-repeat ;
}
.e3 li:nth-of-type(3):hover{
background: url(img/l_3_h.png) no-repeat ;
width: 50px;
height: 50px;
}
.e3 li:nth-of-type(4){
width: 50px;
height: 50px;
background: url(img/l_4.png) no-repeat ;
}
.e3 li:nth-of-type(4):hover{
background: url(img/l_4_H.png) no-repeat ;
width: 50px;
height: 50px;
}
.e3 p img{
vertical-align: middle;
}
.e3 p{
font-size: 13px;
position: relative;
right: -200px;
top: -60px;
}
</style>
</head>
<body>
<header>
<div class="a">
<img src="img/logo.png" />
<a>您好，欢迎光临1号店！<span>请登录</span></a>
</div>
<div class="b">
<ul>
<li><img src="img/runbun.png" /></li>
<li>帮助中心</li>
<li><img src="img/turnb.png" /></li>
</ul>
</div>
<div class="c">
<img src="img/loadimg.jpg" />
</div>
<div class="d">
<ul>
<li class="d1">1号店用户登录</li>
<li>
<a href="#">注册账号</a>
</li>
<li><input class="d2" type="text" placeholder="邮箱/手机/用户名" required/></li>
<li><input class="d4" type="password" placeholder="密码" required/></li>
<input type="checkbox">自动登入
<li class="d6">忘记密码？</li>
<li><input class="d7" type="submit" value="登入"></li>
<li class="d8">登录更多合作网站账号登录</li>
</ul>
</div>
<div class="e">
<ul>
<li><img class="e1" src="img/userHead.png" /></li>
<li><img class="e2" src="img/i_pwd.png" /></li>
</ul>
</div>
<div class="e3">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p> 更多合作网站<img src="img/loadMore.png" width="20px" /></p>
</div>
<div class="g">
<p><span>沪ICP备13044278号</span>| 合字B1.B2-20130004 <span>|营业执照</span></p>
<p>Copyright©1号店网上超市 2007-2016，All Rights Reserved</p>
</div>
</header>
<article>
</article>
<footer></footer>
</body>
</html>
珠宝详情页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>珠宝详情页</title>
<style>
* {
margin: 0;
}
.a ul li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.a {
width: 100%;
background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
height: 30px;
font-size: 12px;
line-height: 30px;
color: gray;
}
.a ul {
margin-left: 630px;
margin-top: -28px;
}
.a ul a {
color: gray;
text-decoration: none;
}
#a-ul {
color: gray;
}
#a-ul:hover {
color: red;
}
#aa1{
color: red;
}
.a a:hover{
color: red;
}
.a span {
margin-left: 40px;
}
.b1 {
margin-left: 60px;
margin-top: 40px;
}
.b2 {
margin-top: -50px;
}
.bb {
width: 320px;
height: 35px;
border: 2px red solid;
margin-left: 500px;
display: inline-block;
}
.b3 {
background: #F6F6F6;
width: 100px;
height: 35px;
margin-top: -45px;
margin-left: 1200px;
padding-top: 10px;
padding-left: 10px;
border: 1px gray solid;
}
.b3 img {
margin-right: 10px;
}
.bb1 {
width: 60px;
height: 34px;
background: red;
color: white;
display: inline-block;
border: 2px red solid;
margin-left: -5px;
margin-top: 10px;
line-height: 20px;
}
.b4 ul {
list-style: none;
margin-left: 460px;
}
.b4 ul li {
display: inline-block;
font-size: 12px;
color: gray;
}
.b4 ul li:hover {
color: orangered;
}
.c1 {
background: red;
color: white;
width: 190px;
height: 40px;
font-size: 17px;
line-height: 40px;
text-align: center;
margin-left: 150px;
margin-top: 30px;
}
.c2 ul li {
display: inline-block;
list-style: none;
font-size: 17px;
font-weight: bolder;
padding-right: 30px;
margin-bottom: 10px;
}
.c2 ul {
margin-left: 320px;
margin-top: -34px;
border-bottom: 2px red solid;
width: 970px;
}
.c2 span {
color: red;
}
.c3 {
float: right;
margin-top: -35px;
margin-right: 210px;
}
.d1{
font-size: 13px;
margin-left: 150px;
margin-top: 20px;
}
.d1 span{
color: red;
}
.d2{
margin-left: 150px;
margin-top: 10px;
}
.d3{
margin-left: 560px;
margin-top: -355px;
line-height: 30px;
}
.d3 ul li{
list-style: none;
display: inline-block;
}
.d4{
font-weight: bolder;
}
.d5{
color: gray;
font-size: 14px;
}
.d6{
color: gray;
font-size: 13px;
}
.d6 span{
color: red;
font-weight: bolder;
font-size: 17px;
}
.d6 a{
color: black;
font-size: 15px;
}
.d6 .d7{
border: 1px gray solid;
width: 60px;
height: 30px;
text-align: center;
}
.d6 .d7:hover{
border: 2px red solid;
}
#d6{
margin-left: -40px;
margin-top: 10px;
}
#d7{
border: 2px red solid;
}
.d8{
position: relative;
bottom: -10px;
right: -5px;
}
.d9{
position: relative;
bottom: -10px;
right: -7px;
}
.d10{
margin-right: 10px;
}
.d3 p:nth-of-type(5){
margin-top: 20px;
}
.d3 p:nth-of-type(6){
position: relative;
right: -100px;
top: -25px;
}
.d11{
margin-right: 10px;
}
.d12{
width: 70px;
height: 39px;
margin-left: -100px;
position: relative;
bottom: -45px;
}
.d13
{
margin-left: 74px;
margin-top: -30px;
}
.d14{
margin-left: 74px;
margin-top: -8px;
}
#d14{
width: 23.5px;
}
.d15{
position: relative;
right: -120px;
top: -45px;
}
.e1 p{
margin-top: -4px;
text-align: center;
padding-top: 20px;
background: gainsboro;
}
.e1{
margin-left: 1150px;
margin-top: -380px;
border: 1px gainsboro solid;
width: 171px;
}
#d8:hover {
border: 1px gray solid;
width: 80px;
height: 30px;
}
#d9{
margin-bottom: 50px;
margin-left: 90px;
margin-top: -25px;
}
#d9:hover{
color: red;
}
.e0{
border: 1px gray solid;
width: 150px;
height: 30px;
margin-left: 0px;
margin-top: -0px;
display: none;
}
#d8:hover .e0{
display: block;
}
.e0 img{
margin-top: 8px;
margin-left: 5px;
}
.e3{
position: relative;
top: -20px;
}
.e2{
margin-left: 150px;
margin-top: 270px;
}
.e4{
border: 1px gainsboro solid;
border-radius:5px ;
padding: 5px;
}
.e5{
border: 1px gray solid;
background: gainsboro;
width: 230px;
height: 20px;
margin-left: 150px;
margin-top: 20px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 10px;
}
.e6 ul{
border: 1px gray solid;
width: 200px;
height: 300px;
list-style: none;
margin-left: 150px;
}
.e6 ul li{
margin-left: -40px;
margin-top: 20px;
}
.e6 li:nth-of-type(2):hover{
color: red;
}
.e6 li:nth-of-type(3){
color: red;
margin-left: 50px;
}
.f1{
border: 1px gray solid;
width: 930px;
height: 300px;
margin-left: 391px;
margin-top: -1542px;
}
.f1-1{
border: 1px gray solid;
width: 930px;
height: 300px;
margin-left: 391px;
}
.f1-2{
border: 1px gray solid;
width: 930px;
height: 300px;
margin-left: 391px;
}
.f1-3{
border: 1px gray solid;
width: 930px;
height: 300px;
margin-left: 391px;
}
.f1-3 .f4{
margin-top: 0px;
width: 920px;
margin-left: 0px;
color: red;
padding-left: 10px;
padding-top: 5px;
}
.f1-1 span{
margin-left: 20px;
margin-right: 10px;
position: relative;
bottom: -10px;
}
.f1-1 span:hover{
color: red;
}
.f2{
border: 2px red solid;
margin-top: -1px;
}
.f3{
margin-top: 10px;
margin-left: 20px;
}
.f4{
border: 1px gray solid;
width: 830px;
height: 30px;
background: gainsboro;
margin-left: 100px;
margin-top: -35px;
}
.f1 ul{
list-style: none;
margin-top:-20px;
}
.f1 li:nth-of-type(2){
font-size: 12px;
margin-top: 20px;
}
.f1 li:nth-of-type(3){
margin-top: 10px;
}
.f1 li:nth-of-type(4){
margin-top: -20px;
margin-left: 80px;
color: gray;
}
.f1 li:nth-of-type(2):hover{
color: red;
}
.f5{
margin-left: 150px;
margin-top: -130px;
}
.f1 ul{
display: inline-block;
}
.f6{
position: relative;
bottom: -80px;
}
.f7{
color: red;
}
.f1 span{
font-size: 20px;
}
.f8{
width: 130px;
height: 30px;
margin-bottom: 20px;
}
.f1-1 li{
display: inline-block;
margin-left: 10px;
margin-right: 30px;
margin-top: 30px;
}
.f1-1 li:hover{
color: red;}
.f1-1 ul{
margin-top: 20px;
}
.f1-2{
height:3800px;
}
.f1-2 img{
margin-left: 80px;
padding-top: 30px;
}
.f1-2 .f4{
color: red;
width: 920px;
margin-left: 0px;
margin-top: -2px;
padding-left: 10px;
padding-top: 5px;
}
.f1-3 ul{
list-style: none;
display: inline-block;
margin: -10px;
margin-top: -20px;
}
.f1-3 ul:nth-of-type(5){
width: 200px;
font-size: 14px;
color: gray;
}
.g1{
border: 1px gray solid;
width: 900px;
height: 100px;
margin-left: 10px;
margin-top: 20px;
}.g2{
margin-left: 400px;
margin-top: -120px;
}
.f1-3 ul:nth-of-type(1){
color: red;
}
.f1-3 span{
font-size: 20px;
}
.g2 li{
list-style: none;
display: inline-block;
color: black;
margin-right: 100px;
}
.g2 {
margin-top: -100px;
}
.g2 img{
vertical-align: middle;
}
.g2 li:nth-of-type(1){
position: relative;
bottom: -15px;
}
.g2 li:nth-of-type(4){
margin-left: 190px;
margin-right: 120px;
}
.g2 span{
color: gray;
font-size: 12px;
}
.g3 li{
border: 1px gray;
display: inline-block;
margin-right: 100px;
}
.g3{
border: 1px gray solid;
width: 880px;
height: 80px;
margin-left: 390px;
margin-top: 55px;
padding-top: 60px;
padding-left: 50px;
}
.g3 li:nth-of-type(2){
margin-left: -30px;
}
.g3 li:nth-of-type(4){
margin-left: 190px;
margin-right: 125px;
}
.g3 span{
color: gray;
font-size: 12px;
}
.g4 li{
border: 1px gray;
display: inline-block;
margin-right: 100px;
}
.g4{
border: 1px gray solid;
width: 880px;
height: 80px;
margin-left: 390px;
margin-top: 0px;
padding-top: 60px;
padding-left: 50px;
}
.g4 li:nth-of-type(2){
margin-left: 0px;
}
.g4 li:nth-of-type(4){
margin-left: 190px;
margin-right: 125px;
}
.g4 span{
color: gray;
font-size: 12px;
}
.g5 li{
border: 1px gray;
display: inline-block;
margin-right: 100px;
}
.g5{
border: 1px gray solid;
width: 880px;
height: 80px;
margin-left: 390px;
margin-top: 0px;
padding-top: 60px;
padding-left: 50px;
}
.g5 li:nth-of-type(2){
margin-left: -10px;
}
.g5 li:nth-of-type(4){
margin-left: 190px;
margin-right: 125px;
}
.g5 span{
color: gray;
font-size: 12px;
}
#g{
color: gray;
position: relative;
right: -450px;
top: -60px;
}
.k{
border: 1px gray solid;
width: 930px;
height: 120px;
margin-left: 390px;
margin-top: -21px;
}
.k ul{
margin-left: 200px;
margin-top: -20px;
}
.k ul li{
list-style: none;
display: inline-block;
margin-top: 60px;
}
.k1 ul{
margin-left: 900px;
}
.k2{
border: 1px gray solid;
padding: 5px;
}
.k3{
border: 1px gray solid;
padding: 6px;
}
.k2:hover{
background: gray;
}
.k3:hover{
background: red;
color: white;
}
#k3{
background: red;
color: white;
}
.s ul li{
list-style: none;
display: inline-block;
}
.s img{
margin-left: 220px;
margin-top: 50px;
}
.s1{
margin-left: 220px;
margin-top: 20px;
}
.s1 li{
margin-right: 220px;
}
.s2{
margin-left: 220px;
margin-top: 20px;
color: gray;
}
.s2 li{
margin-right: 150px;
}
.s img:hover{
transform: rotate(360deg) scale(1.2) ;
transition: all 1.5s linear;
}
.s3 ul{
display: inline-block;
margin-left: 150px;
margin-right: -110px;
}
.s4{
position: relative;
bottom: -60px;
}
.s3 a{
color: black;
text-decoration: none;
font-weight: bolder;
font-size: 16px;
}
.s3 :hover{
color: red;
}
.s3 a:hover{
text-decoration: underline;
color: black;
}
.s3 ul li{
list-style: none;
color: gray;
font-size: 13px;
line-height: 30px;
}
.s9 ul{
list-style: none;
color: gray;
margin-left: 950px;
margin-top: -120px;
}
.s10 {
position: relative;
right: -150px;
top: -150px;
line-height: 50px;
}
.s10 span:hover{
color: red;
}
.s10 span{
position: relative;
top:-5px;
right: -10px;
}
.s11 {
position: relative;
right: -150px;
top: -150px;
line-height: 30px;
}
.s11 a{
color: red;
font-size: 22px;
}
.s12{
margin-left: -900px;
width: 1265px;
position: relative;
top: -70px;
}
.s13 ul {
margin-left: 140px;
list-style: none;
margin-top: -50px;
}
.s13 ul li{
display: inline-block;
margin-right: 60px;
border: 1px gray solid;
border-radius:5px ;
width: 140px;
}
</style>
</head>
<body>
<div class="a">
<span>送货至：四川</span>
<ul>
<li>你好!请
<a id="a-ul" href="#">登入</a>
</li>
<li>
<a id="aa1" href="#">免费注册</a>
</li>
<li>|</li>
<li><a>我的订单</a></li>
<li>|</li>
<li><a>收藏夹</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li><a>客户服务</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li><a>网站导航</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li>|</li>
<li>关注我们：</a></li>
<li><img src="img/sh1.png" </li>
<li><img src="img/sh2.png" /></li>
<li>|</li>
<li>手机版</li>
<li><img src="img/s_tel.png" /> </li>
</ul>
</div>
<div class="b1">
<img src="img/logo.png" width="200px" />
</div>
<div class="b2">
<input type="search" placeholder="请输入关键词" class="bb">
<input type="submit" value="搜索" class="bb1">
</div>
<div class="b3">
<img src="img/car.png" /> 购物车
</div>
<div class="b4">
<ul>
<li>咖啡</li>
<li>ihpone 6s</li>
<li>新鲜美食</li>
<li>蛋糕</li>
<li>日用品</li>
<li>连衣裙</li>
</ul>
</div>
</header>
<article>
<div class="c1">
全部商品分类
</div>
<div class="c2">
<ul>
<li><span>首页</span></li>
<li><span>自营超市</span></li>
<li>1号团</li>
<li>1号超市</li>
<li>女装</li>
<li>美妆</li>
<li>1号海团</li>
<li>团购</li>
</ul>
<img class="c3" src="img/phone.png" />
</div>
<div class="d1">
所有团购 > 包饰 > 珠韵首饰<span> 冰韵 天然白色正圆S925银扣珍珠项链</span>
</div>
<div class="d2">
<img src="img/p_big.jpg" width="350px"/>
</div>
<div class="d3">
<p class="d4">珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</p>
<p class="d5">全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。</p>
<p class="d6">本店价格：<span>¥1786</span></p>
<p class="d6">参考价：<a>¥3886</a></p>
<ul class="d6" id="d6">
<li>尺码：</li>
<li class="d7" id="d7">43cm<img class="d8" src="img/ch.png"/></li>
<li class="d7">45cm</li>
<li class="d7">50cm</li>
</ul>
<ul class="d6" id="d6">
<li>颜色选择：</li>
<li class="d7">粉色</li>
<li class="d7" id="d7">白色<img class="d9" src="img/ch.png"/></li>
</ul>
<div id="d8">
<p class="d6" id="d8"><img class="d10" src="img/sh.png" />分享</p>
<div class="e0">
<a href="#"><img src="img/sh_1.gif"/></a>
<a href="#"><img src="img/sh_2.gif"/></a>
<a href="#"><img src="img/sh_3.gif"/></a>
<a href="#"><img src="img/sh_4.gif"/></a>
<a href="#"><img src="img/sh_5.gif"/></a>
</div>
</div>
<p class="d6" id="d9"><img class="d11" src="img/care.png"/>关注商品</p>
<p><input class="d12" type="text" value="1" /> </p>
<p class="d13"><input type="button" value="+"/></p>
<p class="d14"><input id="d14" type="button" value="-"/></p>
<img class="d15" src="img/j_car.png" />
</div>
<div class="e1">
<img src="img/sbrand.jpg" width="170px" />
<p>进入品牌专区</p>
</div>
<div class="e2">
<a href="#"><img class="e3" src="img/r_left.png"/></a>
<a href="#"><img class="e4" src="img/ps1.jpg"width="60px"/></a>
<a href="#"><img class="e4"src="img/ps2.jpg"/></a>
<a href="#"><img class="e4" src="img/ps3.jpg"/></a>
<a href="#"><img class="e4" src="img/ps4.jpg"/></a>
<a href="#"><img class="e3" src="img/r_right.png"/></a>
</div>
<div class="e5">
用户还喜欢
</div>
<div class="e6">
<ul>
<li><img src="img/his_1.jpg"/></li>
<li>科爱KEAL儿童日本书包减负护脊</li>
<li>¥599</li>
</ul>
<ul>
<li><img src="img/his_2.jpg"/></li>
<li>科爱KEAL小学生减负护脊书包超</li>
<li>¥79</li>
</ul>
<ul>
<li><img src="img/his_3.jpg"/></li>
<li>珠韵首饰 天然白色珍珠项链</li>
<li>¥339</li>
</ul><ul>
<li><img src="img/his_4.jpg"/></li>
<li>珠韵首饰 新品18K黄金珍珠耳钉</li>
<li>¥1860</li>
</ul><ul>
<li><img src="img/his_5.jpg"/></li>
<li>珠韵首饰 姝丽大珍珠项链</li>
<li>¥758
</li>
</ul>
</div>
<div class="f1">
<p class="f2"></p>
<p class="f3">推荐搭配</p>
<p class="f4"></p>
<ul>
<li><img src="img/mat_1.jpg"/></li>
<li>粤通国际珠宝 999足金</li>
<li><input type="checkbox" checked=""/></li>
<li>￥76</li>
<li class="f5"><img src="img/jia_b.gif"/></li>
</ul>
<ul>
<li><img src="img/mat_2.jpg"/></li>
<li>珠韵 9.5-10.5mm珍珠项链</li>
<li><input type="checkbox" /></li>
<li>￥1890</li>
<li class="f5"><img src="img/jia_b.gif"/></li>
</ul>
<ul>
<li><img src="img/mat_3.jpg"/></li>
<li>清新耳环</li>
<li><input type="checkbox" checked="" /></li>
<li>￥232</li>
<li class="f5"><img src="img/equl.gif"/></li>
</ul>
<ul class="f6">
<li class="f7">套餐价：<span>￥2000</span></li>
<li><input class="f8" type="text" value="1"/></li>
<li><img src="img/z_buy.gif"/></li>
</ul>
</div>
<div class="f1-1">
<p class="f2"></p>
<p class="f3">商品属性</p>
<p class="f4"><span>商品详情</span> <span>商品评论</span</p>
<ul>
<li>商品名称：天然淡水珍珠</li>
<li>商品编号：1546211</li>
<li>品牌： 珠韵首饰</li>
<li>上架时间：2015-09-06 09:19:09</li>
<li>商品毛重：160.00g</li>
<li>商品产地：法国</li>
<li>珍珠形状：正圆</li>
<li>镶嵌材质：纯银</li>
<li>款式：项链</li>
</ul>
</div>
<div class="f1-2">
<p class="f2"></p>
<p class="f4"><span>商品详情</span></p>
<p><img src="img/de2.jpg"/></p>
<p><img src="img/de3.jpg"/></p>
<p><img src="img/de4.jpg"/></p>
<p><img src="img/de5.jpg"/></p>
<p><img src="img/de6.jpg"/></p>
<p><img src="img/de7.jpg"/></p>
<p><img src="img/de8.jpg"/></p>
</div>
<div class="f1-3">
<p class="f2"></p>
<p class="f4"><span>商品评论</span></p>
<div class="g1">
<ul>
<li><span>80.0%</span></li>
<li>好评度</li>
</ul>
<ul>
<li>好评（80%）</li>
<li>中评（20%）</li>
<li>差评（0%）</li>
</ul>
<ul>
<li><img src="pl.gif"/></li>
<li><img src="pl.gif"/></li>
<li><img src="pl.gif"/></li>
</ul>
<ul>
<li><img src="img/s_line.gif"/></li>
</ul>
<ul>
<li>购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论</li>
</ul>
<ul>
<li><img src="img/s_line.gif"/></li>
</ul>
<ul>
<li>您可对已购买商品进行评价</li>
<li><img src="img/btn_jud.gif"/></li>
</ul>
</div>
</div>
<div class="g22">
<ul class="g2">
<li><img src="img/peo1.jpg" />向死而生</li>
<li>颜色分类：<span>粉色</span> </li>
<li>产品很好，香味很喜欢，必须给赞。 </li>
<li>型号：<span>43cm</span></li>
<li><span>2015-09-24</span></li>
</ul>
</div>
<div>
<ul class="g3" >
<li><img src="img/peo2.jpg" />就是这么想的</li>
<li>颜色分类：<span>粉色</span> </li>
<li>送朋友，她很喜欢，大爱。 </li>
<li>型号：<span>43cm</span></li>
<li><span>2015-09-24</span></li>
</ul>
<ul class="g4" >
<li><img src="img/peo3.jpg" />墨镜墨镜</li>
<li>颜色分类：<span>白色 </span> </li>
<li>大家都说不错 </li>
<li>型号：<span>43cm</span></li>
<li><span>2015-09-24</span></li>
</ul>
<ul class="g5" >
<li><img src="img/peo4.jpg" /> 那*****洋 </li>
<li>颜色分类：<span>白色 </span> </li>
<li>下次还会来买，推荐。 </li>
<li>型号：<span>43cm</span></li>
<li><span>2015-09-24</span></li>
</ul>
</div>
<div id="g">
(匿名用户)
</div>
<div class="k">
<ul>
<li class="k2">上一页</li>
<li class="k3"id="k3" >1</li>
<li class="k3">2</li>
<li class="k3">3</li>
<li class="k4">...</li>
<li class="k3">20</li>
<li class="k2">下一页</li>
</ul>
</div>
<footer>
<div class="s">
<ul>
<li><img src="img/b1.png"/></li>
<li><img src="img/b2.png"/></li>
<li><img src="img/b3.png"/></li>
<li><img src="img/b4.png"/></li>
</ul>
<ul class="s1">
<li>正品保障</li>
<li>满38包邮</li>
<li>天天低价</li>
<li>准时送达</li>
</ul>
<ul class="s2">
<li>正品行货 放心购买</li>
<li>满38包邮 免运费</li>
<li>天天低价 畅选无忧</li>
<li>收货时间由你做主</li>
</ul>
</div>
<div class="s3">
<ul class="s4">
<li><a href="#">新手上路</a></li>
<li>售后流程</li>
<li>购物流程</li>
<li>订购方式</li>
<li>隐私声明</li>
<li>推荐分享说明</li>
</ul>
<ul class="s5">
<li><a href="#">配送与支付</a></li>
<li>货到付款区域</li>
<li>配送支付查询</li>
<li>支付方式说明</li>
</ul>
<ul class="s6">
<li><a href="#">会员中心</a></li>
<li>资金管理</li>
<li>我的收藏</li>
<li>我的订单</li>
</ul>
<ul class="s7">
<li><a href="#">服务保证</a></li>
<li>退换货原则</li>
<li>售后服务保证</li>
<li>产品质量保证</li>
</ul>
<ul class="s8">
<li><a href="#">联系我们</a></li>
<li>网站故障报告</li>
<li>购物咨询</li>
<li>投诉与建议</li>
</ul>
</div>
<div class="s9">
<ul>
<li><img src="img/er.gif"/></li>
<li>扫一扫关注我们！</li>
<li class="s10"><img src="img/b_sh_1.png"/><span>新浪微博</span></li>
<li class="s10"><img src="img/b_sh_2.png"/><span>腾讯微博</span></li>
<li class="s11">服务热线：</li>
<li class="s11"><a>400-123-4567</a></li>
<li class="s12"><hr></li>
<li class="s12">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg Group </li>
</ul>
</div>
<div class="s13">
<ul>
<li><img src="img/b_1.gif" /></li>
<li><img src="img/b_2.gif" /></li>
<li><img src="img/b_3.gif" /></li>
<li><img src="img/b_4.gif" /></li>
<li><img src="img/b_5.gif" /></li>
<li><img src="img/b_6.gif" /></li>
</ul>
</div>
</footer>
</body>
</html>
搜索页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索页面</title>
<style>
* {
margin: 0;
}
.a ul li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.a {
width: 100%;
background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
height: 30px;
font-size: 12px;
line-height: 30px;
color: gray;
}
.a ul {
margin-left: 630px;
margin-top: -28px;
}
.a ul a {
color: gray;
text-decoration: none;
}
#a-ul {
color: gray;
}
#a-ul:hover {
color: red;
}
#aa1{
color: red;
}
.a a:hover{
color: red;
}
.a span {
margin-left: 40px;
}
.b1 {
margin-left: 60px;
margin-top: 40px;
}
.b2 {
margin-top: -50px;
}
.bb {
width: 320px;
height: 35px;
border: 2px red solid;
margin-left: 500px;
display: inline-block;
}
.b3 {
background: #F6F6F6;
width: 100px;
height: 35px;
margin-top: -45px;
margin-left: 1200px;
padding-top: 10px;
padding-left: 10px;
border: 1px gray solid;
}
.b3 img {
margin-right: 10px;
}
.bb1 {
width: 60px;
height: 34px;
background: red;
color: white;
display: inline-block;
border: 2px red solid;
margin-left: -5px;
margin-top: 10px;
line-height: 20px;
}
.b4 ul {
list-style: none;
margin-left: 460px;
}
.b4 ul li {
display: inline-block;
font-size: 12px;
color: gray;
}
.b4 ul li:hover {
color: orangered;
}
.c1 {
background: red;
color: white;
width: 190px;
height: 40px;
font-size: 17px;
line-height: 40px;
text-align: center;
margin-left: 150px;
margin-top: 30px;
}
.c2 ul li {
display: inline-block;
list-style: none;
font-size: 17px;
font-weight: bolder;
padding-right: 30px;
margin-bottom: 10px;
}
.c2 ul {
margin-left: 320px;
margin-top: -34px;
border-bottom: 2px red solid;
width: 970px;
}
.c2 span {
color: red;
}
.c2 li:hover{
color: red;
}
.c3 {
float: right;
margin-top: -35px;
margin-right: 210px;
}
.c4{
font-size: 13px;
margin-top: 20px;
margin-left: 150px;
}
.c4 a{
text-decoration: none;
color: red;
}
.c4 span{
border: 1px red dashed;
padding: 5px;
}
.d ul li{
list-style: none;
display: inline-block;
font-size: 13px;
color: gray;
padding-right: 18px;
}
.d{
margin-left: 150px;
margin-top: 20px;
line-height: 35px;
padding-top: 20px;
}
.d1{
border: 1px gray solid;
width: 1140px;
height: 80px;
border-bottom: 1px gainsboro solid;
}
.d2,.d3,.d4{
border: 1px gray solid;
width: 1140px;
height: 40px;
margin-left: -40px;
border-bottom: 1px gainsboro solid;
}
.d4{
border-bottom: 1px gray solid;
}
.d span{
color: black;
margin-left: -20px;
margin-right: 30px;
}
.d3 span{
margin-right: 10px;
}
.d4 span{
margin-right: 20px;
}
.d li:hover{
color: red;
}
.e{
border: 1px lightgray solid;
width: 200px;
height: 30px;
margin-left: 150px;
padding-left: 10px;
margin-top: 20px;
line-height: 30px;
}
.e img{
vertical-align: middle;
margin-top: -3px;
margin-right: 10px;
}
.e span{
color: red;
margin-right: 70px;
}
.e1 ul{
list-style: none;
border: 1px lightgray solid;
width: 170px;
height: 230px;
margin-left: 150px;
padding-top: 10px;
}
.e1 img {
margin-left: -40px;
}
.e1 a{
color: black;
text-decoration: none;
margin-left: -20px;
}
.e1 a:hover{
color: red;
}
.e2{
color: red;
font-weight: bolder;
}
.e3 li{
display: inline-block;
border: 1px gainsboro solid;
width: 80px;
height: 25px;
padding-top: 5px;
padding-left: 5px;
margin-right: -5px;
}
.e3{
margin-left: 330px;
margin-top: -1242px;
}
.e3 span{
margin-left: 910px;
position: relative;
top: -20px;
}
.e4{
position: relative;
top: -10px;
right: -6px;
}
.e6{
background: red;
color: white;
}
.e7:hover{
background: red;
color: white;
}
.f ul li{
list-style: none;
width: 250px;
height: 300px;
margin-top: 20px;
display: inline-block;
position: relative;
left: -20px;
}
.f2 span{
color: red;
font-weight: bolder;
margin-left: 60px;
}
.f1{
width: 1050px;
height: 1560px;
margin-left: 360px;
}
.f3 a{
text-decoration: none;
color: black;
}
.f3 a:hover{
color: red;
}
.f4 a{
text-decoration: none;
margin-left: 20px;
margin-right: -25px;
position: relative;
bottom: -10px;
}
.f5{
background: url(img/heart.png) no-repeat -2px 3px;
border: 1px gray solid;
padding-left: 25px;
padding-right: 5px;
font-size: 14px;
}
.f5:hover{
background: url(img/heart_h.png) no-repeat -2px 3px;
}
.f6 {
color: orangered;
background: url(img/cars.png) no-repeat -2px 3px;
border: 1px gray solid;
padding-left: 25px;
padding-right: 5px;
font-size: 14px;
}
.f1 li:hover .f6{
color: white;
background: orangered url(img/cars_h.png)no-repeat -2px 3px;
}
.f1 li:hover{
border: 1px gainsboro solid;
width: 250px;height: 280px;
border-radius: 5px;
}
.g1 ul li{
list-style: none;
display: inline-block;
margin-top: 60px;
}
.g1 ul{
margin-left: 900px;
}
.g2{
border: 1px gray solid;
padding: 5px;
}
.g3{
border: 1px gray solid;
padding: 6px;
}
.g2:hover{
background: gray;
}
.g3:hover{
background: red;
color: white;
}
#g3{
background: red;
color: white;
}
.s ul li{
list-style: none;
display: inline-block;
}
.s img{
margin-left: 220px;
margin-top: 50px;
}
.s1{
margin-left: 220px;
margin-top: 20px;
}
.s1 li{
margin-right: 220px;
}
.s2{
margin-left: 220px;
margin-top: 20px;
color: gray;
}
.s2 li{
margin-right: 150px;
}
.s img:hover{
transform: rotate(360deg) scale(1.2) ;
transition: all 1.5s linear;
}
.s3 ul{
display: inline-block;
margin-left: 150px;
margin-right: -110px;
}
.s4{
position: relative;
bottom: -60px;
}
.s3 a{
color: black;
text-decoration: none;
font-weight: bolder;
font-size: 16px;
}
.s3 :hover{
color: red;
}
.s3 a:hover{
text-decoration: underline;
color: black;
}
.s3 ul li{
list-style: none;
color: gray;
font-size: 13px;
line-height: 30px;
}
.s9 ul{
list-style: none;
color: gray;
margin-left: 950px;
margin-top: -120px;
}
.s10 {
position: relative;
right: -150px;
top: -150px;
line-height: 50px;
}
.s10 span:hover{
color: red;
}
.s10 span{
position: relative;
top:-5px;
right: -10px;
}
.s11 {
position: relative;
right: -150px;
top: -150px;
line-height: 30px;
}
.s11 a{
color: red;
font-size: 22px;
}
.s12{
margin-left: -900px;
width: 1265px;
position: relative;
top: -70px;
}
.s13 ul {
margin-left: 140px;
list-style: none;
margin-top: -50px;
}
.s13 ul li{
display: inline-block;
margin-right: 60px;
border: 1px gray solid;
border-radius:5px ;
width: 140px;
}
</style>
</head>
<body>
<div class="a">
<span>送货至：四川</span>
<ul>
<li>你好!请
<a id="a-ul" href="#">登入</a>
</li>
<li>
<a id="aa1" href="#">免费注册</a>
</li>
<li>|</li>
<li><a>我的订单</a></li>
<li>|</li>
<li><a>收藏夹</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li><a>客户服务</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li><a>网站导航</a></li>
<li><img src="img/t_arrow.gif" /></li>
<li>|</li>
<li>关注我们：</a></li>
<li><img src="img/sh1.png" </li>
<li><img src="img/sh2.png" /></li>
<li>|</li>
<li>手机版</li>
<li><img src="img/s_tel.png" /> </li>
</ul>
</div>
<div class="b1">
<img src="img/logo.png" width="200px" />
</div>
<div class="b2">
<input type="search" placeholder="请输入关键词" class="bb">
<input type="submit" value="搜索" class="bb1">
</div>
<div class="b3">
<img src="img/car.png" /> 购物车
</div>
<div class="b4">
<ul>
<li>咖啡</li>
<li>ihpone 6s</li>
<li>新鲜美食</li>
<li>蛋糕</li>
<li>日用品</li>
<li>连衣裙</li>
</ul>
</div>
</header>
<article>
<div class="c1">
全部商品分类
</div>
<div class="c2">
<ul>
<li><span>首页</span></li>
<li><span>自营超市</span></li>
<li>1号团</li>
<li>1号超市</li>
<li>女装</li>
<li>美妆</li>
<li>1号海团</li>
<li>团购</li>
</ul>
<img class="c3" src="img/phone.png" />
</div>
<div class="c4">
<p>全部 > 珠宝饰品 > 珍珠项链 > <span>品牌：<a href="#">珠韵首饰</a></span></p>
</div>
<div class="d">
<ul class="d1">
<li><span>品牌：</span></li>
<li>珠韵首饰/ZHUYUN JEWELLERY</li>
<li>施华洛世奇/Swarovski </li>
<li>海瞳 </li>
<li>周大福/CHOW TAI FOOK</li>
<li>京润珍珠 </li>
<li>佰色传情 /BRI.R</li>
<li>迈姿/Maizi</li>
<li>Ginasy Jewelry</li>
<li>心鑫圆</li>
<li>银斯妮/yin si ni silver</li>
<li>迈姿/Maizi</li>
<li>Ginasy Jewelry</li>
<li>蛟蓓</li>
<li>芭比/Barbie</li>
<li>珍福祥</li>
<li>珍福祥</li>
</ul>
<ul>
<ul class="d2">
<li><span>价格：</span></li>
<li>0-199</li>
<li>200-399</li>
<li>400-599</li>
<li>600-899</li>
<li>900-1299</li>
<li>1300-1399</li>
<li>1400以上</li>
</ul>
<ul class="d3">
<li><span>珍珠颜色：</span></li>
<li>混彩 </li>
<li>黑色系</li>
<li>粉色系</li>
<li>白色系</li>
<li>金色系</li>
<li>紫色系
</li>
</ul>
<ul class="d4">
<li><span>珍珠分类:</span></li>
<li>天然海水珍珠</li>
<li>养殖海水珍珠</li>
<li>养殖淡水珍珠</li>
<li>天然淡水珍珠</li>
</ul>
</div>
<div class="e">
<img src="img/h_t.gif"><span>浏览历史</span> 清空
</div>
<div class="e1">
<ul>
<li><img src="img/his_1.jpg" /></li>
<li><a href="#">Dior/迪奥香水2件套装</a></li>
<li class="e2">￥368.00</li>
</ul>
<ul>
<li><img src="img/his_2.jpg" /></li>
<li><a href="#">Dior/迪奥香水2件套装</a></li>
<li class="e2">￥768.00</li>
</ul>
<ul>
<li><img src="img/his_3.jpg" /></li>
<li><a href="#">Dior/迪奥香水2件套装</a></li>
<li class="e2">￥680.00</li>
</ul>
<ul>
<li><img src="img/his_4.jpg" /></li>
<li><a href="#">Dior/迪奥香水2件套装</a></li>
<li class="e2">￥368.00</li>
</ul>
<ul>
<li><img src="img/his_5.jpg" /></li>
<li><a href="#">Dior/迪奥香水2件套装</a></li>
<li class="e2">￥368.00</li>
</ul>
</div>
<div class="e3">
<ul>
<li class="e6">默认</li>
<li class="e7">销量<img class="e4" src="img/i_up.gif"/><img class="e5" src="img/i_down.gif"/></li>
<li class="e7">价格<img class="e4" src="img/i_up.gif"/><img class="e5" src="img/i_down.gif"/></li>
<li class="e7">新品</li>
</ul>
<span>共发现120件</span>
</div>
<div class="f">
<ul class="f1">
<li>
<div class="img"><a href="#"><img src="img/per_1.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_2.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥598.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_3.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥440.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_4.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥680.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_5.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥1980.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_6.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_7.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥390.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_8.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥2980.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_9.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥670.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_10.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥2198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_11.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥5198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_12.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥212.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_5.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥618.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_6.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥260.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_7.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_8.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥698.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_9.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_10.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥865.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_11.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/per_12.jpg" width="210" height="185"/></a></div>
<div class="f2">
<span>￥2198.00</span>
</div>
<div class="f3"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="f4">
<a href="#" class="f5">收藏</a>
<a href="#" class="f6">加入购物车</a>
</div>
</li>
</div>
<div class="g1">
<ul>
<li class="g2">上一页</li>
<li class="g3"id="g3" >1</li>
<li class="g3">2</li>
<li class="g3">3</li>
<li class="g4">...</li>
<li class="g3">20</li>
<li class="g2">下一页</li>
</ul>
</div>
<footer>
<div class="s">
<ul>
<li><img src="img/b1.png"/></li>
<li><img src="img/b2.png"/></li>
<li><img src="img/b3.png"/></li>
<li><img src="img/b4.png"/></li>
</ul>
<ul class="s1">
<li>正品保障</li>
<li>满38包邮</li>
<li>天天低价</li>
<li>准时送达</li>
</ul>
<ul class="s2">
<li>正品行货 放心购买</li>
<li>满38包邮 免运费</li>
<li>天天低价 畅选无忧</li>
<li>收货时间由你做主</li>
</ul>
</div>
<div class="s3">
<ul class="s4">
<li><a href="#">新手上路</a></li>
<li>售后流程</li>
<li>购物流程</li>
<li>订购方式</li>
<li>隐私声明</li>
<li>推荐分享说明</li>
</ul>
<ul class="s5">
<li><a href="#">配送与支付</a></li>
<li>货到付款区域</li>
<li>配送支付查询</li>
<li>支付方式说明</li>
</ul>
<ul class="s6">
<li><a href="#">会员中心</a></li>
<li>资金管理</li>
<li>我的收藏</li>
<li>我的订单</li>
</ul>
<ul class="s7">
<li><a href="#">服务保证</a></li>
<li>退换货原则</li>
<li>售后服务保证</li>
<li>产品质量保证</li>
</ul>
<ul class="s8">
<li><a href="#">联系我们</a></li>
<li>网站故障报告</li>
<li>购物咨询</li>
<li>投诉与建议</li>
</ul>
</div>
<div class="s9">
<ul>
<li><img src="img/er.gif"/></li>
<li>扫一扫关注我们！</li>
<li class="s10"><img src="img/b_sh_1.png"/><span>新浪微博</span></li>
<li class="s10"><img src="img/b_sh_2.png"/><span>腾讯微博</span></li>
<li class="s11">服务热线：</li>
<li class="s11"><a>400-123-4567</a></li>
<li class="s12"><hr></li>
<li class="s12">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg Group </li>
</ul>
</div>
<div class="s13">
<ul>
<li><img src="img/b_1.gif" /></li>
<li><img src="img/b_2.gif" /></li>
<li><img src="img/b_3.gif" /></li>
<li><img src="img/b_4.gif" /></li>
<li><img src="img/b_5.gif" /></li>
<li><img src="img/b_6.gif" /></li>
</ul>
</div>
</footer>
</body>
</html>
