包括三个静态页面，主页面以及商品页面（目前只写了手机的页面）还有注册页面

一、index.html(主页面)+index.css

index.html

品优购欢迎您！ 
请登录免费注册
我的订单
我的品优购 
品优购会员
企业采购
关注品优购
 客户服务
网站导航
品优购
搜索优惠购首发亿元优惠 9.9元团购 美满99减30 办公用品电脑 通信我的购物车8全部商品分类
家用电器
手机、数码、通信
电脑、办公
家居、家具、家装、厨具
男装、女装、童装、内衣
个户化妆、清洁用品、宠物
鞋靴、箱包、珠宝、奢侈品
 运动户外、钟表
汽车、汽车用品
母婴、玩具乐器
食品、酒类、生鲜、特产
医药保健
图书、音像、电子书
彩票、旅行、充值、票务
理财、众筹、白条、保险
服装城
美妆馆
传智超市
全球购
闪购
 团购 
拍卖
有趣
<>
品优购快报更多 
[特惠]
备战开学季 全民半价购数码
[公告]
品优稳占家电网购六成份额 99
[特惠]
百元中秋全品类礼券限量领
[公告]
上品优生鲜 享阳澄湖大闸蟹
[特惠]
每日享折扣品优品质游
话费机票电影票游戏彩票加油站酒店火车票众筹理财礼品卡白条
 
猜你喜欢
换一批
阳光美包新款单肩包女
包时尚子母包四件套女
￥116.00
爱仕达 30CM炒锅不粘
锅NWG8330E电磁炉炒
￥99.00
捷波朗
(jabra) BOOSI劲步
￥245.00
欧普
JYLZ08面板灯平板灯铝
￥238.00
三星
(G5500)移动联
￥649.00
韩国所望
紧致湿润精华露400ml
￥649.00
家用电器
热门|
大家电|
生活电器|
厨房电器|
个护健康|
应季电器|
空气/净水|
新奇特|
高端电器
节能补贴
4K电视
空气净化器
IH电饭煲
滚筒洗衣机
电热水器
烧水壶智能光控泡茶壶茶具套装
满299.00减40.00
正品保障
正品保障，提供发票
极速物流
急速物流，急速送达
无忧售后
7天无理由退换货
特色服务
私人定制家电套餐
帮助中心
您的购物指南
购物指南
购物流程
会员介绍
生活旅行/团购
常见问题
 大家电
联系客服
配送方式
上门自提
211限时达
配送服务查询
配送费收取标准
 海外配送
支付方式
货到付款
在线支付
分期付款
邮局汇款
 公司转账
售后服务
售后政策
价格保护
退款说明
返修/退换货
取消订单
特色服务
夺宝岛
DIY装机
延保服务
品优购E卡
 品优购通信
帮助中心
品优购客户端
关于我们
联系我们
联系客服
商家入驻
营销中心
手机品优购
友情链接
销售联盟
 品优购社区
品优购公益
 English Site
Contact U
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
京ICP备08001421号京公网安备110108007702

index.css

.main {width: 980px;height: 455px;margin: 10px 220px;}.focus {position: relative;float: left;width: 721px;}.focus .pref,.focus .next {position: absolute;display: block;top: 50%;margin-top: -12px;width: 25px;height: 25px;text-align: center;line-height: 25px;color: #fff;background: rgba(0, 0, 0, .3);}.focus .pref:hover,.focus .next:hover {color: #b1191a;}.focus .pref {border-bottom-right-radius: 12px;border-top-right-radius: 12px;}.focus .next {right: 0;border-bottom-left-radius: 12px;border-top-left-radius: 12px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -50px;width: 100px;height: 20px;border-radius: 10px;background: rgba(0, 0, 0, .4);}.promo-nav li {float: left;width: 12px;height: 12px;background-color: #fff;margin-left: 6px;margin-top: 5px;border-radius: 6px;}.promo-nav li:hover {background-color: #b1191a;}.newsflash {float: right;width: 250px;height: 100%;border: 1px #ccc solid;}.news {height: 165px;border-bottom: 1px #ccc solid;}.news-hd {height: 32px;line-height: 32px;font-size: 14px;padding-left: 1em;border-bottom: 1px #ccc dotted;}.news .news-bd {padding-top: 10px;}.news .news-bd a {line-height: 22px;margin-left: 1em;}.news .news-bd li {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.news-bd h4 {display: inline;font-size: 14px;margin-right: 5px;}.news-hd a {margin-left: 112px;font-size: 13px;}.news-hd a::after {content: '\e646';font-family: 'iconfont';}.liveservice {width: 100%;height: 208px;}.liveservice a {position: relative;display: block;float: left;width: 62px;height: 70px;margin-top: 0;border-left: 1px #ccc solid;border-bottom: 1px #ccc solid;}.liveservice a i {position: absolute;bottom: 7px;left: 16px;}.liveservice a:nth-child(1) {background: url(../images/icons.png);}.liveservice a:nth-child(2) {background: url(../images/icons.png) -62px 0px no-repeat;}.liveservice a:nth-child(3) {background: url(../images/icons.png) -125px -0px no-repeat;}.liveservice a:nth-child(4) {background: url(../images/icons.png) -189px 0px no-repeat;}.liveservice a:nth-child(5) {background: url(../images/icons.png) 0px -70px no-repeat;}.liveservice a:nth-child(6) {background: url(../images/icons.png) -60px -70px no-repeat;}.liveservice a:nth-child(7) {background: url(../images/icons.png) -126px -70px no-repeat;}.liveservice a:nth-child(8) {background: url(../images/icons.png) -190px -70px no-repeat;}.liveservice a:nth-child(9) {background: url(../images/icons.png) 0px -145px no-repeat;}.liveservice a:nth-child(10) {background: url(../images/icons.png) -62px -145px no-repeat;}.liveservice a:nth-child(11) {background: url(../images/icons.png) -126px -74px no-repeat;}.liveservice a:nth-child(12) {background: url(../images/icons.png) -190px -146px no-repeat;}.liveservice a:nth-child(1),.liveservice a:nth-child(5),.liveservice a:nth-child(9) {border-left: 0;}.bargain {height: 76px;margin-top: 5px;}.recom {height: 162px;background-color: #ebebeb;}.recom .recom-hd {float: left;width: 205px;height: 162px;text-align: center;padding-top: 29px;background-color: #5c5251;}.recom-bd ul li {position: relative;float: left;width: 247px;height: 162px;}.recom-bd img {width: 247px;height: 100%;}.recom-bd ul li:nth-child(-n+3):after {content: '';position: absolute;right: 0;top: 10px;width: 2px;height: 143px;background-color: #dddddd;}/* 猜你喜欢guesslike */.guesslike {height: 260px;margin-top: 30px;}.guesslike-hd {height: 28px;}.guesslike h4 {float: left;font-size: 18px;font-weight: normal;}.guesslike button {float: right;font-size: 12px;background-color: transparent;margin-right: 18px;}.guesslike button::after {content: '\e6e1';font-family: 'iconfont';margin-left: 8px;}.guesslike-bd {height: 232px;margin-top: 10px;border: 1px #ededed solid;}.guesslike-bd li {position: relative;float: left;width: 199px;height: 232px;}.guesslike-bd li img {width: 100%;}.guesslike-bd li span {position: absolute;bottom: 10px;left: 0;width: 199px;height: 64px;padding-left: 34px;}.guesslike-bd li:nth-child(-n+5) span {border-right: 1px #ededed solid;}.guesslike-bd li span p {line-height: 20px;font-size: 14px;}.guesslike-bd li span h5 {color: #df3033;font-size: 16px;}/* 家电模块 */.jiadian {margin-top: 28px;}.jiadian .box-hd {height: 30px;border-bottom: 2px #c81623 solid;}.jiadian .box-hd h3 {float: left;font-size: 18px;color: #c81623;}.jiadian .tab-list {float: right;}.jiadian .tab-list li {float: left;font-size: 12px;line-height: 30px;text-align: center;}/* 此方法过于麻烦 *//* .jiadian .tab-list li:nth-child(-n+8)::after {position: absolute;content: '';top: 9px;right: 0;width: 1px;height: 12px;background-color: #999999;} */.jiadian .tab-list li a {margin: 0 12px;}.jiadian .box-bd {height: 442px;}.jiadian .box-bd .tab-content .tab_list_item {height: 361px;}.jiadian .box-bd .tab-content .tab_list_item>div {float: left;height: 361px;}.col-210 {width: 210px;padding-left: 14px;padding-top: 10px;text-align: center;background-color: #f9f9f9;}.col-210 li {float: left;width: 86px;height: 20px;margin-right: 10px;text-align: center;line-height: 20px;border-bottom: 1px #ccc solid;}.col-328 {position: relative;width: 328px;background-color: #aed6d8;}.col-328 .text {position: absolute;top: 37px;left: 30px;color: #066c7d;}.col-328 .text h4 {font-size: 18px;}.col-328 .text p {font-size: 16px;}.col-328 img {position: absolute;left: 55px;top: 110px;}.col-328 ul {position: absolute;height: 12px;width: 60px;bottom: 10px;left: 50%;margin-left: -30px;}.col-328 ul li {float: left;width: 10px;height: 10px;margin: 1px 5px;background-color: #3e3e3e;border-radius: 5px;}.col-328 ul li:hover {background-color: #fff;}.col-220 {width: 220px;border-right: 1px solid #ccc;}.col-220 a {display: block;}.bd {border-bottom: 1px solid #ccc;}.col-222 {width: 222px;}.col-222 a {display: block;}.box-bd .brand-nav {height: 66px;margin-top: 18px;background-color: #f7f7f7;}

二、list.html+list.css商品页面

list.html

品优购欢迎您！ 
请登录免费注册
我的订单
我的品优购 
品优购会员
企业采购
关注品优购
 客户服务
网站导航
品优购
搜索优惠购首发亿元优惠 9.9元团购 美满99减30 办公用品电脑 通信我的购物车8
品优秒杀
即将售罄
超值低价
女装
女鞋 
男装
男鞋
母婴童装
食品
智能数码 
运动户外 
更多分类
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
已售87%
剩余29件
立即抢购
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
已售87%
剩余29件
立即抢购
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
已售87%
剩余29件
立即抢购
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
已售87%
剩余29件
立即抢购
正品保障
正品保障，提供发票
极速物流
急速物流，急速送达
无忧售后
7天无理由退换货
特色服务
私人定制家电套餐
帮助中心
您的购物指南
购物指南
购物流程
会员介绍
生活旅行/团购
常见问题
 大家电
联系客服
配送方式
上门自提
211限时达
配送服务查询
配送费收取标准
 海外配送
支付方式
货到付款
在线支付
分期付款
邮局汇款
 公司转账
售后服务
售后政策
价格保护
退款说明
返修/退换货
取消订单
特色服务
夺宝岛
DIY装机
延保服务
品优购E卡
 品优购通信
帮助中心
品优购客户端
关于我们
联系我们
联系客服
商家入驻
营销中心
手机品优购
友情链接
销售联盟
 品优购社区
品优购公益
 English Site
Contact U
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
京ICP备08001421号京公网安备110108007702

list.css

.miaosha {position: absolute;left: 183px;bottom: 32px;height: 30px;padding-left: 12px;border-left: 1px solid #b1191a;}.sk {height: 45px;line-height: 45px;}.sk-list li {float: left;font-size: 16px;font-weight: bold;}.sk-list li a {padding: 0 32px;font-size: 14px;}.sk-con li a {float: left;padding: 0 26px;}.sk-con li:last-child a::after {content: '\e65c';font-family: 'iconfont';}.sk_hd {height: 120px;}.sk_bd {margin-top: 24px;}.sk_bd a {float: left;display: block;width: 288px;height: 456px;margin-right: 12px;border: 1px solid transparent;}.sk_bd a:hover {border: 1px solid #b1191a;}.sk_bd .text_phone {padding: 2px 12px;height: 110px;margin: 4px 0;}.container_name {font-size: 14px;line-height: 20px;margin-bottom: 12px;}.sk_bd .text_phone h4 {display: inline-block;font-size: 22px;}.sk_bd .text_phone .oldprice {text-decoration: line-through;font-size: 14px;margin-left: 5px;color: #ccc;}.sale li {float: left;padding: -1px 5px;}.bar {width: 132px;height: 12px;margin-top: 4px;border-radius: 6px;background-color: #fff;border: 1px solid #ed282e;padding: 2px;}.bar-in {width: 116px;height: 100%;background-color: #ed282e;border-radius: 6px;/* 此处加transition是为了复习之前的过渡知识点 */transition: width 1s;}.bar-in:hover {width: 100%;}.sk_bd .purchase {height: 48px;width: 100%;font-size: 20px;text-align: center;color: #fff;line-height: 48px;background-color: #b1191a;}

三、register.html+register.css（注册页面）

register.html

注册新用户我有账号，去登录
手机号：手机号码格式不正确，请重新输入
短信验证码：保存成功
登录密码：密码少于6位数，请从新输入
安全程度 弱中强
确认密码：密码不一致，请重新输入
同意协议并注册 《知果果用户协议》

register.css

.w {width: 1200px;margin: 0 auto;}a {cursor: pointer;}header {height: 80px;line-height: 80px;border-bottom: 2px solid #b1191a;}.registerarea {height: 520px;border: 1px solid #dfdfdf;margin-top: 18px;}.registerarea h3 {line-height: 40px;font-size: 18px;font-weight: 400;padding: 0 5px;background-color: #ececec;height: 40px;border-bottom: 1px solid #dfdfdf;}.registerarea h3 .login {float: right;font-size: 14px;}.register-form {width: 600px;margin: 50px auto;}.register-form li {margin-bottom: 18px;}.register-form label {display: inline-block;width: 80px;text-align: right;}.register-form .inp {width: 234px;height: 34px;border: 1px solid #ccc;}.register-form .safe {margin-left: 152px;color: #ccc;}.register-form .safe em {display: inline-block;width: 36px;text-align: center;margin-right: 1px;}.register-form .safe em:nth-child(1) {background-color: #de1111;}.register-form .safe em:nth-child(2) {background-color: #40b83f;}.register-form .safe em:nth-child(3) {background-color: #f79100;}.error {color: #b1191a;}.error::before,.success::before {content: '\e613';margin-left: 10px;font-family: 'iconfont';vertical-align: middle;font-size: 20px;}.success {color: green;}.success::before {content: '\e6cc';font-size: 25px;}.agree {font-size: 12px;margin-left: 80px;margin-top: 40px;}.agree input {vertical-align: middle;}.agree a:hover {color: #93caf0;}.over {width: 200px;height: 32px;background-color: #c81623;color: #ffff;margin-left: 100px;margin-top: 40px;}.mod-coperight {margin: 18px 0;text-align: center;}.link {height: 28px;text-align: center;margin-left: 115px;}.link ul li {float: left;padding: 0 12px;font-size: 12px;border-right: 1px #cccc solid;}.link ul li:last-child {border-right: 0;}

四、公共样式common.css

@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.woff2" />

五、基础样式base.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 {/* 去掉默认边框 */border: 0;outline: none;/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;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}