第十一章：_technical support:dgg group-CSDN博客

本文链接：https://blog.csdn.net/hcl430422hcl/article/details/84586504

首页：

<!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>&nbsp;&nbsp;&nbsp;<span>奇异果</span>&nbsp;&nbsp;&nbsp;<span>西柚</span>&nbsp;&nbsp;&nbsp;</li>
					
						<li><span>海鲜水产</span>&nbsp;&nbsp;&nbsp;<span>品质牛肉</span></li>
						
						<li><span>奶粉</span>&nbsp;&nbsp;&nbsp;<span>鲜活禽蛋</span>&nbsp;&nbsp;&nbsp;<span>进口酒</span></li>
						
						<li><span>进口奶粉</span>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<span>牙刷牙膏</span>&nbsp;&nbsp;&nbsp;</li>
					
						<li><span>面膜</span>&nbsp;&nbsp;&nbsp;<span>补水面膜</span><span>香水</span>&nbsp;&nbsp;&nbsp;</li>
						
						<li><span>面霜</span>&nbsp;&nbsp;&nbsp;<span>洗面奶</span>&nbsp;&nbsp;&nbsp;<span>脱毛膏</span></li>
						
						<li><span>沐浴露</span>&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;<span>儿童玩具</span>&nbsp;&nbsp;&nbsp;</li>
					
						<li><span>重装童鞋</span>&nbsp;&nbsp;&nbsp;<span>辅助食品</span>&nbsp;&nbsp;&nbsp;</li>
						
						<li><span>奶粉</span>&nbsp;&nbsp;&nbsp;<span>鲜活禽蛋</span>&nbsp;&nbsp;&nbsp;<span>维生素</span></li>
						
						<li><span>重装童鞋</span>&nbsp;&nbsp;&nbsp;<span>辅助食品</span>&nbsp;&nbsp;&nbsp;</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&copy; 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 &copy;" 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&copy;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>&nbsp;<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&copy; 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>&nbsp;&nbsp;&nbsp;清空
			
			
			</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&copy; 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>

在这里插入图片描述