25.品优购项目

目录

1 案例介绍

2  案例准备

---

1 案例介绍

我们做一个这个页面

百度 品优购 可以查到，百度的地址有时会更改页面，不过你百度 品优购 然后找别的地址总可以看到这个页面

这个就是给前端人员练习的一个网站，网站有三个页面构成

首先是首页

然后是注册页面，在这里有个 免费注册 链接

点开后出现注册页

最后点击这里的手机

这个是列表页

2  案例准备

在这个项目中，我是先把项目做完然后截的图

首先我们把该准备的东西都准备了，创建下面这些文件夹，图像的话我们可以用一张放一张，这样会比较方便

• 在这个项目中我们会创建多个css，所有的css文件都放在css这个文件夹中
• 所有的字体文件我们放在fonts中，比如icomoon
• 不常变动的图片文件我们放在images中
• 需要经常变动的图片文件我们放在upload中

• 大多数项目中还需要js，我们这里先不用js

我们先将初始化的css写好，内容如下

初始化在项目中我们一般命名为 base.css ，项目中的所有文件名最好不要使用中文，但为了之后看起来更明白，我们在这个项目中就都使用中文了

在使用类名时，我们尽可能使用下面这些类名，这些名称是约定俗成的，其他人看起来很好理解

我们注意一下这里的icomoon声明，由于我们的路径与之前我们使用icomoon时不一样了，所以我们要把字体声明的路径这样写

• icomoon的字体声明不一定要放在初始化css中
• 这个是我后面截的图，你可以先不管icomoon，在后面处理

视频中是将压缩包中的fonts直接复制到项目路径中

下一章我们来完成首页，我没有原型图，所以有的尺寸与网上不太一样