品优购项目（仿京东PC端）

pinyougou/css/base.css

@@ -0,0 +1,62 @@
+/*清除元素默认的内外边距  */
+* {
+    margin: 0;
+    padding: 0
+}
+/*让所有斜体 不倾斜*/
+em,
+i {
+    font-style: normal;
+}
+/*去掉列表前面的小点*/
+li {
+    list-style: none;
+}
+/*图片没有边框   去掉图片底侧的空白缝隙*/
+img {
+    border: 0;  /*ie6*/
+    vertical-align: middle;
+}
+/*让button 按钮 变成小手*/
+button {
+    cursor: pointer;
+}
+/*取消链接的下划线*/
+a {
+    color: #666;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #e33333;
+}
+
+button,
+input {
+    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
+    outline: none;
+}
+
+body {
+    background-color: #fff;
+    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
+    color: #666
+}
+
+.hide,
+.none {
+    display: none;
+}
+/*清除浮动*/
+.clearfix:after {
+    visibility: hidden;
+    clear: both;
+    display: block;
+    content: ".";
+    height: 0
+}
+
+.clearfix {
+    *zoom: 1
+}
+

pinyougou/css/common.css

@@ -0,0 +1,244 @@
+/*公共样式*/
+.fl {
+	float: left;
+}
+.fr {
+	float: right;
+}
+@font-face {
+    font-family: 'icomoon';
+    src:  url('../fonts/icomoon.eot?7kkyc2');
+    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
+    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
+    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+.fr .icomoon {
+	font-family: 'icomoon';
+	font-size: 16px;
+	line-height: 26px;
+}
+/*版心*/
+.w {
+	width: 1200px;
+	margin: 0 auto;
+}
+.style-red {
+	color : #c81623;
+}
+.shortcut {
+	height: 31px;
+	line-height: 31px;
+	background-color: #f1f1f1;
+}
+.shortcut li {
+	float: left;
+}
+.spacer {
+	width: 1px;
+	height: 12px;
+	background-color: #666;
+	margin:  9px 12px 0;
+}
+.header {
+	position: relative;
+	height: 105px;
+	/*background-color: pink;*/
+}
+.logo {
+	position: absolute;
+	top: 25px;
+	left : 0;
+	width: 175px;
+	height: 56px;
+}
+.logo a {
+	display: block;
+	width: 175px;
+	height: 56px;
+	background: url(../img/logo.png) no-repeat;
+	text-indent: -999px;
+}
+.search {
+	position: absolute;
+	top: 25px;
+	left: 348px;
+}
+.text {
+	float: left;
+	width: 445px;
+	height: 32px;
+	border: 2px solid #b1191a;
+	padding-left: 10px;
+	color: #ccc;
+}
+.btn {
+	float: left;
+	width: 82px;
+	height: 36px;
+	background-color: #b1191a;
+	border: 0;
+	font-size: 16px;
+	color: #fff
+}
+.hotwords {
+    position: absolute;
+    top: 65px;
+    left: 348px;
+}
+.hotwords a {
+	margin: 0 12px;
+}
+.shopcar {
+	position: absolute;
+	top: 25px;
+	right: 64px;
+	width: 138px;
+	height: 34px;
+	line-height: 34px;
+	border : 1px solid #dfdfdf;
+	background-color: #f7f7f7;
+	text-align: center;
+}
+.car {
+	font-family: 'icomoon';
+	color: #da5555;
+}
+.arrow {
+	font-family: 'icomoon';
+	margin-left: 5px;
+}
+.count {
+	position: absolute;
+	top: -5px;
+	left: 100px;
+	height: 14px;
+	line-height: 14px;
+	padding: 0 3px;
+	background-color: #e60012;
+	color: #fff;
+	border-radius: 7px 7px 7px 0;
+}
+.nav {
+	height: 45px;
+	border-bottom: 2px solid #b1191a;
+}
+.dropdown {
+	width: 209px;
+	height: 45px;
+}
+.dropdown .dt {
+	width: 100%;
+	height: 100%;
+	background-color: #b1191a;
+	font-size: 16px;
+	text-align: center;
+	line-height: 45px;
+	color: #fff;
+}
+.dropdown .dd {
+	height: 465px;
+	background-color: #c81623;
+	margin-top: 2px;
+	color: #fff;
+}
+.menu_item {
+	height: 31px;
+	line-height: 31px;
+	margin-left: 2px;
+	padding: 0 10px;
+}
+.menu_item:hover {
+	background-color: #fff;
+}
+.menu_item a{
+	font-size: 14px;
+	color: #fff;
+}
+.menu_item:hover a {
+    color: #c81623;
+}
+.menu_item i {
+	float: right;
+	font-family: 'icomoon';
+	font-size: 18px;
+	color: #fff;
+}
+.navitems {
+	margin-left: 10px;
+}
+.navitems li {
+    float: left;
+}
+.navitems li a {
+	display: block;
+	height: 45px;
+	line-height: 45px;
+	padding: 0 25px;
+	font-size: 16px;
+}
+.footer {
+	height: 416px;
+	background-color: #f5f5f5;
+}
+.mod_survice {
+	height: 79px;
+	border-bottom: 1px solid #ccc;
+}
+.mod_survice li {
+	float: left;
+	width: 240px;
+	height: 79px;
+	margin-top: 15px;
+}
+.icon {
+	float: left;
+	width: 50px;
+	height: 50px;
+	margin-left: 35px;
+	background: url(../img/icons.png) no-repeat;
+}
+.zheng {
+	background-position: -253px -3px;
+}
+.tit {
+	float: left;
+	margin-left: 5px;
+}
+.tit h5 {
+	margin-top: 5px;
+}
+.kuai {
+	background-position:  -255px -54px;
+}
+.bao {
+	background-position:  -257px -105px;
+}
+.help {
+	height: 187px;
+	border-bottom: 1px solid #ccc;
+}
+.mod_help_list {
+	float: left;
+	width: 150px;
+    padding: 20px 0 0 50px;
+}
+.mod_help_list dt {
+	height: 25px;
+	font-size: 16px;
+}
+.mod_help_list dd {
+	height: 22px;
+}
+.mod_help_app dt,
+.mod_help_app p {
+	padding-left: 15px;
+}
+.mod_help_app img {
+	margin: 7px 0;
+}
+.copy_right {
+	text-align: center;
+}

pinyougou/css/detail.css

@@ -0,0 +1,269 @@
+.crumb_wrap {
+	margin-top: 20px;
+	height: 25px;
+}
+.crumb_wrap a {
+	margin-right: 10px;
+}
+.preview_wrap {
+	width: 400px;
+	height: 590px;
+}
+.preview_img {
+	width: 398px;
+	height: 398px;
+	border: 1px solid #ccc;
+}
+.preview_img img {
+	width: 100%;
+}
+.preview_list {
+	position: relative;
+	height: 60px;
+	margin-top: 60px;
+}
+.list_item {
+	width: 320px;
+	height: 60px;
+	margin: 0 auto;
+}
+.list_item li {
+	float: left;
+	width: 56px;
+	height: 56px;
+	border: 2px solid transparent;
+	margin: 0 2px;
+}
+.list_item li.current {
+	border-color: #c81623;
+}
+.arrow_prev,
+.arrow_next {
+	position: absolute;
+	top: 15px;
+	width: 22px;
+	height: 32px;
+}
+.arrow_next {
+	right: 0;
+}
+.itemInfo_wrap {
+    width: 718px;
+}
+.sku_name {
+	font-size: 16px;
+	font-weight: 700;
+	height: 32px;
+}
+.news {
+	height: 33px;
+	font-weight: 700;
+	color: #e12228;
+}
+.summary dl {
+	overflow: hidden;
+}
+.summary_price,
+.summary_promotion {
+	position: relative;
+	padding: 10px 0;
+	background-color: #fee9eb;
+}
+.summary dt,
+.summary dd {
+	float: left;
+}
+.summary dt {
+	width: 60px;
+	padding-left: 10px;
+	line-height: 36px;
+}
+.summary_price a {
+	color: #c81623;
+}
+.summary dd i {
+	font-size: 24px;
+	color: #e12228;
+	font-weight: 700;
+}
+.remark {
+	position: absolute;
+	right: 10px;
+	top: 20px;
+}
+.summary_promotion {
+	padding-top: 0;
+}
+.summary_promotion dd {
+	width: 450px;
+	line-height: 36px;
+}
+.summary_promotion em {
+	display: inline-block;
+	width: 40px;
+	height: 22px;
+	background-color: #c81623;
+	text-align: center;
+	line-height: 22px;
+	color: #fff;
+}
+.summary_support dd {
+	line-height: 36px;
+}
+.choose_color a {
+	display: inline-block;
+	width: 80px;
+	height: 41px;
+	background-color: #f7f7f7;
+	border: 1px solid #ededed;
+	text-align: center;
+	line-height: 41px;
+}
+.summary a.current {
+	border: 1px solid #c81623;
+}
+.choose_version a,
+.choose_type a {
+	display: inline-block;
+	height: 32px;
+	padding: 0 12px;
+		background-color: #f7f7f7;
+	border: 1px solid #ededed;
+	text-align: center;
+	line-height: 32px;
+}
+.choose_btns {
+	margin-top: 20px;
+
+}
+.choose_amount {
+	position: relative;
+	float: left;
+	width: 50px;
+	height: 46px;
+}
+.addcar {
+	float: left;
+	width: 142px;
+	height: 46px;
+	background-color: #cb1623;
+	font-size: 16px;
+	color: #fff;
+	line-height: 46px;
+	text-align: center;
+	margin-left: 10px;
+	font-weight: 700;
+}
+.choose_amount input {
+	width: 33px;
+	height: 44px;
+	border: 1px solid #ccc;
+	text-align: center;
+}
+.add,
+.raduce {
+	position: absolute;
+	height: 22px;
+	width: 15px;
+	border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    text-align: center;
+    line-height: 22px;
+    font-weight: 700;
+}
+.add {
+	top: 0;
+	right: 0;
+}
+.raduce {
+    bottom: 0;
+    right: 0;
+    cursor: not-allowed;
+}
+.product_detail {
+	margin-bottom: 100px;
+}
+.aside {
+	width: 208px;
+	border: 1px solid #ccc;
+}
+.tab_list {
+	height: 34px;
+}
+.tab_list li {
+	float: left;
+	text-align: center;
+	background-color: #f1f1f1;
+	height: 33px;
+	line-height: 33px;
+	border-bottom: 1px solid #ccc;
+}
+.first_tab {
+	width: 104px;
+}
+.tab_list .current {
+	background-color: #fff;
+	border-bottom: 0;
+	color: red;
+}
+.second_tab {
+	width: 103px;
+	border-left: 1px solid #ccc;
+}
+.tab_con {
+	padding: 0 10px;
+}
+.tab_con li h5 {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: 400;
+}
+.tab_con li {
+	border-bottom: 1px solid #ccc;
+}
+.aside_price {
+	font-weight: 700;
+	margin: 0 10px;
+}
+.as_addcar {
+	display: block;
+	width: 88px;
+	height: 26px;
+	border: 1px solid #ccc;
+	background-color: #f7f7f7;
+	margin: 10px auto;
+	text-align: center;
+	line-height: 26px;
+}
+.detail {
+	width: 978px;
+}
+.detail_tab_list {
+	height: 39px;
+	border: 1px solid #ccc;
+	background-color: #f1f1f1;
+}
+.detail_tab_list li {
+	float: left;
+	height: 39px;
+	line-height: 39px;
+	text-align: center;
+	padding: 0 20px;
+	cursor: pointer;
+}
+.detail_tab_list .current {
+	background-color: #c81623;
+	color: #fff;
+}
+.item_info {
+	padding: 20px 0 0 20px;
+
+}
+.item_info li {
+	line-height: 22px;
+}
+.more {
+	float: right;
+	font-weight: 700;
+}

pinyougou/css/index.css

@@ -0,0 +1,239 @@
+.main {
+	width: 980px;
+	height: 455px;
+	margin-left: 219px;
+	margin-top: 10px;
+}
+.focus {
+	position: relative;
+	width: 720px;
+	height: 455px;
+	background-color: purple;
+}
+.newsflash {
+	width: 250px;
+	height: 455px;
+}
+.arrow-l,
+.arrow-r {
+	position: absolute;
+	top: 50%;
+	margin-top: -20px;
+	width: 24px;
+	height: 40px;
+	line-height: 40px;
+	text-align: center;
+	background: rgb( 0, 0, 0, .3);
+	color: #fff;
+}
+.arrow-r {
+	right: 0;
+}
+.circle {
+	position: absolute;
+	bottom: 10px;
+	left : 50px;
+}
+.circle li {
+	float: left;
+	height: 8px;
+	width: 8px;
+	border: 1px solid #fff;
+	margin: 0 3px;
+	border-radius: 50%;
+	cursor: pointer;
+}
+.current {
+	background-color: #fff;
+}
+.news {
+	height: 163px;
+	border: 1px solid #ccc;
+}
+.news_hd {
+	height: 32px;
+	border-bottom: 1px dotted #ccc;
+	padding-left: 15px;
+	font-size: 14px;
+	line-height: 32px;
+}
+.news_hd a {
+    float: right;
+    padding-right: 15px;
+}
+.news_bd {
+	padding: 10px 0 0 15px;
+}
+.news_bd li {
+	height: 23px;
+}
+.lifesurvice {
+    height: 208px;
+    border: 1px solid #ccc;
+    border-top: none;
+    overflow: hidden;
+}
+.lifesurvice ul {
+	width: 252px;
+}
+.lifesurvice li {
+	position: relative;
+	float: left;
+	width: 62px;
+	height: 70px;
+	border-right: 1px solid #ccc;
+	border-bottom: 1px solid #ccc
+}
+.lifesurvice li a{
+	display: block;
+	overflow: hidden;
+	height: 100%;
+}
+.lifesurvice li p {
+	text-align: center;
+}
+.service_ico {
+	display: block;
+	width: 24px;
+	height: 24px;
+	margin: 10px auto;
+	background: url(../img/icons.png) no-repeat;
+
+}
+.service_ico_huafei {
+	background-position: -17px -16px;
+}
+.service_ico_feiji {
+	background-position: -78px -16px;
+}
+.hot {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 12px;
+	height: 15px;
+	background: url(../img/jian.jpg) no-repeat;
+}
+.bargain {
+	height: 75px;
+	margin-top: 5px;
+}
+.recommand {
+	height: 163px;
+	background-color: pink;
+	margin-top: 10px;
+}
+.recom-hd {
+	width: 200px;
+	height: 163px;
+	text-align: center;
+	background-color: #5c5251;
+}
+.recom-hd img {
+	margin: 30px 0 10px 0;
+}
+.recom-hd h3 {
+	font-size: 18px;
+	color: #fff;
+	font-weight: 400;
+}
+.recom-bd {
+	width: 1000px;
+	height: 163px;
+	background-color: #ebebeb;
+}
+.recom-bd li {
+	float: left;
+	width: 249px;
+	border-right: 1px solid #ccc;
+	height: 145px;
+	margin-top: 10px;
+	background-color: pink;
+}
+.recom-bd .last {
+	border-right: 0;
+}
+.recom-bd img {
+	width: 100%;
+	margin-top: -10px;
+}
+.box-hd {
+	height: 30px;
+	border-bottom: 2px solid #c81623;
+	margin-top: 25px;
+}
+.box-hd h3 {
+	float: left;
+	font-size: 18px;
+	color: #c81623;
+}
+.tab-list {
+	float: right;
+	line-height: 30px;
+}
+.tab-list li {
+	float: left;
+}
+.tab-list li a {
+	margin: 0 15px;
+}
+.box-bd {
+	height: 360px;
+	background-color: pink;
+}
+.w209 {
+	width: 209px;
+	background-color: #f9f9f9;
+
+}
+.w219 {
+	width: 219px;
+	border-right: 1px solid #ccc;
+}
+.w220 {
+	width: 220px;
+	border-right: 1px solid #ccc;
+}
+.w329 {
+	width: 329px;
+}
+.tab-con li {
+	float: left;
+	height: 360px;
+}
+.tab-con-item {
+	border-bottom: 1px solid #ccc;
+}
+.tab-con-list {
+	overflow: hidden;
+	margin-bottom: 15px;
+}
+.tab-con-list li {
+	width: 86px;
+	height: 32px;
+	line-height: 32px;
+	border-bottom: 1px solid #ccc;
+	margin-left: 10px;
+	text-align: center;
+}
+.fixetool {
+	position: fixed;
+	top: 200px;
+	left: 50%;
+	margin-left: -676px;
+    width: 66px;
+    background-color: #fff;
+    cursor: pointer;
+}
+.fixetool li{
+	height: 32px;
+	line-height: 32px;
+	text-align: center;
+	font-size: 12px;
+	border-bottom: 1px solid #ccc;
+
+}
+.fixetool .current {
+	background-color: #c81623;
+	color: #fff;
+}

pinyougou/css/list.css

@@ -0,0 +1,139 @@
+.sk {
+	position: absolute;
+	top: 40px;
+	left: 185px;
+	height: 32px;
+	padding: 5px 0 0 15px;
+	border-left: 1px solid #b1191a;
+}
+.sk_list li {
+	float: left;
+	line-height: 45px;
+    margin: 0 30px;
+}
+.sk_list li a {
+	font-size: 16px;
+	color: #000;
+	font-weight: 700;
+}
+.sk_list li a:hover {
+	color: #c81523
+}
+.sk_con li {
+	float: left;
+	line-height: 45px;
+	margin: 0 20px;
+}
+.sk_con li a {
+	font-size: 14px;
+	font-weight: 700;
+	font-family: 'icomoon';
+}
+.sk-goods {
+	position: relative;
+	float: left;
+	width: 288px;
+	height: 428px;
+	margin-right: 13px;
+	border: 1px solid transparent;
+	margin: 0 12px 15px 0;
+
+}
+.sk-goods:hover {
+	border: 1px solid #e12228;
+}
+.sk-bd {
+	width: 1212px;
+}
+.sk-goods img {
+	margin: 10px 35px;
+}
+.sk-goods-title {
+	font-size: 14px;
+	color: #666;
+	font-weight: 400;
+	margin: 0 10px;
+}
+.sk-goods-price {
+	padding: 10px 10px 0;
+}
+.sk-goods-price em {
+	font-size: 22px;
+	color: #e60012;
+	font-weight: 700;
+}
+.sk-goods-price del {
+	font-weight: 700;
+	font-size: 14px;
+	color: #a4a4a4;
+}
+.sk-goods-progress {
+	padding: 0 10px;
+}
+.bar {
+	display: inline-block;
+	width: 130px;
+	height: 10px;
+    border: 1px solid #e60012;
+    vertical-align: middle;
+    margin: 0 5px;
+    border-radius: 5px;
+}
+.bar-in {
+	height: 10px;
+	width: 87%;
+	background-color: #e60012;
+}
+.sk-goods-progress em {
+	color: #e60012;
+}
+.sk-goods-buy {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 50px;
+	background-color: #e60012;
+	color: #fff;
+	text-align: center;
+	line-height: 50px;
+	font-size: 20px;
+}
+.page {
+	margin: 40px 0;
+	text-align: center;
+}
+.page-num a {
+	display: inline-block;
+	width: 36px;
+	height: 36px;
+	line-height: 36px;
+	border: 1px solid #ccc;
+	background-color: #f7f7f7;
+}
+.page-num .pn-prev,
+.page-num .pn-next {
+	width: 82px;
+}
+.page-num .current,
+.page-num .dotted {
+	border: 1px solid transparent;
+	background-color: transparent;
+}
+.page-skip input {
+	width: 36px;
+	height: 36px;
+	border: 1px solid #ccc;
+    text-align: center;
+    transition: all 0.3s;
+}
+.page-skip input:focus {
+	width: 88px;
+	border: 1px solid skyblue;
+}
+.page-skip button {
+	height: 36px;
+	width: 54px;
+	border: 1px solid #ccc;
+	background-color: #f7f7f7;
+	font-weight: 700;
+}

pinyougou/css/register.css

@@ -0,0 +1,127 @@
+.w {
+	width: 1200px;
+	margin: auto;
+}
+.header {
+	height: 82px;
+	border-bottom: 2px solid #b1191a;
+}
+.logo {
+	padding-top: 15px;
+}
+.registerarea {
+	margin-top: 20px;
+	height: 520px;
+	border: 1px solid #ccc;
+}
+.registerarea  h3{
+    height: 40px;
+    line-height: 40px;
+    padding-left: 10px;
+    font-weight: 400;
+    font-size: 18px;
+    background-color: #ececec;
+    border-bottom: 1px solid #ccc;
+}
+.registerarea h3 em {
+	font-size: 14px;
+	float: right;
+	padding-right: 10px;
+	font-weight: 700;
+}
+.registerarea a {
+	color: #c81623;
+}
+.reg_form {
+	width: 600px;
+	height: 420px;
+	margin: 40px auto 0;
+}
+.reg_form li {
+	margin-bottom: 15px;
+}
+.reg_form label {
+	display: inline-block;
+	width: 100px;
+	height: 36px;
+	line-height: 36px;
+	text-align: right;
+}
+.reg_form .inp {
+	width: 238px;
+	height: 34px;
+	border: 1px solid #ccc;
+}
+.error {
+	color: #df3033;
+	margin-left: 10px;
+}
+.error_icon {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	background: url(../img/error.png) no-repeat;
+	vertical-align: middle;
+	margin-top: -2px;
+}
+.success {
+    color: #40b83f;
+    margin-left: 10px;
+}
+.success_icon {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	background: url(../img/success.png) no-repeat;
+	vertical-align: middle;
+	margin-top: -2px;
+}
+.safe {
+	padding-left: 177px;
+	color: #b2b2b2;
+}
+.safe em {
+	color: #fff;
+	padding: 0 12px;
+}
+.ruo {
+	background-color: #de1111;
+}
+.zhong {
+	background-color: #40b83f;
+}
+.qiang {
+	background-color: #f79100;
+}
+.agree {
+	padding-top: 20px;
+	padding-left: 100px;
+}
+.agree  input {
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.agree a {
+	color: #1ba1e6;
+}
+.over {
+	width: 200px;
+	height: 34px;
+	background-color: #c81623;
+	border: none;
+	color: #fff;
+	font-size: 14px;
+	font-weight: 700;
+	margin: 30px 0 0 130px;
+}
+.footer {
+	height: 120px;
+	text-align: center;
+}
+.links {
+	margin-top: 20px;
+	height: 30px;
+}
+.copyright {
+	height: 20px;
+}

pinyougou/css/京东css初始化代码.css

@@ -0,0 +1,61 @@
+/*清除元素默认的内外边距  */
+* {
+    margin: 0;
+    padding: 0
+}
+/*让所有斜体 不倾斜*/
+em,
+i {
+    font-style: normal;
+}
+/*去掉列表前面的小点*/
+li {
+    list-style: none;
+}
+/*图片没有边框   去掉图片底侧的空白缝隙*/
+img {
+    border: 0;  /*ie6*/
+    vertical-align: middle;
+}
+/*让button 按钮 变成小手*/
+button {
+    cursor: pointer;
+}
+/*取消链接的下划线*/
+a {
+    color: #666;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #e33333;
+}
+
+button,
+input {
+    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
+}
+
+body {
+    background-color: #fff;
+    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
+    color: #666
+}
+
+.hide,
+.none {
+    display: none;
+}
+/*清除浮动*/
+.clearfix:after {
+    visibility: hidden;
+    clear: both;
+    display: block;
+    content: ".";
+    height: 0
+}
+
+.clearfix {
+    *zoom: 1
+}
+

pinyougou/demo.html

@@ -0,0 +1,294 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IcoMoon Demo</title>
+    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="demo-files/demo.css">
+    <link rel="stylesheet" href="style.css"></head>
+<body>
+    <div class="bgc1 clearfix">
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;16)</small></h1>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-connection">
+                
+                </span>
+                <span class="mls"> icon-connection</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="connection, wifi" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-mic">
+                
+                </span>
+                <span class="mls"> icon-mic</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="mic, microphone" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-location">
+                
+                </span>
+                <span class="mls"> icon-location</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e947" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="location, map-marker" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-location2">
+                
+                </span>
+                <span class="mls"> icon-location2</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e948" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe948;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="location2, map-marker2" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-display">
+                
+                </span>
+                <span class="mls"> icon-display</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e956" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe956;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="display, screen" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-mobile">
+                
+                </span>
+                <span class="mls"> icon-mobile</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e958" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe958;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="mobile, cell-phone" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-search">
+                
+                </span>
+                <span class="mls"> icon-search</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e986" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe986;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="search, magnifier" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-zoom-in">
+                
+                </span>
+                <span class="mls"> icon-zoom-in</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e987" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe987;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="zoom-in, magnifier2" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-zoom-out">
+                
+                </span>
+                <span class="mls"> icon-zoom-out</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e988" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe988;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="zoom-out, magnifier3" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-happy">
+                
+                </span>
+                <span class="mls"> icon-happy</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e9df" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe9df;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="happy, emoticon" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-cool">
+                
+                </span>
+                <span class="mls"> icon-cool</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e9eb" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe9eb;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="cool, emoticon13" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-cross">
+                
+                </span>
+                <span class="mls"> icon-cross</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="ea0f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xea0f;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="cross, cancel" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-checkmark">
+                
+                </span>
+                <span class="mls"> icon-checkmark</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="ea10" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xea10;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="checkmark, tick" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-ctrl">
+                
+                </span>
+                <span class="mls"> icon-ctrl</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="ea50" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xea50;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="ctrl, control" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-ctrl2">
+                
+                </span>
+                <span class="mls"> icon-ctrl2</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="ea51" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xea51;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-ctrl3">
+                
+                </span>
+                <span class="mls"> icon-ctrl3</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="ea52" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xea52;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+
+    <!--[if gt IE 8]><!-->
+    <div class="mhl clearfix mbl">
+        <h1>Font Test Drive</h1>
+        <label>
+            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
+            min="8" value="48" />
+            px
+        </label>
+        <input id="testText" type="text" class="phl size1of1 mvl"
+        placeholder="Type some text to test..." value=""/>
+        <div id="testDrive" class="icon-">&nbsp;
+        </div>
+    </div>
+    <!--<![endif]-->
+    <div class="bgc1 clearfix">
+        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+    </div>
+
+    <script src="demo-files/demo.js"></script>
+</body>
+</html>

pinyougou/detail.html

@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+	<meta charset="UTF-8">
+	<title>手机详情页面</title>
+	<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"/>
+	<link rel="stylesheet" href="css/base.css">
+	<link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/detail.css">
+</head>
+<body>
+		<!-- 顶部快捷导航栏start -->
+	<div class="shortcut">
+		<div class="w">
+			<div class="fl">
+				<ul>
+					<li>品优购欢迎您！</a></li>
+					<li>
+						<a href="#">请登录</a>
+						<a href="#" class="style-red">免费注册</a>
+					</li>
+				</ul>
+			</div>
+			<div class="fr">
+				<ul>
+					<li><a href="#">我的订单</a>
+					<li class="spacer"></li>
+					<li><a href="#">我的品优购</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">品优购会员</a></li>
+					<li class="spacer"></li>
+					<li><a href="#">企业采购</a></li>
+					<li class="spacer"></li>
+					<li><a href="#">关注品优购</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">客户服务</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">网站导航</a>
+						<i class="icomoon"></i>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<!-- 顶部快捷导航栏end -->
+    <!-- header start -->
+    <div class="header w">
+     	<div class="logo">
+     		<h1>
+     			<a href="index.html">品优购</a>
+     		</h1>
+     	</div>
+        <div class="sk">
+            <img src="uploads/secKill_03.png" alt="">
+        </div>
+     	<div class="search">
+     		<input type="text" class="text" value="请搜索内容">
+     		<button class="btn">搜索</button>
+     	</div>
+     	<div class="hotwords">
+     	    <a href="#" class="style-red">优惠购首发</a>
+            <a href="#">亿元优惠</a>
+            <a href="#">9.9元团购</a>
+            <a href="#">美满99减30</a>
+            <a href="#">办公用品</a>
+            <a href="#">电脑</a>
+            <a href="#">通信</a>
+     	</div>
+     	<div class="shopcar">
+     		<i class="car"></i>我的购物车
+     		<i class="arrow"></i>
+     		<i class="count">8</i>
+     	</div>
+    </div>
+    <!-- header end -->
+    <!-- nav start -->
+    <div class="nav">
+    	<div class="w">
+    		<div class="dropdown fl">
+    			<div class="dt">全部商品分类</div>
+    			<div class="dd" style="display: none;">
+    				<ul>
+    					<li class="menu_item">
+    						<a href="#">手机</a>、
+                            <a href="#">通讯</a>、
+                            <a href="#">数码</a>
+    						<i></i></li>
+    					<li class="menu_item"><a href="#">电脑办公</a><i></i></li>
+    					<li class="menu_item"><a href="#" >家居、家具、家装、厨具</a><i></i></li>
+    					<li class="menu_item"><a href="#" >男装、女装、童装、内衣</a><i></i></li>
+    					<li class="menu_item"><a href="#" >个护化妆</a><i></i></li>
+    					<li class="menu_item"><a href="#" >鞋靴、箱包</a><i></i></li>
+    					<li class="menu_item"><a href="#" >运动户外</a><i></i></li>
+    					<li class="menu_item"><a href="#">汽车</a><i></i></li>
+    					<li class="menu_item"><a href="#" >母婴</a><i></i></li>
+    					<li class="menu_item"><a href="#" >食品</a><i></i></li>
+    					<li class="menu_item"><a href="#">医药保健</a><i></i></li>
+    					<li class="menu_item"><a href="#">图书</a><i></i></li>
+    					<li class="menu_item"><a href="#">彩票</a><i></i></li>
+    					<li class="menu_item"><a href="#">理财</a><i></i></li>
+    					<li class="menu_item"><a href="#">手机、数码</a><i></i></li>
+
+    				</ul>
+    			</div>
+    		</div>
+    		<div class="navitems fl">
+    			<ul>
+    				<li><a href="#">服装城</a></li>
+    				<li><a href="#">美妆馆</a></li>
+    				<li><a href="#">传智超市</a></li>
+    				<li><a href="#">全球购</a></li>
+    				<li><a href="#">闪购</a></li>
+    				<li><a href="#">团购</a></li>
+    				<li><a href="#">拍卖</a></li>
+    				<li><a href="#">有趣</a></li>
+    			</ul>
+    		</div>
+    	</div>
+    </div>
+    <!-- nav end -->
+
+    <!-- 详情页 start -->
+    <div class="de-container w">
+    	<!-- 面包屑导航 -->
+    	<div class="crumb_wrap">
+    		<a href="#">手机、数码、通讯</a>>
+    		<a href="#">手机</a>>
+    		<a href="#">Apple苹果</a>>
+    		<a href="#">手机、数码、通讯</a>>
+    		<a href="#">iPhone 6s Plus系类</a>>
+    	</div>
+    	<div class="product-intro clearfix">
+    		<div class="preview_wrap fl">
+    			<div class="preview_img">
+    				<img src="uploads/s3.png" alt="">
+    			</div>
+    			<div class="preview_list">
+    				<a href="#" class="arrow_prev">
+    					<img src="img/arrow-prev.png" alt="">
+    				</a>
+    				<a href="#" class="arrow_next">
+    					<img src="img/arrow-next.png" alt="">
+    				</a>
+    				<ul class="list_item">
+    					<li class="current">
+    						<img src="uploads/upload/pre.jpg" alt="">
+    					</li>
+    					<li>
+    						<img src="uploads/upload/pre.jpg" alt="">
+    					</li>
+    					<li>
+    						<img src="uploads/upload/pre.jpg" alt="">
+    					</li>
+    					<li>
+    						<img src="uploads/upload/pre.jpg" alt="">
+    					</li>
+    					<li>
+    						<img src="uploads/upload/pre.jpg" alt="">
+    					</li>
+    				</ul>
+    			</div>
+    		</div>
+    		<div class="itemInfo_wrap fr">
+    		    <div class="sku_name">
+    		    	Apple iPhone 6s （A1700）64G玫瑰金 移动通信电信4G手机
+    		    </div>
+    		    <div class="news">
+    		    	推荐选择下方[移动优惠购]，手机套餐齐搞定，不用换号码，每月还有话费返
+    		    </div>
+    		    <div class="summary">
+    		    	<dl class="summary_price">
+    		    		<dt>价格</dt>
+    		    		<dd>
+    		    			<i>￥5299.00</i> 
+    		    			<a href="#">降价通知</a> 
+    		    			<div class="remark">累计评论612188</div>
+    		    		</dd>
+    		    	</dl>
+    		    	<dl class="summary_promotion">
+    		    		<dt>促销</dt>
+    		    		<dd>
+    		    			<em>加购价</em>
+    		    			满999.00另加20.00元，或满1999.00另加30.00元，或满2999。00另加40.00元，即可在购物车换购热销商品 详情 》
+    		    		</dd>
+    		    	</dl>
+    		    	<dl class="summary_support">
+    		    		<dt>支持</dt>
+    		    		<dd>
+    		    			以旧换新，闲置手机回收 4G套餐超值抢礼品购
+    		    		</dd>
+    		    	</dl>
+    		    	<dl class="choose_color">
+    		    		<dt>选择颜色</dt>
+    		    		<dd>
+    		    			<a href="javasceipt:;">玫瑰金</a>
+    		    			<a href="javasceipt:;">金色</a>
+    		    			<a href="javasceipt:;">白色</a>
+    		    			<a href="javasceipt:;" class="current">银色</a>
+    		    		</dd>
+    		    	</dl>
+    		    	<dl class="choose_version">
+    		    		<dt>选择版本</dt>
+    		    		<dd>
+    		    			<a href="javasceipt:;" class="current">公开版</a>
+    		    			<a href="javasceipt:;">移动4G</a>
+    		    		</dd>
+    		    	</dl>
+       		    	<dl class="choose_type">
+    		    		<dt>购买方式</dt>
+    		    		<dd>
+    		    			<a href="javasceipt:;" class="current">官方标配</a>
+    		    			<a href="javasceipt:;">移动优惠版</a>
+    		    			<a href="javasceipt:;">电信优惠版</a>
+    		    		</dd>
+    		    	</dl>
+    		    	<div class="choose_btns">
+    		    		<div class="choose_amount">
+    		    			<input type="text" value="1">
+    		    			<a href="javasceipt:;" class="add">+</a>
+    		    			<a href="javasceipt:;" class="raduce">-</a>
+    		    		</div>
+    		    		<a href="#" class="addcar">加入购物车</a>
+    		    	</div>
+    		    </div>
+    		</div>
+    	</div>
+    	<!-- 产品细节模块 -->
+    	<div class="product_datail clearfix">
+    		<div class="aside fl">
+    			<div class="tab_list">
+    				<ul>
+    					<li class="first_tab current">相关分类</li>
+    					<li class="second_tab">推荐品牌</li>
+    				</ul>
+    			</div>
+    			<div class="tab_con">
+    				<ul>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    					<li>
+    						<img src="uploads/upload/aside_img.jpg" alt="">
+    						<h5>蓝孩 苹果iPhone6S 抗蓝光防爆啦啦啦啦啦啦啦啦啦</h5>
+    						<div class="aside_price">
+    							￥19
+    						</div>
+    						<a href="#" class="as_addcar">加入购物车</a>
+    					</li>
+    				</ul>
+    			</div>
+    		</div>
+    		<div class="detail fr">
+    			<div class="detail_tab_list">
+    				<ul>
+    					<li>商品介绍</li>
+    					<li class="current">规格与包装</li>
+    					<li>售后保障</li>
+    					<li>商品评价（50000）</li>
+    					<li>手机社区</li>
+    				</ul>
+    			</div>
+    			<div class="detail_tab_con">
+    				<div class="item">
+    					<ul class="item_info">
+    						<li>分辨率： 1920*1080（FHD）</li>
+    						<li>后置摄像头： 1200万像素</li>
+    						<li>前置摄像头： 500万像素</li>
+    						<li>频率： 以官网信息为标准</li>
+    						<li>核数： 其他</li>
+    						<li>品牌： Apple 关注</li>
+    						<li>商品名称： APPLEiPhone 6s Plus</li>
+    						<li>商品编号： 1861098</li>
+    						<li>商品毛重： 0.51kg</li>
+    						<li>商品产地： 中国大陆</li>
+    						<li>热点： 指纹识别，Apple Pay，金属机身，拍照神器</li>
+    					</ul>
+    					<p>
+    						<a href="#" class="more">查看更多参数</a>
+    					</p>
+    					<img src="uploads/upload/detail_img1.jpg" alt="">
+    					<img src="uploads/upload/detail_img2.jpg" alt="">
+    					<img src="uploads/upload/detail_img3.jpg" alt="">
+    				</div>
+    			</div>
+    		</div>
+    	</div>
+    	<!-- 产品细节模块 -->
+    </div>
+     <!-- 详情页 end -->
+    <!-- footer start -->
+    <div class="footer">
+    	<div class="w">
+    		<div class="mod_survice">
+    			<ul>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon kuai"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon bao"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    			</ul>
+    		</div>
+    		<div class="help">
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list mod_help_app">
+    				<dt>帮助中心</dt>
+    				<dd>
+    					<img src="img/wx_cz.jpg" alt="">
+    					<p>品优购客户端</p>
+    				</dd>
+    			</dl>
+    		</div>
+            <div class="copy_right">
+                <p class="mod_copyright_links">assdfsgfgfdhgzga</p>
+                <p class="mod_copyright_info">assdddfgghhjjjkkkk</p>
+            </div>
+    	</div>
+    </div>
+    <!-- footer end -->	
+</body>
+</html>

pinyougou/index.html

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+	<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"/>
+	<link rel="stylesheet" href="css/base.css">
+	<link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/index.css">
+</head>
+<body>
+	<!-- 顶部快捷导航栏start -->
+	<div class="shortcut">
+		<div class="w">
+			<div class="fl">
+				<ul>
+					<li>品优购欢迎您！</a></li>
+					<li>
+						<a href="#">请登录</a>
+						<a href="#" class="style-red">免费注册</a>
+					</li>
+				</ul>
+			</div>
+			<div class="fr">
+				<ul>
+					<li><a href="#">我的订单</a>
+					<li class="spacer"></li>
+					<li><a href="#">我的品优购</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">品优购会员</a></li>
+					<li class="spacer"></li>
+					<li><a href="#">企业采购</a></li>
+					<li class="spacer"></li>
+					<li><a href="#">关注品优购</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">客户服务</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">网站导航</a>
+						<i class="icomoon"></i>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<!-- 顶部快捷导航栏end -->
+    <!-- header start -->
+    <div class="header w">
+     	<div class="logo">
+     		<h1>
+     			<a href="index.html">品优购</a>
+     		</h1>
+     	</div>
+     	<div class="search">
+     		<input type="text" class="text" value="请搜索内容">
+     		<button class="btn">搜索</button>
+     	</div>
+     	<div class="hotwords">
+     	    <a href="#" class="style-red">优惠购首发</a>
+            <a href="#">亿元优惠</a>
+            <a href="#">9.9元团购</a>
+            <a href="#">美满99减30</a>
+            <a href="#">办公用品</a>
+            <a href="#">电脑</a>
+            <a href="#">通信</a>
+     	</div>
+     	<div class="shopcar">
+     		<i class="car"></i>我的购物车
+     		<i class="arrow"></i>
+     		<i class="count">8</i>
+     	</div>
+    </div>
+    <!-- header end -->
+    <!-- nav start -->
+    <div class="nav">
+    	<div class="w">
+    		<div class="dropdown fl">
+    			<div class="dt">全部商品分类</div>
+    			<div class="dd">
+    				<ul>
+    					<li class="menu_item">
+                            <a href="list.html">手机</a>、
+                            <a href="#">通讯</a>、
+                            <a href="#">数码</a>
+                            <i></i></li>
+    					<li class="menu_item"><a href="#">电脑办公</a><i></i></li>
+    					<li class="menu_item"><a href="#" >家居、家具、家装、厨具</a><i></i></li>
+    					<li class="menu_item"><a href="#" >男装、女装、童装、内衣</a><i></i></li>
+    					<li class="menu_item"><a href="#" >个护化妆</a><i></i></li>
+    					<li class="menu_item"><a href="#" >鞋靴、箱包</a><i></i></li>
+    					<li class="menu_item"><a href="#" >运动户外</a><i></i></li>
+    					<li class="menu_item"><a href="#">汽车</a><i></i></li>
+    					<li class="menu_item"><a href="#" >母婴</a><i></i></li>
+    					<li class="menu_item"><a href="#" >食品</a><i></i></li>
+    					<li class="menu_item"><a href="#">医药保健</a><i></i></li>
+    					<li class="menu_item"><a href="#">图书</a><i></i></li>
+    					<li class="menu_item"><a href="#">彩票</a><i></i></li>
+    					<li class="menu_item"><a href="#">理财</a><i></i></li>
+    					<li class="menu_item"><a href="#">手机、数码</a><i></i></li>
+
+    				</ul>
+    			</div>
+    		</div>
+    		<div class="navitems fl">
+    			<ul>
+    				<li><a href="#">服装城</a></li>
+    				<li><a href="#">美妆馆</a></li>
+    				<li><a href="#">传智超市</a></li>
+    				<li><a href="#">全球购</a></li>
+    				<li><a href="#">闪购</a></li>
+    				<li><a href="#">团购</a></li>
+    				<li><a href="#">拍卖</a></li>
+    				<li><a href="#">有趣</a></li>
+    			</ul>
+    		</div>
+    	</div>
+    </div>
+    <!-- nav end -->
+
+    <div class="w">
+        <div class="main">
+            <div class="focus fl">
+                <a href="#" class="arrow-l"><</a>
+                <a href="#" class="arrow-r">></a>
+                <ul>
+                    <li><img src="uploads/focus.jpg" alt=""></li>
+                </ul>
+                <ol class="circle">
+                    <li></li>
+                    <li class="current"></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                </ol>
+            </div>
+            <div class="newsflash fr">
+                <div class="news">
+                   <div class="news_hd">
+                       品优购快报
+                       <a href="#">更多 ></a>
+                   </div> 
+                   <div class="news_bd">
+                      <ul>
+                           <li><a href="#">【特惠】 爆款耳机5折秒！</a></li>
+                           <li><a href="#">【特惠】 爆款耳机5折秒！</a></li>
+                           <li><a href="#">【特惠】 爆款耳机5折秒！</a></li>
+                           <li><a href="#">【特惠】 爆款耳机5折秒！</a></li>
+                           <li><a href="#">【特惠】 爆款耳机5折秒！</a></li>
+                       </ul> 
+                   </div>
+                </div>
+                <div class="lifesurvice">
+                   <ul>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_huafei"></i>
+                                <p>话费</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                            <div class="hot"></div>
+                        </li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                        <li><a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a></li>
+                    </ul> 
+                </div>
+                <div class="bargain">
+                    <img src="uploads/bargain.jpg" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 推荐服务模块 start -->
+    <div class="recommand w">
+        <div class="recom-hd fl">
+            <img src="img/clock.png" alt="">
+            <h3>今日推荐</h3>
+        </div>
+        <div class="recom-bd fl">
+            <ul>
+                <li>
+                    <a href="#">
+                        <img src="uploads/today01.png" alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <img src="uploads/today02.png" alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <img src="uploads/today03.png" alt="">
+                    </a>
+                </li>
+                <li class="last">
+                    <a href="#">
+                        <img src="uploads/today04.png" alt="">
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 推荐服务模块 end -->
+    <!-- 楼层区 start -->
+    <div class="floor">
+        <div class="shouji w">
+            <div class="box-hd">
+                <h3>手机通讯</h3>
+                <div class="tab-list">
+                    <ul>
+                        <li><a href="#"  class="style-red">热门</a>|</li>
+                        <li><a href="#">大家电</a>|</li>
+                        <li><a href="#">生活电器</a>|</li>
+                        <li><a href="#">厨房电器</a>|</li>
+                        <li><a href="#">个护健康</a>|</li>
+                        <li><a href="#">应季电器</a>|</li>
+                        <li><a href="#">空气、净水</a>|</li>
+                        <li><a href="#">新奇特</a>|</li>
+                        <li><a href="#">高端电器</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box-bd">
+                <ul class="tab-con">
+                    <li class="w209">
+                        <ul class="tab-con-list">
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                        </ul>
+                        <a href="#"><img src="uploads/floor-1-1.png" alt=""></a>
+                    </li>
+                    <li class="w329">
+                        <img src="uploads/floor-1-b01.png" alt="">
+                    </li>
+                    <li class="w219">
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-2.png" alt=""></a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-3.png" alt=""></a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-4.png" alt=""></a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-5.png" alt=""></a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-6.png" alt=""></a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="jiadian w">
+            <div class="box-hd">
+                <h3>家用电器</h3>
+                <div class="tab-list">
+                    <ul>
+                        <li><a href="#"  class="style-red">热门</a>|</li>
+                        <li><a href="#">大家电</a>|</li>
+                        <li><a href="#">生活电器</a>|</li>
+                        <li><a href="#">厨房电器</a>|</li>
+                        <li><a href="#">个护健康</a>|</li>
+                        <li><a href="#">应季电器</a>|</li>
+                        <li><a href="#">空气、净水</a>|</li>
+                        <li><a href="#">新奇特</a>|</li>
+                        <li><a href="#">高端电器</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box-bd">
+                <ul class="tab-con">
+                    <li class="w209">
+                        <ul class="tab-con-list">
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                        </ul>
+                        <a href="#"><img src="uploads/floor-1-1.png" alt=""></a>
+                    </li>
+                    <li class="w329">
+                        <img src="uploads/floor-1-b01.png" alt="">
+                    </li>
+                    <li class="w219">
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-2.png" alt=""></a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-3.png" alt=""></a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-4.png" alt=""></a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-5.png" alt=""></a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#"><img src="uploads/floor-1-6.png" alt=""></a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!-- 楼层区 end -->
+    <!-- 固定电梯导航 -->
+    <div class="fixetool">
+        <ul>
+            <li class="current">家用电器</li>
+            <li>手机通讯</li>
+            <li>电脑办公</li>
+            <li>家具家居</li>
+            <li>生活用品</li>
+            <li>母婴用品</li>
+        </ul>
+    </div>
+    <!-- 固定电梯导航 -->
+    <!-- footer start -->
+    <div class="footer">
+    	<div class="w">
+    		<div class="mod_survice">
+    			<ul>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon kuai"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon bao"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    			</ul>
+    		</div>
+    		<div class="help">
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list mod_help_app">
+    				<dt>帮助中心</dt>
+    				<dd>
+    					<img src="img/wx_cz.jpg" alt="">
+    					<p>品优购客户端</p>
+    				</dd>
+    			</dl>
+    		</div>
+            <div class="copy_right">
+                <p class="mod_copyright_links">assdfsgfgfdhgzga</p>
+                <p class="mod_copyright_info">assdddfgghhjjjkkkk</p>
+            </div>
+    	</div>
+    </div>
+    <!-- footer end -->
+</body>
+</html>

pinyougou/list.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+	<meta charset="UTF-8">
+	<title>手机页面</title>
+	<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"/>
+	<link rel="stylesheet" href="css/base.css">
+	<link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/list.css">
+</head>
+<body>
+		<!-- 顶部快捷导航栏start -->
+	<div class="shortcut">
+		<div class="w">
+			<div class="fl">
+				<ul>
+					<li>品优购欢迎您！</a></li>
+					<li>
+						<a href="#">请登录</a>
+						<a href="#" class="style-red">免费注册</a>
+					</li>
+				</ul>
+			</div>
+			<div class="fr">
+				<ul>
+					<li><a href="#">我的订单</a>
+					<li class="spacer"></li>
+					<li><a href="#">我的品优购</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">品优购会员</a></li>
+					<li class="spacer"></li>
+					<li><a href="#">企业采购</a></li>
+					<li class="spacer"></li>
+					<li><a href="#">关注品优购</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">客户服务</a>
+						<i class="icomoon"></i>
+					</li>
+					<li class="spacer"></li>
+					<li><a href="#">网站导航</a>
+						<i class="icomoon"></i>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<!-- 顶部快捷导航栏end -->
+    <!-- header start -->
+    <div class="header w">
+     	<div class="logo">
+     		<h1>
+     			<a href="index.html">品优购</a>
+     		</h1>
+     	</div>
+        <div class="sk">
+            <img src="uploads/secKill_03.png" alt="">
+        </div>
+     	<div class="search">
+     		<input type="text" class="text" value="请搜索内容">
+     		<button class="btn">搜索</button>
+     	</div>
+     	<div class="hotwords">
+     	    <a href="#" class="style-red">优惠购首发</a>
+            <a href="#">亿元优惠</a>
+            <a href="#">9.9元团购</a>
+            <a href="#">美满99减30</a>
+            <a href="#">办公用品</a>
+            <a href="#">电脑</a>
+            <a href="#">通信</a>
+     	</div>
+     	<div class="shopcar">
+     		<i class="car"></i>我的购物车
+     		<i class="arrow"></i>
+     		<i class="count">8</i>
+     	</div>
+    </div>
+    <!-- header end -->
+    <!-- nav start -->
+    <div class="nav">
+    	<div class="w">
+    		<div class="sk_list fl">
+                <ul>
+                    <li><a href="#">品优秒杀</a></li>
+                    <li><a href="#">即将售罄</a></li>
+                    <li><a href="#">超值低价</a></li>
+            </ul>      
+            </div>
+            <div class="sk_con fl">
+                <ul>
+                    <li><a href="#">女装</a></li>
+                    <li><a href="#" class="style-red">女鞋</a></li>
+                    <li><a href="#">男装</a></li>
+                    <li><a href="#">男鞋</a></li>
+                    <li><a href="#">母婴童装</a></li>
+                    <li><a href="#">食品</a></li>
+                    <li><a href="#">智能数码</a></li>
+                    <li><a href="#">运动户外</a></li>
+                    <li><a href="#">更多分类</a></li>
+                </ul>
+            </div>
+    	</div>
+    </div>
+    <!-- nav end -->
+    <!-- 列表页的内容 start -->
+    <div class="sk_container w">
+        <div class="sk-hd">
+            <img src="uploads/bg_03.png" alt="">
+        </div>
+        <div class="sk-bd clearfix">
+            <ul>
+                <li class="sk-goods">
+                    <a href="detail.html"><img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5></a>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="detail.html" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+                <li class="sk-goods">
+                    <img src="uploads/mobile.png" alt="">
+                    <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h5>
+                    <p class="sk-goods-price"> <em>￥6088</em> <del>￥6988</del></p>
+                    <div class="sk-goods-progress">
+                        已售<em>87%</em>
+                        <div class="bar">
+                            <div class="bar-in"></div>
+                        </div>
+                        剩余<em>29</em>件
+                    </div>
+                    <a href="#" class="sk-goods-buy">立即抢购</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 列表页的内容 end -->
+     <!-- 分页 start -->
+     <div class="page">
+        <span class="page-num">
+            <a href="#" class="pn-prev"> &lt;&lt;上一页</a>
+            <a href="#">1</a>
+            <a href="#" class="current">2</a>
+            <a href="#">3</a>
+            <a href="#">4</a>
+            <a href="#">5</a>
+            <a href="#" class="dotted">...</a>
+            <a href="#" class="pn-next">下一页 &gt;&gt;</a>
+        </span>
+        <sapn class="page-skip">
+            共10页  到第<input type="text">页
+            <button>确定</button>
+        </sapn>
+     </div>
+     <!-- 分页 end -->
+    <!-- footer start -->
+    <div class="footer">
+    	<div class="w">
+    		<div class="mod_survice">
+    			<ul>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon kuai"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon bao"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    				<li>
+    					<i class="icon zheng"></i>
+    					<div class="tit">
+    						<h5>正品保障</h5>
+    						<p>正品保障，提供发票</p>
+    					</div>
+    				</li>
+    			</ul>
+    		</div>
+    		<div class="help">
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list">
+    				<dt>购物指南</dt>
+    				<dd><a href="#">购物流程</a></dd>
+    				<dd><a href="#">会员介绍</a></dd>
+    				<dd><a href="#">生活旅行</a></dd>
+    				<dd><a href="#">常见问题</a></dd>
+    				<dd><a href="#">大家电</a></dd>
+    				<dd><a href="#">联系客服</a></dd>
+    			</dl>
+    			<dl class="mod_help_list mod_help_app">
+    				<dt>帮助中心</dt>
+    				<dd>
+    					<img src="img/wx_cz.jpg" alt="">
+    					<p>品优购客户端</p>
+    				</dd>
+    			</dl>
+    		</div>
+            <div class="copy_right">
+                <p class="mod_copyright_links">assdfsgfgfdhgzga</p>
+                <p class="mod_copyright_info">assdddfgghhjjjkkkk</p>
+            </div>
+    	</div>
+    </div>
+    <!-- footer end -->
+</body>
+</html>

pinyougou/register.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>注册页面</title>
+	<link rel="stylesheet" href="css/base.css">
+	<link rel="stylesheet" href="css/register.css">
+</head>
+<body>
+	<div class="w">
+		<div class="header">
+			<div class="loge">
+				<a href="index.html">
+					<img src="img/logo.png" alt="">
+				</a>
+			</div>
+		</div>
+		<div class="registerarea">
+			<h3>
+				注册新用户
+				<em>我有账号，去<a href="#">登录</a></em>
+			</h3>
+			<div class="reg_form">
+				<form action="demo.php">
+					<ul>
+					<li>
+						<label for="tel">手机号: </label>
+						<input type="text" class="inp" id="tel">
+						<span class="error">
+							<i class="error_icon"></i>手机号码格式不正确，请重新输入
+						</span>
+					</li>
+					<li>
+						<label for="">短信验证码: </label>
+						<input type="text" class="inp">
+					</li>
+					<li>
+						<label for="">登录密码: </label>
+						<input type="text" class="inp">
+						<span class="success">
+							<i class="success_icon"></i>恭喜你输入正确
+						</span>
+					</li>
+					<li class="safe">
+						安全程度 
+                        <em class="ruo">弱</em>
+                        <em class="zhong">中</em>
+                        <em class="qiang">强</em>
+					</li>
+					<li>
+						<label for="">确认密码: </label>
+						<input type="text" class="inp">
+						<span class="success">
+							<i class="success_icon"></i>恭喜你输入正确
+						</span>
+					</li>
+					<li class="agree">
+						<input type="checkbox" >
+						同意协议并注册
+						<a href="#">《如果果用户协议》</a>
+					</li>
+					<li>
+						<input type="submit" value="完成注册" class="over">
+					</li>
+				</ul>
+				</form>
+			</div>
+		</div>
+		<div class="footer">
+			<p class="links">
+				啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
+			</p>
+			<p class="copyright">
+				啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
+			</p>
+		</div>
+	</div>
+</body>
+</html>