小项目——品优购部分页面拆分展示

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

本期带来的是品优购电商的几个静态页面

【项目前提】
掌握HTML语义化标签；
掌握css基本语法；
掌握css选择器的使用；
掌握css盒子模型；
掌握css浮动；
掌握css定位；
会使用精灵图及图标字体；

目录

一、 项目说明

二、 部分效果图展示

三 、部分代码展示

四、 总结

文末附源码下载链接 源码地址

---

一、项目说明

【项目说明】 品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。通过本阶段的学习我们需要实现品优购网上商城网站前台的部分页面。包括品优购

网站首页、品优购用户注册页、登录页面、商品列表页、品优购商品详情页。

虽然目前有许多知识点还没有学到，但是可以先了解下，这里也只是几个静态页面，后续会进行完善

二、部分效果图展示

首页

注册页面

商品分类页面

商品详情页面

三、部分代码展示

首先我们要有一个思路，顶部导航栏可以用无序列表+a标签+定位
左侧的列表用列表+定位，中间图片和右侧用浮动和精灵图来做

<!--首页-->
<nav>
        <div class="nav-box">
            <div class