web前端学习第十四~十八天

这五天学习了如何布置一个电商的平台，花了一些时间，前面在磋磨的怎么布局，后面顺手就快了点，但还是花了很多时间。

项目的注意事项：
项目准备好目录文件，样式与结构相分离。
产品的图片，项目的固定的图片，分好文件夹，后期好更换
第一个首页页面都以index命名。

1，网站TDK三大标签SEO优化

项目开始前准备好三大标签SEO。

SEO（Search Engune Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合SEO优化。
title，description，keyword

1,title 网站标题

title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

列如:
京东（JD.COM）-综合网购首选-正品低价，品质保障，配色及时，轻松购物！

2，description 网站说明
简要说明我们网站主要是做什么的

我们提倡，description 作为网站的总体业务和主题概括，多采用 “我们是…” “我们提供…”

列如：

3，keywords关键字
keywords 是页面关键词，是搜索引擎的关注点之一。

keywords最好限制为6-8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式。

列如：

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员准备。

2，网站的首页一般都是使用index命名，比如index.html
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面

3，LOGO SEO 优化

1，logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎。这个地方很重要。

2，h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可

3，为了搜索引擎收留我们，我们链接里面要放文字（网站名称），但文字不要显示出来

方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflow：hidden，淘宝的做法。方法2：直接给font-size：0，就看不到文字了，京东的做法

4，最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

4，注册页
注册页面：register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

CSS样式如下：
初始化样式：


/* 把我们内外边距都清零 */
* {margin:0;padding:0;box-sizing: border-box;
}/* em和i 斜体里面的字体不倾斜 */
em,i{font-style:normal}/* 去掉li的小圆点 */
li{list-style:none}img{/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border:0;/* 取消图片底侧有空白缝隙的问题 */vertical-align:middle}/* 当我们鼠标经过button 按钮的时候  鼠标变成小手   */
button{cursor:pointer}a{  /* 指定链接的颜色 */color:#666;/* 取消链接的下划线 */text-decoration:none}/* 鼠标经过链接时候的颜色    */
a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;border: 0;outline: none;}body{/* css3 抗锯齿形  让文字显示的更加清晰 */-webkit-font-smoothing:antialiased;background-color:#fff;/* \5B8B\4F53 就是宋体的意思，这样浏览器兼容性比较好 */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}

公共区域样式：如头部，底部，导航栏等

/* 声明字体图标 */
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?x1qd5m');src:  url('../fonts/icomoon.eot?x1qd5m#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?x1qd5m') format('truetype'),url('../fonts/icomoon.woff?x1qd5m') format('woff'),url('../fonts/icomoon.svg?x1qd5m#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}/* 版心 */
.w {width: 1200px;margin: 0 auto;
}.style_red {color: #c81623;
}/* 快捷导航模块 */
.shortcut {height: 31px;line-height: 31px;background-color: #f1f1f1;
}.shortcut ul li {float: left;
}.fl {float: left;}.fr {float: right;}.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}.shortcut .fr ul li.arrow-icon::after {font-family: 'icomoon';margin-left: 6px;content: "\e913";
}/* header头部制作 */
.header {position: relative;height: 105px;}.logo {position: absolute;top: 25px;width: 171px;height: 61px;}.logo h1 a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;/* 淘宝隐藏文字做法 */overflow: hidden;text-indent: -9999px;/* 京东隐藏文字的做法 *//* font-size: 0; */
}.search {position: absolute;top: 25px;left: 347px;width: 539px;height: 36px;border: 2px solid #b1191a;
}.search input {float: left;width: 455px;height: 32px;padding-left: 10px;
}
.search .btn {float: left;width: 80px;height: 32px;background-color: #b1191a;color: #fff;font-size: 16px;
}.hotwrods ul {position: absolute;top: 65px;left: 347px;}.hotwrods ul li {float: left;
}.hotwrods ul li a {font-size: 12px;margin: 0 10px;
}.hotwrods ul li a:hover {color: #b1191a;
}.shopcar {position: absolute;right: 60px;top: 25px;width: 140px;height: 36px;line-height: 36px;background-color: #f7f7f7;border: 1px solid #dfdfdf;text-align: center;
}.shopcar::after {position: absolute;right: 15px;font-family: 'icomoon';content: "\e915";
}.shopcar::before {display: block;content: "";position: absolute;top:11px;left: 13px;width: 18px;height: 13px;background: url(../images/shopcar.png) no-repeat;
}.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;padding: 0 5px;color: #fff;background-color: #e60012;border-radius: 7px 7px 7px  0;
}.nav {height: 47px;line-height: 47px;border-bottom: 2px solid #b1191a;
}.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav .dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd {/* display: none; */width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}.dropdown .dd ul li {position: relative;height: 30px;line-height: 30px;margin-left: 2px;padding-left: 10px;color: #fff;
}.dropdown .dd ul li:hover {background-color: #fff;color: #b1191a;
}.dropdown .dd ul li:hover  a{color: #b1191a;
}.dropdown .dd ul li::after {position: absolute;top: 0;right: 13px;font-family: 'icomoon';content: "\e915";}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.nav .navitems {float: left;
}
.nav .navitems ul li {float: left;}
.nav .navitems ul li a {display: block;height: 45px;line-height: 45px;padding:  0 25px;
}/* 底部制作 */
.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc
}.mod_service ul li {float: left;width: 240px;height: 50px;padding-left: 35px;
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -253px -3px;margin-right: 8px;
}.mod_service ul li .img2 {background: url(../images/icons.png) no-repeat -255px -54px;
}.mod_service ul li .img3 {background: url(../images/icons.png) no-repeat -257px -106px;
}.mod_service ul li .img4 {background: url(../images/icons.png) no-repeat -258px -157px;
}.mod_service ul li .img5 {background: url(../images/icons.png) no-repeat -258px -209px;
}.service_text h4 {font-size: 14px;color: #333;padding: 3px 0;}.mod_help {height: 188px;border-bottom: 1px solid #ccc;
}.mod_help dl {float: left;width: 200px;height: 144px;padding: 20px 50px;
}.mod_help dl dt {font-size: 16px;margin-bottom: 10px;font-weight: 700;
}.mod_help dl:last-child {text-align: center;
}.mod_copyright {text-align: center;
}.mod_copyright ul {margin: 20px 115px 15px;
}
.mod_copyright ul li {float: left;}.mod_copyright ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 3px 12px 0;
}.copyright {line-height: 20px;}

首页样式

.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}
.focus {position: relative;float: left;width: 720px;height: 100%;/* background-color: bisque; */
}.left a::after ,
.right a::after {font-family: "icomoon";position: absolute;top: -250px;width: 30px;height: 50px;background-color: rgba(0,0,0,.3);text-align: center;line-height: 50px;font-size: 16px;color: #fff;}.left a::after {content: "\e914";left: 0;border-radius: 0 25px 25px 0;
}.right a::after{content: "\e915";right: 0;border-radius: 25px 0px 0px 25px;
}.focus_dot ul {position: absolute;bottom: 15px;left: 50%;margin-left: -40px;width: 90px;height: 10px;text-align: center;line-height: 10px;background-color: rgba(0,0,0,.3);border-radius: 5px;
}.focus_dot ul li a{float: left;margin: 0 4px;width: 10px;height: 10px;background-color: rgba(0,0,0,.5);border-radius: 5px;
}.focus_dot ul li a:active {background-color: #fff;
}.newsflash {float: right;width: 250px;height: 100%;
}.news {height: 165px;border: 1px solid #e4e4e4;
}.news_hd {height: 33px;line-height: 33px;padding: 0 15px;border-bottom: 1px dotted #e4e4e4;
}.news_hd h5 {float: left;font-size: 14px;
}.news_hd .mero {float: right;
}
.news_hd .mero::after {font-family: "icomoon";content: "\e915";margin-left: 5px;
}.news_bd {padding-top: 5px;padding-left: 15px;
}.news_bd ul li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.lifeservice {overflow: hidden;height: 209px;border: 1px solid #e4e4e4;border-top: 0;}.lifeservice ul {width: 252px;
}.lifeservice ul li {float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}.lifeservice ul li i {display: inline-block;width: 24px;height: 28px;background: url(../images/icons.png)no-repeat -19px -16px;margin-top: 12px;
}.lifeservice ul li .i_img2 {background: url(../images/icons.png)no-repeat -80px -16px;
}.lifeservice ul li .i_img3 {background: url(../images/icons.png)no-repeat -142px -16px;
}.lifeservice ul li .i_img4 {background: url(../images/icons.png)no-repeat -206px -16px;
}.lifeservice ul li .i_img5 {background: url(../images/icons.png)no-repeat -17px -87px;
}.lifeservice ul li .i_img6 {background: url(../images/icons.png)no-repeat -80px -87px;
}.lifeservice ul li .i_img7 {background: url(../images/icons.png)no-repeat -144px -88px;
}.lifeservice ul li .i_img8 {background: url(../images/icons.png)no-repeat -206px -88px;
}.lifeservice ul li .i_img9 {background: url(../images/icons.png)no-repeat -16px -159px;
}.lifeservice ul li .i_img10 {background: url(../images/icons.png)no-repeat -79px -159px;
}.lifeservice ul li .i_img11 {background: url(../images/icons.png)no-repeat -142px -156px;
}.lifeservice ul li .i_img12 {background: url(../images/icons.png)no-repeat -206px -159px;
}
.bargain {margin-top: 5px;
}/* 推荐模块 */
.recom {position: relative;height: 163px;background-color:#ebebeb;margin-top: 11px;
}
.recom_hd {position: relative;float: left;width: 205px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}
.recom_hd h4 {position: absolute;left: 61px;font-size: 18px;color: #fff;margin-top: 10px;font-weight: 400;
}.recom_bd ul li {float: left;
}.recom_bd ul li:nth-child(-n+3)::after {position: absolute;top: 10px;content: '';height: 143px;width: 1px;background-color: #dddddd;
}/* 猜你喜欢模块 */
.like {overflow: hidden;height: 262px;margin-top: 30px;background-color: #f9f9f9;
}
.like_hd {height: 30px;}.like_hd h4{float: left;font-size: 18px;
}
.like_hd span {float: right;margin-right: 20px;
}
.like_hd span a::after {font-family: "icomoon";content: "\e918";margin-left: 10px;font-size: 18px;vertical-align: middle;
}
.like_bd {height: 232px;border: 1px solid #ccc;
}.like_bd ul {width: 1210px;
}.like_bd ul li {float: left;width: 200px;height: 231px;margin-top: 20px;
}
.like_bd ul li p ,
.like_bd ul li span {margin-left: 30px;}
.img {display: inline-block;width: 150px;height: 140px;margin-left: 20px;text-align: center;line-height: 140px;
}.like_bd ul li a span {font-size: 14px;font-weight: 700;color: #df3033;margin-bottom: 10px;
}.like_bd ul li a span i {font-size: 18px;
}.like_bd ul li:nth-child(2n) {width: 1px;height: 62px;background-color: #ccc;margin-top: 160px;
}/* 有趣区制作 */
.interesting {overflow: hidden;height: 432px;margin-top: 30px;
}
.interesting_hd {height: 30px;font-size: 18px;
}
.interesting_bd {height: 402px;border: 1px solid #ccc;
}
.bd_402 {position: relative;float: left;width: 402px;height: 401px;background-color: #b8bddd;
}
.bd_402 p {margin-top: 25px;margin-left: 46px;font-size: 16px;font-weight: 700;color: #3b468d;
}
/* .h5_img1 {position: absolute;top: 112px;right: 50px;
} */.bd_227 {float: left;width: 227px;height: 401px;border-right: 1px solid #ccc;
}
.bd_227_top {position: relative;height: 246px;padding: 0 18px;
}
.bd_227_hd {height: 40px;border-bottom: 1px dashed #ccc;text-align: center;line-height: 40px;font-size: 14px;
}
.bd_227 .bd_227_font {height: 207px;padding-top: 68px;
}
.bd_227_font h4 {font-size: 16px;margin-bottom: 15px;
}
.bd_227top_img {position: absolute;top: 68px;right: 0;
}
.bd_227 a:hover:not(.notHover) {color: #333;
}
.bd_227_bottom {position: relative;height: 160px;border-top: 1px solid #ccc;padding: 0 18px;
}
.bd_227_font2 h4 {margin: 49px 0 15px 0px;font-size: 16px;
}
.bd_227bot_img {position: absolute;bottom: 8px;right: 0;
}
.bd_406 {float: left;width: 406px;height: 401px;border-right: 1px solid #ccc;
}
.bd_406_top {position: relative;height: 246px;
}
.bd_406_hd {height: 40px;border-bottom: 1px dashed #ccc;text-align: center;line-height: 40px;font-size: 14px;margin: 0 18px;
}.bd_406 .bd_406_font {height: 207px;padding-top: 68px;margin-left: 52px;
}
.bd_406_font h4 {font-size: 16px;margin-bottom: 15px;
}
.bd_406top_img {position: absolute;top: 68px;right: 0;
}
.bd_406 a:hover {color: #333;
}.bd_406_bot {position: relative;overflow: hidden;width: 405px;height: 160px;border-top: 1px solid #ccc;
}
.bd_406_bot ul {width: 410px;
}
.bd_406_bot ul li {position: relative;float: left;height: 160px;width: 203px;border-right: 1px solid #ccc;padding-top: 50px;padding-left: 13px;
}
.bd_406_font1 h4 {font-size: 16px;padding-bottom: 15px;
}
.bd_406img1 {position: absolute;bottom: 0;right: 0;
}.bd_162 { float: left;width: 162px;height: 401px;}
.bd_162img {width: 162px;height: 400px;
}/* 楼层区制作 */
.floor .box_hd {height: 30px;line-height: 30px;border-bottom: 2px solid #c81623;
}.box_hd h4 {float: left;font-size: 18px;font-weight: 400;color: #c81623;
}.box_hd .box_right ul {float: right;
}
.box_hd .box_right ul li {float: left;
}
.box_hd .box_right ul li a {margin: 0 15px;
}.floor .w {margin-top: 30px;
}.tab_contert {height: 360px;background-color: #f9f9f9;
}.tab_list_item>div {float: left;}.col_209 {width: 209px;text-align: center;
}
.col_209 ul li {float: left;width: 86px;height: 33px;line-height: 33px;border-bottom: 1px solid #ededed;margin-right: 11px;
}.col_209 ul {padding-left: 13px;padding-bottom: 25px;
}.col_209 i img {margin-top: 25px;
}.col_329 {width: 329px;
}.col_220 {width: 220px;border-right: 1px solid #ccc;
}.col_219 {width: 219px;
}.bb {display: block;border-bottom: 1px solid #ccc;
}.box-nva {padding-left: 15px;margin-top: 20px;height: 65px;background-color: #f7f7f7;
}.box-nva ul li {float: left;margin-top: 13px;width: 94px;height: 40px;background-color: #f7f7f7;}.box-nva ul li:nth-child(even) {margin: 13px 12px;width: 1px;height: 40px;border-right: 1px dotted #ccc;
}.box-nva ul li a {float: left;margin-top: 10px;width: 94px;height: 40px;background: url(../upload/logojinglingtu.png) no-repeat -2px -8px ;
}
.box-nva ul li .logo2 {background: url(../upload/logojinglingtu.png) no-repeat -122px -9px;
}
.box-nva ul li .logo3 {margin-top: 0;background: url(../upload/logojinglingtu.png) no-repeat -245px -0px;
}
.box-nva ul li .logo4 {background: url(../upload/logojinglingtu.png) no-repeat -361px -9px;
}
.box-nva ul li .logo5 {margin-left: 20px;background: url(../upload/logojinglingtu.png) no-repeat -506px -3px ;
}
.box-nva ul li .logo6 {background: url(../upload/logojinglingtu.png) no-repeat -607px -9px ;
}
.box-nva ul li .logo7 {background: url(../upload/logojinglingtu.png) no-repeat -727px -9px ;
}
.box-nva ul li .logo8 {background: url(../upload/logojinglingtu.png) no-repeat -848px -9px ;
}
.box-nva ul li .logo9 {background: url(../upload/logojinglingtu.png) no-repeat -972px -9px ;
}
.box-nva ul li .logo10 {margin-left: 10px;background: url(../upload/logojinglingtu.png) no-repeat -1097px -9px ;
}.box-nva2 {padding-left: 15px;margin-top: 20px;height: 65px;background-color: #f7f7f7;
}.box-nva2 ul li {position: relative;float: left;margin-top: 13px;width: 94px;height: 40px;background-color: #f7f7f7;}.box-nva2 ul li:nth-child(even) {margin: 13px 12px;width: 1px;height: 40px;border-right: 1px dotted #ccc;
}.box-nva2 ul li a {position: absolute;margin-top: 10px;width: 94px;height: 40px;background: url(../upload/logojinglingtu2.png) no-repeat -1px 0px ;
}
.box-nva2 ul li .shojilogo1 {left: 10px;bottom: 2px;
}
.box-nva2 ul li .shojilogo2 {left: 12px;bottom: 2px;background: url(../upload/logojinglingtu2.png) no-repeat -116px 0px;
}
.box-nva2 ul li .shojilogo3 {bottom: -3px;left: 8px;background: url(../upload/logojinglingtu2.png) no-repeat -236px -4px;
}
.box-nva2 ul li .shojilogo4 {bottom: -3px;left: 8px;background: url(../upload/logojinglingtu2.png) no-repeat -359px 0px;
}.box-nva2 ul li .shojilogo5 {bottom: -3px;background: url(../upload/logojinglingtu2.png) no-repeat -469px 0px;
}.box-nva2 ul li .shojilogo6 {bottom: -3px;background: url(../upload/logojinglingtu2.png) no-repeat -590px 0px;
}.box-nva2 ul li .shojilogo7 {bottom: -3px;background: url(../upload/logojinglingtu2.png) no-repeat -707px 0px;
}.box-nva2 ul li .shojilogo8 {bottom: -3px;background: url(../upload/logojinglingtu2.png) no-repeat -827px 0px;
}
.box-nva2 ul li .shojilogo9 {bottom: -3px;background: url(../upload/logojinglingtu2.png) no-repeat -948px 0px;
}
.box-nva2 ul li .shojilogo10 {bottom: -3px;background: url(../upload/logojinglingtu2.png) no-repeat -1070px 0px;
}

产品列表模块

/* 列表页样式 */
.nav {overflow: hidden;
}
.sk {position: absolute;top: 40px;left: 185px;border-left: 1px solid #c81523;padding: 3px 0 0 14px;
}
.sk_list {float: left;
}.sk_list ul li {float: left;padding: 0 25px;font-size: 16px;line-height: 47px;font-weight: 700;color: #000;
}
.sk_con {float: left;
}
.sk_con ul li {float: left;padding: 0 25px;font-size: 14px;line-height: 49px;
}
.sk_con ul li:last-child::after {font-family: "icomoon";content: "\e913";
}.sk_bd ul {float: left;margin-right: 13px;
}.sk_bd ul:nth-child(4n) {margin-right: 0;
}
.sk_bd ul li {position: relative;width: 290px;height: 460px;border: 1px solid transparent;
}
.sk_bd ul li:hover {border: 1px solid #b1191a;
}
.sk_bd ul li img {width: 100%;text-align: center;
}
.sk_bd ul li p {margin: 0 10px;font-size: 14px;}
.sk_bd ul li .price {margin-left: 10px;font-size: 14px;
}
.sk_bd ul li .price i {font-size: 22px;color: #e60012;
}
.sk_bd ul li .price em {color: #b8b8b8;text-decoration: line-through;
}
.stock p {float: left;
}.stock_in {float: left;margin-top: 5px;width: 132px;height: 12px;border: 1px solid #ed282e;border-radius: 6px;
} .stock_in .stock_in2 {width: 100px;height: 12px;background-color: #ed282e;border-radius: 6px;transition: all 1s;
}.stock_in:hover .stock_in2 {width: 100%;background-color: #b1191a;
}.fonter {position: absolute;bottom: 0;width:100%;height: 50px;line-height: 50px;background-color: #c81523;text-align: center;font-size: 22px;color: #fff;
}.fonter:hover:active {padding-top: 4px;padding-bottom: 3px;background-color: #e60012;
}.box_fixed {position: fixed;overflow: hidden;top: 700px;right: 260px;width: 68px;height: 137px;text-align: center;line-height: 68px;}
.fixed_top::after {position: absolute;top: -13px;left: 41%;font-family: "icomoon";content: "\e916";color: #fff;
}
.fixed_top,
.fixed_list {position: relative;display: block;width: 68px;height: 68px;background-color: #b1191a;cursor: pointer;color: #fff;
}.fixed_top {margin-bottom: 1px;
}.fixed_top:hover {color: #fff;}.fixed_top:active ,
.fixed_list:active {background-color: brown;
}

注册页样式

.w {width: 1200px;margin: 0 auto;
}
header {height: 84px;border-bottom: 2px solid #b31610;
}
.logo {padding-top: 15px;
}
.registerarea {height: 522px;border: 1px solid #dddddd;margin-top: 20px;line-height: 40px;
}
.registerarea h3 {height: 40px;padding:  0 10px;border-bottom: 1px solid #dfdfdf;background-color: #ececec;font-size: 18px;font-weight: 400;
}
.logoi {float: right; font-size: 14px;
}
.logoi a {color: #b31610;
}
.reg_form {width: 600px;margin: 52px auto 0;}
.reg_form ul li {margin-top: 20px;
}
.reg_form ul li label {display: inline-block;width: 85px;text-align: right;
}
.reg_form .inp {width: 261px;height: 36px;padding-left: 10px;border: 1px solid #ccc;
}
.error {color: #b31610;
}
.error_inco ,
.success_inco  {display: inline-block;width: 20px;height: 20px;background: url(../images/crror.png) no-repeat;vertical-align: middle;margin-top: -3px;margin-left: 10px;
}
.success {color: green;
}.success_inco {background: url(../images/success.png) no-repeat;
}.scfa  {margin-left: 190px;
}
.scfa em {padding: 0 11px;color: #fff;
}
.ruo {background-color: #e10800;
}
.zhong {background-color: #39ba36;
}
.qiang {background-color: #f99200;
}
.reg_form input[type="checkbox"] {width: 16px;height: 15px;border: 1px solid #ccc;margin-right: 13px;vertical-align: middle;margin-top: -5px;
}
.reg_form .agree {margin-left: 90px;
}
.reg_form .agree  a {color: #01a0e9;
}
.btn {width: 200px;height: 34px;background-color: #ca111a;cursor: pointer;margin-left: 90px;
}
.btn:active {margin-top: 3px;margin-bottom: 2px;background-color: brown;
}
.mod_copyright {text-align: center;
}.mod_copyright ul {margin: 20px 115px 15px;
}
.mod_copyright ul li {float: left;}.mod_copyright ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 3px 12px 0;
}.copyright {line-height: 20px;
}

详情页样式

.w {width: 1200px;margin: 0 auto;
}
.detalis_header {height: 583px;margin-top: 25px;
}
.detalis_left {float: left;height: 100%;width: 414px;;
}
.detalis_right {float: right;width: 720px;height: 100%;
}
.detalis_left_hd ul li {float: left;
}
.detalis_left_hd ul li:nth-child(2n)::after {font-family: "icomoon";content: "\e915";padding: 0 16px;
}
.detalis_img {float: left;width: 400px;height: 400px;border: 1px solid #ccc;margin-top: 10px;text-align: center;line-height: 400px;
}.detalis_left_bd ul li {float: left;width: 58px;height: 58px;margin-top: 64px;line-height: 58px;text-align: center;
}
.detalis_li_img1 {border: 1px solid #c81623;
}
.detalis_li_img1  img {margin-bottom: 5px;
}
.detalis_left_bd ul .li_left a:first-child::before {font-family: "icomoon";content: "\e914";font-size: 40px;color: #ccc;
}
.detalis_left_bd ul .li_right a:last-child::before {font-family: "icomoon";content: "\e915";font-size: 40px;color: #ccc;
}
.detalis_left_bd .li_right {text-align: right;
}
.detalis_left_bd  .li_left {text-align: left;
}
.detalis_left_btm ul li {float: left;margin-right: 35px;margin-top: 15px;
}
.detalis_left_btm ul li .share::before {font-family: "icomoon";content: "\ea82";color: #c81623;}
.detalis_left_btm ul li .follow::before {font-family: "icomoon";content: "\e91c";color: #c81623;
}
.detalis_left_btm ul li .contrast::before {font-family: "icomoon";content: "\e986";color: #c81623;
}
.detalis_right h4 {font-size: 16px;font-weight: 400;margin: 15px 0;}
.detalis_hd{height: 113px;background-color: #fee9eb;margin-top: 15px;padding-left: 10px;
}
.detalis_price p {float: left;margin-right: 15px;
}
.price {margin-top: 15px;
}
.detalis_price .style_red i {font-size: 24px;
}
.detalis_price span {float: right;margin-top: 15px;
}
.detalis_Promotion>h4 {float: left;font-size: 12px;font-weight: 400;
}
.detalis_Promotion p {float: left;margin-top: 15px;margin-left: 15px;
}
.detalis_Promotion p em {display: inline-block;width: 41px;height: 22px;background-color: #c81623;text-align: center;color: #fff;margin-right: 10px;margin-bottom: 5px;
}
.detalis_hd2 {width: 550px;height: 100px;border-bottom: 1px solid #ccc;
}
.detalis_hd2 p {margin-left: 12px;padding-top: 12px;}.detalis_hd2 p i {color: #999;
}
.detalis_hd2 em::after {font-family: "icomoon";content: "\e913";padding: 0 10px;
}
.detalis_hd2 p span {margin-left: 58px;
}
.detalis_bd {margin-top: 15px;}.detalis_bd_ul {height: 43px;line-height: 43px;
}
.detalis_bd_ul div:first-child {margin: 0 15px
}.detalis_bd_ul div {float: left;}
.detalis_bd_ul div:nth-child(n+2) {background-color: #f7f7f7;border:1px solid #ededed;text-align:center;margin-right: 8px;width: 82px;height: 43px;
}
.detalis_bd_ul div:nth-child(n+2):hover {border:1px solid #c81623;
}.detalis_bd_ul2,
.detalis_bd_ul3,
.detalis_bd_ul4,
.detalis_bd_ul5 {height: 34px;line-height: 34px;margin-top: 7px;
}
.detalis_bd_ul2 div:first-child,
.detalis_bd_ul3 div:first-child,
.detalis_bd_ul4 div:first-child,
.detalis_bd_ul5 div:first-child {margin: 0 15px
}
.detalis_bd_ul2 div,
.detalis_bd_ul3 div,
.detalis_bd_ul4 div,
.detalis_bd_ul5 div  {float: left;
}
.detalis_bd_ul4 div:nth-child(n+2),
.detalis_bd_ul5 div:nth-child(n+2) {height: 34px;width: 76px;background-color: #f7f7f7;border:1px solid #ededed;text-align:center;margin-right: 8px;}
.detalis_bd_ul2 div:nth-child(n+2),
.detalis_bd_ul3 div:nth-child(n+2) {background-color: #f7f7f7;border:1px solid #ededed;text-align:center;margin-right: 8px;width: 63px;height: 34px;
}
.detalis_bd_ul2 div:nth-child(n+2):hover,
.detalis_bd_ul3 div:nth-child(n+2):hover,
.detalis_bd_ul4 div:nth-child(n+2):hover,
.detalis_bd_ul5 div:nth-child(n+2):hover   {border:1px solid #c81623;
}
.line {width: 312px;height: 1px;margin-top: 14px;margin-left: 238px;background-color: #ccc;
}
.button {overflow: hidden;float: left;width: 51px;height: 44px;border: 1px solid #ccc;margin-left: 15px;
}
.button_left {float: left;width: 33px;height: 44px;text-align: center;line-height: 44px;}
.button_right {overflow: hidden;float: right;width: 16px;height: 44px;border-left: 1px solid #ccc;text-align: center;
}
.button_right a {display: inline-block;width: 15px;height: 22px;border-bottom: 1px solid #ccc;line-height: 21px;margin-top: 1px;
}
.submit {float: left;width: 142px;height: 44px;background-color: #c81623;margin-left: 15px;color: #fff;font-size: 18px;
}
.submit:active {margin-top: 1px;background-color: brown;
}/* 详情页主体 */
.detalis_box {margin-top: 30px;
}
.box_left {position: relative;float: left;width: 210px;border: 1px solid #ccc;padding: 0 12px;
}
.box_right {float: right;width: 980px;
}
.box_left h4 {margin-top: 10px;margin-left: 20px;
}
.detalis_box .box_left_p {position: absolute;top: 0;right: 0;width: 105px;height: 35px;background-color: #f1f1f1;text-align: center;line-height: 35px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;
}
.box_left_hd ul {margin-top: 18px;
}
.box_left_hd ul li {border-bottom: 1px dashed #ccc;padding-bottom: 8px;
}
.li_a2 {float: right;width: 85px;
}
.box_left span {display: block;font-size: 14px;margin-top: 20px;
}
.box_left_bd {position: relative;height: 218px;border-top: 1px solid #ccc;margin-top: 10px;text-align: center;}
.box_left_bd_img1 img{margin-top: 10px;text-align: center;}
.box_left_bd_img1 {display: block;height: 120px;
}.box_left_bd p {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 10px 0;
}
.box_left_bd_btm {width: 90px;height: 28px;background-color: #f7f7f7;border: 1px solid #dddddd;margin-top: 8px;
}
.box_left_bd_btm:active {background-color: #ccc;
}
.box_left_bd .i_inoft {position: absolute;bottom: 40px;left: 0px;
}.box_right_hd {height: 300px;border: 1px solid #dddddd;
}
.right_h4 {height: 42px;background-color: #f1f1f1;border-bottom: 1px solid #dddddd;
}
.right_h4 h4 {width: 83px;height: 41px;background-color: #c81623;text-align: center;line-height: 41px;color: #ffff;font-weight: 400;
}
.left_hd {position: relative;float: left;height: 1030px;height: 258px;padding-left: 17px;
}
.right_hd {float: right;padding-top: 45px;padding-left: 15px;width: 170px;height: 258px;border-left: 1px solid #ddd;
}.ul_hd {position: absolute;
}
.ul_hd li {float: left;margin-right: 40px;margin-top: 12px;}
.ul_bd li {float: left;width: 125px;height: 258px;/* background-color: #c81623; */margin-right: 32px;
}
.ul_bd li:last-child {margin-right: 0;
}
.ul_bd li .ul_bd_img1 {border: 1px solid #c81623;display: block;width: 132px;height: 132px; margin-top: 52px;text-align: center;line-height: 132px;
}
.ul_bd li .ul_bd_p {font-size: 14px;margin-top: 5px;margin-left: 35px;color: #c81623;
}
.ul_bd li .ul_bd_img {display: block;width: 132px;height: 132px; margin-top: 52px;text-align: center;line-height: 132px;
}
.ul_bd li p {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;margin-top: 5px;margin-left: 10px;
}.ul_bd span input[type="checkbox"] {font-size: 14px;margin-left: 10px;
}
.right_lisk {position: absolute;top: 50%;margin-top: -25px;right: -36px;width: 19px;height: 49px;line-height: 49px;text-align: center;background-color: #dddddd;
}
.right_lisk::after {font-family: "icomoon";content: "\e915";font-size: 20px;color: #fff;
}
.right_hd>h4 {font-weight: 400;margin: 12px 0;
}
.right_hd>span i {font-size: 20px;}
.right_hd>input[type="submit"] {width: 142px;height: 46px;text-align: center;line-height: 46px;font-size: 18px;background-color: #c81623;color: #fff;margin-top: 40px;
}
.right_hd>input[type="submit"]:active {background-color: brown;
}
.box_right_bd {position: relative;height: 369px;margin-top: 20px;
}
.right_bd_hd {height: 41px;border: 1px solid #ddd;background-color: #f1f1f1;line-height: 41px;
}
.right_bd_hd .ul_hd2 li a{float: left;width: 87px;height: 39px;margin-right: 15px;text-align: center;
}
.right_bd_hd .ul_hd2 li:nth-child(1) {float: left;width: 87px;height: 39px;background-color: #c81623;
}
.right_bd_hd .ul_hd2 .ul_li4 a {width: 120px;
}
.right_bd_hd .ul_hd2 li a:hover {background-color: #c81623;color: #666;
}
.right_bd_hd .ul_bd2  {padding-top: 20px;margin-left: 20px;
}
.right_bd_hd .ul_bd2  {height: 22px;line-height: 22px;
}
.right_bd_hd p {position: absolute;bottom: -10px;right: 5px;
}
.right_bd_hd p a::after {font-family: "icomoon";content: "\e913";
}
.box_right_bd2 .right_bd_img1 img {width: 100%;margin-top: 18px;border-top: 1px solid #ddd;
}
.detalis_like {height: 337px;border: 1px solid #dddddd;margin-top: 20px;
}
.detalis_like_hd h4 {height: 40px;border-bottom: 1px solid #ddd;background-color: #f1f1f1;font-size: 16px;line-height: 40px;font-weight: 400;padding-left: 10px;
}
.detalis_like_bd ul  {margin-left: 70px;
}
.detalis_like_bd ul li {float: left;width: 135px;height: 297px;margin-right: 50px;
}
.like_bd_img {display: inline-block;width: 135px;height: 160px;line-height: 160px;text-align: center;
}
.detalis_like_bd ul li h5 {margin-top: 5px;margin-bottom: 35px;color: #cc0000;
}
.detalis_like_bd ul li span {color: #999;
}
.detalis_like_bd ul li span>i {color: #005aa8;
}

HTML结构

index首页结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>列表页-综合网购首选-正品低价，品质保障，配色及时，轻松购物！</title><!-- 网站说明 --><meta name="description" content="品优购-专业的综合网上购物商城，销售家电，数码通讯，电脑家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品.便捷，诚信的服务，为你提供愉悦的网上购物体验！" /><!-- 关键词 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><!-- fvaicon图标 --><link rel="shortcut icon" href=" favicon.ico" /><!-- 引入我们初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入我们公共样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入我们列表页样式文件 --><link rel="stylesheet" href="css/list.css"></head><body><!-- 快捷导航模块start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录</a>&nbsp;</li><li><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客服服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块end --><!-- header头部模块start --><header class="header w"><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="sk"><img src="images/sk.png" alt=""></div><!-- search搜索框 --><div class="search"><input type="search" name="secrch" id="" placeholder="语言开发"><button class="btn">搜索</button></div><!-- hotwrods热词模块 --><div class="hotwrods"><ul><li><a href="#" class="style_red">品优购首发</a></li><li><a href="#">亿元优惠</a></li><li><a href="#">9.9团购</a></li><li><a href="#">美满99减30</a></li><li><a href="#">办公用品</a></li><li><a href="#">电脑</a></li><li><a href="#">通信</a></li></ul></div><!-- shopcar购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header头部模块end --><!-- nav 导航栏模块start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品优秒杀</a></li><li><a href="#">即将售罄</a></li><li><a href="#">超值低价</a></li></ul></div><div class="sk_con"><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></nav><!-- nav 导航栏模块end--><!-- 页面主体板块 --><div class="w sk_container"><div class="sk_hd"><img src="images/sk_hd.png" alt=""></div><div class="sk_bd clearfix"><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><div class="box_fixed"><a class="fixed_top">TOP</a><a class="fixed_list"><img src="images/fixed_list.png" alt=""></a></div></div></div><!-- footer底部模块start --><footer class="footer"><div class="w"><!-- 页面底部服务模块 --><div class="mod_service"><ul><li><h5 class="img1"></h5><div class="service_text"><h4>正品保证</h4><p>正品保障，提供发票</p></div></li><li><h5 class="img2"></h5><div class="service_text"><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5 class="img3"></h5><div class="service_text"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5 class="img4"></h5><div class="service_text"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5 class="img5"></h5><div class="service_text"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><!-- mod_help页面底部帮助模块 --><div class="mod_help"><dl><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><dt>配送方式</dt><dd><a href="#">上门自提</a></dd><dd><a href="#">211限时达</a></dd><dd><a href="#">配送服务查询</a></dd><dd><a href="#">配送费收取标准</a></dd><dd><a href="#">海外配送</a></dd></dl><dl><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></dl><dl><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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="../shoping/images/erweima.png" alt="">品优购客户端</dd></dl></div><!-- mod_copyright页面底部版权模块 --><div class="mod_copyright"><ul><li><a href="#">关于我们</a></li><li></li><li><a href="#">联系我们</a></li><li></li><li><a href="#">联系客服</a></li><li></li><li><a href="#">商家入驻</a></li><li></li><li><a href="#">营销中心</a></li><li></li><li><a href="#">手机品优购</a></li><li></li><li><a href="#">友情链接</a></li><li></li><li><a href="#">销售联盟 </a></li><li></li><li><a href="#">品优购社区</a></li><li></li><li><a href="#">品优购公益</a></li><li></li><li><a href="#">English Site</a></li><li></li><li><a href="#">Contact U</a></li></ul><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer底部模块end -->
</body></html>

产品列表页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>列表页-综合网购首选-正品低价，品质保障，配色及时，轻松购物！</title><!-- 网站说明 --><meta name="description" content="品优购-专业的综合网上购物商城，销售家电，数码通讯，电脑家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品.便捷，诚信的服务，为你提供愉悦的网上购物体验！" /><!-- 关键词 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><!-- fvaicon图标 --><link rel="shortcut icon" href=" favicon.ico" /><!-- 引入我们初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入我们公共样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入我们列表页样式文件 --><link rel="stylesheet" href="css/list.css"></head><body><!-- 快捷导航模块start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录</a>&nbsp;</li><li><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客服服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块end --><!-- header头部模块start --><header class="header w"><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="sk"><img src="images/sk.png" alt=""></div><!-- search搜索框 --><div class="search"><input type="search" name="secrch" id="" placeholder="语言开发"><button class="btn">搜索</button></div><!-- hotwrods热词模块 --><div class="hotwrods"><ul><li><a href="#" class="style_red">品优购首发</a></li><li><a href="#">亿元优惠</a></li><li><a href="#">9.9团购</a></li><li><a href="#">美满99减30</a></li><li><a href="#">办公用品</a></li><li><a href="#">电脑</a></li><li><a href="#">通信</a></li></ul></div><!-- shopcar购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header头部模块end --><!-- nav 导航栏模块start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品优秒杀</a></li><li><a href="#">即将售罄</a></li><li><a href="#">超值低价</a></li></ul></div><div class="sk_con"><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></nav><!-- nav 导航栏模块end--><!-- 页面主体板块 --><div class="w sk_container"><div class="sk_hd"><img src="images/sk_hd.png" alt=""></div><div class="sk_bd clearfix"><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><ul><li><img src="upload/shoji.png" alt=""><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">￥<i>6088</i></span><em>￥6988</em></div><div class="stock"><p>已售87%</p><div class="stock_in"><div class="stock_in2"></div></div><p>剩余29件</p></div><div class="fonter">立即抢购</div></li></ul><div class="box_fixed"><a class="fixed_top">TOP</a><a class="fixed_list"><img src="images/fixed_list.png" alt=""></a></div></div></div><!-- footer底部模块start --><footer class="footer"><div class="w"><!-- 页面底部服务模块 --><div class="mod_service"><ul><li><h5 class="img1"></h5><div class="service_text"><h4>正品保证</h4><p>正品保障，提供发票</p></div></li><li><h5 class="img2"></h5><div class="service_text"><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5 class="img3"></h5><div class="service_text"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5 class="img4"></h5><div class="service_text"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5 class="img5"></h5><div class="service_text"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><!-- mod_help页面底部帮助模块 --><div class="mod_help"><dl><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><dt>配送方式</dt><dd><a href="#">上门自提</a></dd><dd><a href="#">211限时达</a></dd><dd><a href="#">配送服务查询</a></dd><dd><a href="#">配送费收取标准</a></dd><dd><a href="#">海外配送</a></dd></dl><dl><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></dl><dl><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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="../shoping/images/erweima.png" alt="">品优购客户端</dd></dl></div><!-- mod_copyright页面底部版权模块 --><div class="mod_copyright"><ul><li><a href="#">关于我们</a></li><li></li><li><a href="#">联系我们</a></li><li></li><li><a href="#">联系客服</a></li><li></li><li><a href="#">商家入驻</a></li><li></li><li><a href="#">营销中心</a></li><li></li><li><a href="#">手机品优购</a></li><li></li><li><a href="#">友情链接</a></li><li></li><li><a href="#">销售联盟 </a></li><li></li><li><a href="#">品优购社区</a></li><li></li><li><a href="#">品优购公益</a></li><li></li><li><a href="#">English Site</a></li><li></li><li><a href="#">Contact U</a></li></ul><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer底部模块end -->
</body></html>

注册页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>个人中心</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/register.css"><!-- fvaicon图标 --><link rel="shortcut icon" href=" favicon.ico" />
</head><body><div class="w"><header><div class="logo"><a href="index.html" target="_blank"><img src="images/logo.png" alt=""></a></div></header><div class="registerarea"><h3>注册新用户<div class="logoi">我有账号,去<a href="#">登录</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号：</label><input type="text" placeholder="请输入手机号" class="inp"><span class="error"><iclass="error_inco"></i>手机号码格式不正确，请重新输入</span></li><li><label for="">短信验证码：</label><input type="text" class="inp"><span class="success"><i class="success_inco"></i>手机号码格式不正确，请重新输入</span></li><li><label for="">登录密码：</label><input type="password" placeholder="请输入密码" class="inp ><span class="error"><i class="error_inco"></i>手机号码格式不正确，请重新输入</span></li><li class="scfa">安全程度<em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li><li><label for="">确认密码：</label><input type="password" placeholder="请重新输入密码" class="inp ><span class="error"><i class="error_inco"></i>手机号码格式不正确，请重新输入</span></li><li class="agree"><input type="checkbox" name="" id="" checked="checked">同意协议并注册 <a href="#">《品优购用户协议》</a></li><li> <input type="submit" class="btn" value="完成注册"></li></ul></form></div></div><footer><div class="mod_copyright"><ul><li><a href="#">关于我们</a></li><li></li><li><a href="#">联系我们</a></li><li></li><li><a href="#">联系客服</a></li><li></li><li><a href="#">商家入驻</a></li><li></li><li><a href="#">营销中心</a></li><li></li><li><a href="#">手机品优购</a></li><li></li><li><a href="#">友情链接</a></li><li></li><li><a href="#">销售联盟 </a></li><li></li><li><a href="#">品优购社区</a></li><li></li><li><a href="#">品优购公益</a></li><li></li><li><a href="#">English Site</a></li><li></li><li><a href="#">Contact U</a></li></ul><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></footer></div>
</body></html>

详情页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>详情页-综合网购首选-正品低价，品质保障，配色及时，轻松购物！</title><!-- 网站说明 --><meta name="description" content="品优购-专业的综合网上购物商城，销售家电，数码通讯，电脑家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品.便捷，诚信的服务，为你提供愉悦的网上购物体验！" /><!-- 关键词 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><!-- fvaicon图标 --><link rel="shortcut icon" href=" favicon.ico" /><!-- 引入我们初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入我们公共样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入详情页样式文件 --><link rel="stylesheet" href="css/details.css"></head><body><!-- 快捷导航模块start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录</a>&nbsp;</li><li><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客服服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块end --><!-- header头部模块start --><header class="header w"><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search搜索框 --><div class="search"><input type="search" name="secrch" id="" placeholder="语言开发"><button class="btn">搜索</button></div><!-- hotwrods热词模块 --><div class="hotwrods"><ul><li><a href="#" class="style_red">品优购首发</a></li><li><a href="#">亿元优惠</a></li><li><a href="#">9.9团购</a></li><li><a href="#">美满99减30</a></li><li><a href="#">办公用品</a></li><li><a href="#">电脑</a></li><li><a href="#">通信</a></li></ul></div><!-- shopcar购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header头部模块end --><!-- nav 导航栏模块start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><!-- <div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="list.html">手机</a>&nbsp;/<a href="#">数码</a>&nbsp;/<a href="#">通信</a></li><li><a href="#">电脑</a>&nbsp;/<a href="#">办公</a></li><li><a href="#">家居</a>&nbsp;/<a href="#">家具</a>&nbsp;/<a href="#">家装</a>&nbsp;/<a href="#">厨房</a></li><li><a href="#">男装</a>&nbsp;/<a href="#">女装</a>&nbsp;/<a href="#">童装</a>&nbsp;/<a href="#">内衣</a></li><li><a href="#">个户化妆</a>&nbsp;/<a href="#">清洁用品</a>&nbsp;/<a href="#">宠物</a></li><li><a href="#">鞋靴</a>&nbsp;/<a href="#">箱包</a>&nbsp;/<a href="#">珠宝</a>&nbsp;/<a href="#">奢侈品</a></li><li><a href="#">运动户外</a>&nbsp;/<a href="#">钟表</a></li><li><a href="#">汽车</a>&nbsp;/<a href="#">汽车用品</a></li><li><a href="#">母婴</a>&nbsp;/<a href="#">玩具乐器</a></li><li><a href="#">食品</a>&nbsp;/<a href="#">酒类</a>&nbsp;/<a href="#">生鲜</a>&nbsp;/<a href="#">特产</a></li><li><a href="#">医疗保健</a></li><li><a href="#">图书</a>&nbsp;/<a href="#">音像</a>&nbsp;/<a href="#">电子书</a></li><li><a href="#">彩票</a>&nbsp;/<a href="#">旅行</a>&nbsp;/<a href="#">充值</a>&nbsp;/<a href="#">票务</a></li><li><a href="#">理财</a>&nbsp;/<a href="#">众筹</a>&nbsp;/<a href="#">白条</a>&nbsp;/<a href="#">保险</a></li></ul></div> --></div><div class="navitems"><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></nav><!-- nav 导航栏模块end--><!-- 详情页头部start --><div class="detalis_header w"><div class="detalis_left"><div class="detalis_left_hd"><ul><li><a href="#">手机、数码、通讯</a></li><li></li><li><a href="#">手机</a></li><li></li><li><a href="#">Apple苹果</a></li><li></li><li><a href="#">iphiph 6s plus系列</a></li></ul></div><div class="detalis_left_bd"><i class="detalis_img"><img src="upload/detalis/detalis_img.png" alt=""></i><ul><li class="li_left"><a href="#"></a></li><li class="detalis_li_img1"><img src="upload/detalis/detalis_li_img1.png" alt=""></li><li><img src="upload/detalis/detalis_li_img2.png" alt=""> </li><li><img src="upload/detalis/detalis_li_img3_03.png" alt=""></li><li><img src="upload/detalis/detalis_li_img4_03.png" alt=""></li><li><img src="upload/detalis/detalis_li_img5_03.png" alt=""></li><li class="li_right"><a href="#"></a></li></ul></div><div class="detalis_left_btm"><ul><li>商品编号：0468256644</li><li><a href="#" class="share">分享</a></li><li><a href="#" class="follow">关注 5000</a></li><li><a href="#" class="contrast">对比</a></li></ul></div></div><div class="detalis_right"><h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4><p class="style_red">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p><div class="detalis_hd"><div class="detalis_price clearfix"><p class="price">价 &nbsp;&nbsp;&nbsp; 格</p><p class="style_red price2">￥<i>5299.00</i>&nbsp;降价通知</p><span><a href="#">累计评价 <i>612812</i></a></span></div><div class="detalis_Promotion"><h4>促 &nbsp;&nbsp;&nbsp; 销</h4><p><em>加价购</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换<br>购热销商品 详情 》</p></div></div><div class="detalis_hd2"><p>支 &nbsp;&nbsp;&nbsp; 持 &nbsp; &nbsp;<i>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</i></p><p>配&nbsp;送&nbsp;至&nbsp; &nbsp; <i>北京海淀区中关<em></em>有货 &nbsp; &nbsp;支持 &nbsp; &nbsp;99元免运费 |货到付款|211限时达&nbsp; &nbsp; <em></em><br><span>由自营发货，并提供售后服务。11:00前完成下单，预计今天（08月10日）送达</span></i></p></div><div class="detalis_bd"><div class="detalis_bd_ul"><div>选择颜色</div><div><a href="#">金色</a></div><div><a href="#">银色</a></div><div><a href="#">黑色</a></div><div><a href="#">玫瑰金</a></div></div><div class="detalis_bd_ul2"><div>选择版本</div><div><a href="#">公开版</a></div><div><a href="#">移动4G</a></div></div><div class="detalis_bd_ul3"><div>选择容量</div><div><a href="#">16GB</a></div><div><a href="#">64GB</a></div><div><a href="#">128GB</a></div></div><div class="detalis_bd_ul4"><div>购买方式</div><div><a href="#">官方标配</a></div><div><a href="#">移动优惠购</a></div><div><a href="#">电信优惠购</a></div></div><div class="detalis_bd_ul5"><div>套 &nbsp; &nbsp; &nbsp; 装</div><div><a href="#">保护套装</a></div><div><a href="#">充电套装</a></div></div><div class="line"></div><div class="button"><div class="button_left">1</div><div class="button_right"><a href="#">+</a><a href="#">-</a></div></div><input type="submit" value="加入购物车" class="submit"></div></div></div><!-- 详情页头部end --><!-- 详情页主体start --><div class="detalis_box w clearfix"><div class="box_left"><h4 class="style_red">相关分类</h4><p class="box_left_p">推荐品牌</p><div class="box_left_hd"><ul><li><a href="#">手机</a><a href="#" class="li_a2">手机壳</a></li></ul><ul><li><a href="#">内存卡</a><a href="#" class="li_a2">iphone配件</a></li></ul><ul><li><a href="#">贴膜</a><a href="#" class="li_a2">手机耳机</a></li></ul><ul><li><a href="#">移动电源</a><a href="#" class="li_a2">平板电脑</a></li></ul><ul><li class="ul_li"><a href="#">移动电源</a><a href="#" class="li_a2">蓝牙耳机壳</a></li></ul></div><span>购买了此商品的用户还买了</span><div class="box_left_bd"><i class="box_left_bd_img1"><img src="upload/detalis/box_left_bd_img1_03.png" alt=""></i><p>羽博 10000mah 双USB Y7 移动充电宝</p><i class="i_inoft">￥50</i><input type="submit" value="加入购物车" class="box_left_bd_btm"></div><div class="box_left_bd"><i class="box_left_bd_img1"><img src="upload/detalis/box_left_bd_img2_03.png" alt=""></i><p>苹果iPhone6s 抗蓝光防爆 耐用 但不防摔</p><i class="i_inoft">￥5000</i><input type="submit" value="加入购物车" class="box_left_bd_btm"></div><div class="box_left_bd"><i class="box_left_bd_img1"><img src="upload/detalis/box_left_bd_img3_03.png" alt=""></i><p>苹果iPhone6s 抗蓝光防爆 耐用 但不防摔</p><i class="i_inoft">￥129</i><input type="submit" value="加入购物车" class="box_left_bd_btm"></div><div class="box_left_bd"><i class="box_left_bd_img1"><img src="upload/detalis/box_left_bd_img1_03.png" alt=""></i><p>羽博 10000mah 双USB Y7 移动充电宝</p><i class="i_inoft">￥50</i><input type="submit" value="加入购物车" class="box_left_bd_btm"></div><div class="box_left_bd"><i class="box_left_bd_img1"><img src="upload/detalis/box_left_bd_img2_03.png" alt=""></i><p>苹果iPhone6s 抗蓝光防爆 耐用 但不防摔</p><i class="i_inoft">￥5000</i><input type="submit" value="加入购物车" class="box_left_bd_btm"></div><div class="box_left_bd"><i class="box_left_bd_img1"><img src="upload/detalis/box_left_bd_img3_03.png" alt=""></i><p>苹果iPhone6s 抗蓝光防爆 耐用 但不防摔</p><i class="i_inoft">￥129</i><input type="submit" value="加入购物车" class="box_left_bd_btm"></div><div class="box_left_bd"><i class="box_left_bd_img1"></i><p></p><i class="i_inoft"></i></div><div class="box_left_bd"><i class="box_left_bd_img1"></i><p></p><i class="i_inoft"></i></div><div class="box_left_bd"><i class="box_left_bd_img1"></i><p></p><i class="i_inoft"></i></div><div class="box_left_bd"><i class="box_left_bd_img1"></i><p></p><i class="i_inoft"></i></div></div><div class="box_right"><div class="box_right_hd"><div class="right_h4"><h4>选择搭配</h4></div><div class="left_hd"><ul class="ul_hd"><li>精品 </li><li>iphone配件</li><li>蓝牙耳机</li><li>自拍杆</li><li>数据线</li><li>其他手机配件</li><li>U盘</li></ul><ul class="ul_bd"><li><i class="ul_bd_img1"><img src="upload/detalis/ul_bd_img.png" alt=""></i><p class="ul_bd_p">￥5299</p></li><li><i class="ul_bd_img"><img src="upload/detalis/ul_bd_img2.png" alt=""></i><p>Feless费勒斯VR9</p><span class="style_red"><input type="checkbox">￥888</span></li><li><i class="ul_bd_img"><img src="upload/detalis/ul_bd_img3.png" alt=""></i><p>ROCK洛克VR眼镜虚</p><span class="style_red"><input type="checkbox">￥598</span></li><li><i class="ul_bd_img"><img src="upload/detalis/ul_bd_img4.png" alt=""></i><p>Faseyes爱易思</p><span class="style_red"><input type="checkbox">￥698</span></li><li><i class="ul_bd_img"><img src="upload/detalis/ul_bd_img5.png" alt=""></i><p>Faseyes爱易思懒人</p><span class="style_red"><input type="checkbox">￥176</span></li></ul><div class="right_lisk"></div></div><div class="right_hd"><p>已选够0件搭配</p><h4>套餐价</h4><span class="style_red">￥<i>5299.00</i></span><input type="submit" value="加入购物车"></div></div><div class="box_right_bd"><div class="right_bd_hd"><ul class="ul_hd2 clearfix"><li><a href="#">商品介绍</a></li><li><a href="#">规格与包装</a></li><li><a href="#">售后保障</a></li><li class="ul_li4"><a href="#">商品评价(50000)</a></li><li><a href="#">手机社区</a></li></ul><ul class="ul_bd2 "><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><li>系统：苹果（IOS）</li><li>像素：1000-1600万</li><li>机身内存：64GB</li></ul><p><a href="#">查看更多参数</a></p></div></div><div class="box_right_bd2"><i class="right_bd_img1"><img src="upload/detalis/right_bd_img1.png" alt=""></i><i class="right_bd_img2"><img src="upload/detalis/right_bd_img2.png" alt=""></i></div></div></div><!-- 猜你喜欢start --><div class="detalis_like w"><div class="detalis_like_hd"><h4>猜你喜欢</h4></div><div class="detalis_like_bd"><ul><li><i class="like_bd_img"><img src="upload/detalis/like_bd_img1.png" alt=""></i><p>DELL 戴尔 Ins 15MR-75 28SS 15英寸 银色 笔记</p><h5>￥3699</h5><span>已有<i>6</i>人评价</span></li><li><i class="like_bd_img"><img src="upload/detalis/like_bd_img2.png" alt=""></i><p>Apple/苹果 iPhone 6s /6s plus 16G 64G 128G</p><h5>￥4699</h5><span>已有<i>508</i>人评价</span></li><li><i class="like_bd_img"><img src="upload/detalis/like_bd_img3.png" alt=""></i><p>EXCO 宜适酷 全屏钢化玻璃For iPhone6s/6 Plu</p><h5>￥59</h5><span>已有<i>1000</i>人评价</span></li><li><i class="like_bd_img"><img src="upload/detalis/like_bd_img4.png" alt=""></i><p>Apple/苹果 iPhone 6s /6s plus 16G 64G 128G</p><h5>￥3699</h5><span>已有<i>6</i>人评价</span></li><li><i class="like_bd_img"><img src="upload/detalis/like_bd_img5.png" alt=""></i><p>DELL 戴尔 Ins 15MR-75 28SS 15英寸 银色 笔记</p><h5>￥3699</h5><span>已有<i>6</i>人评价</span></li><li><i class="like_bd_img"><img src="upload/detalis/like_bd_img6.png" alt=""></i><p>DELL 戴尔 Ins 15MR-75 28SS 15英寸 银色 笔记</p><h5>￥3699</h5><span>已有<i>6</i>人评价</span></li></ul></div></div><!-- 猜你喜欢end --><!-- footer底部模块start --><footer class="footer"><div class="w"><!-- 页面底部服务模块 --><div class="mod_service"><ul><li><h5 class="h5_img1"></h5><div class="service_text"><h4>正品保证</h4><p>正品保障，提供发票</p></div></li><li><h5 class="img2"></h5><div class="service_text"><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5 class="img3"></h5><div class="service_text"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5 class="img4"></h5><div class="service_text"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5 class="img5"></h5><div class="service_text"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><!-- mod_help页面底部帮助模块 --><div class="mod_help"><dl><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><dt>配送方式</dt><dd><a href="#">上门自提</a></dd><dd><a href="#">211限时达</a></dd><dd><a href="#">配送服务查询</a></dd><dd><a href="#">配送费收取标准</a></dd><dd><a href="#">海外配送</a></dd></dl><dl><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></dl><dl><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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="../shoping/images/erweima.png" alt="">品优购客户端</dd></dl></div><!-- mod_copyright页面底部版权模块 --><div class="mod_copyright"><ul><li><a href="#">关于我们</a></li><li></li><li><a href="#">联系我们</a></li><li></li><li><a href="#">联系客服</a></li><li></li><li><a href="#">商家入驻</a></li><li></li><li><a href="#">营销中心</a></li><li></li><li><a href="#">手机品优购</a></li><li></li><li><a href="#">友情链接</a></li><li></li><li><a href="#">销售联盟 </a></li><li></li><li><a href="#">品优购社区</a></li><li></li><li><a href="#">品优购公益</a></li><li></li><li><a href="#">English Site</a></li><li></li><li><a href="#">Contact U</a></li></ul><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer底部模块end -->
</body></html>

web前端学习第十四~十八天相关推荐

Web前端学习记录(十)
写在前面因为最近在学web前端,一般习惯用Google浏览器,所以找时间给她换了一个主题,十分的惬意,对着广阔无垠的浩瀚星海,对着满天的银光,就这样静静地坐着,心里就有了一片完整的星空. 使用Jav ...
学习web前端历程（十四）
金立官网页面(部分).css3动画(圆角.阴影) 一.金立官网导航条.转播图 <!DOCTYPE html> <html lang="en"> <he ...
web前端学习（十八）——CSS3表格属性（table）的相关设置
1.CSS表格使用 CSS 可以使 HTML 表格更美观.指定CSS表格边框,使用border属性. 缩写边框属性设置在一个声明中所有的边框属性. 可以设置的属性分别(按顺序):border-wid ...
Web前端学习记录(十五)
写在前面: 由于w小小的失误,这篇其实应该是(十二),害,这件事情说来话长,尽管想改一下名字,但时间的先后没办法呀,只好将错就错了. w:开始表演. y:视而不见. w:······ 实现shoppi ...
Java中执行存储过程和函数(web基础学习笔记十四)
一.概述如果想要执行存储过程,我们应该使用 CallableStatement 接口. CallableStatement 接口继承自PreparedStatement 接口.所以CallableS ...
Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?
题目点评这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...
html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
零基础想要学习前端，却无从下手？其实你就差一套这样的web前端学习路线
优秀的前端工程师无论在深度和广度上都得有自己的一套清晰透明的知识体系,同时更应该具备快速学习的能力. WEB前端工程师除了需要掌握基本的前端的开发技能外,当然,这里的基本技能说的比较宽泛,大致包括HT ...

web前端学习第十四~十八天

web前端学习第十四~十八天相关推荐

最新文章

热门文章