DAY 11 ｜ 自学前端第十一天

PC端品优购项目

---

1.1网站制作流程

1. 客户沟通制定方案
2. 签订合同
3. 预付定金——一般总额30%左右
4. 初稿审核（网页美工制作 原型图 和 psd效果图）
5. 前端人员页面设计 后端人员功能开发——前后端分离
6. 测试验收
7. 上线培训
8. 后期维护（一般半年到一年，bug修复&模块稍微改动）

一般有项目经理全程把控

1.2 品优购项目整体介绍

1. 电商网站，学习PC端首页、列表页、注册页的制作

1.3品优购项目学习目的

1. 了解常用布局；
2. 复习，总结，提高学过的布局技术；
3. 对实际开发中制作PC端页面流程有一个整体的感知；
4. 为学习移动端项目做铺垫。

1.4 开发工具以及技术栈

1. 开发工具：VScode、photoshop、Chrome浏览器
2. 技术栈：HTML5+CSS3；结构样式分离，模块化开发；代码规范

1.5 品优购项目搭建工作

• 需要创建以下文件夹：

1. shopping项目文件夹
2. images样式图片文件夹（不经常更换的）
3. upload产品类图片文件夹（可能会定期更换的）
4. css样式文件夹
5. fonts字体文件夹
6. js脚本文件夹

• 首页创建如下文件：

1. index.html 首页
2. base.css CSS初始化样式文件 box-sizing: border-box
3. common.css CSS公用样式文件

• 列表页创建如下文件：

1. list.html
2. list.css

• 注册页创建如下文件：

1. register.html
2. register.css

• 模块化开发：

1. 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独做一个模块，重复使用；
2. common.css公共样式。写好一个样式，其他页面用相同样式；
3. 模块化开发可以重复性使用，修改方便。

1.6 网站favicon图标

favicon.ico  网站标志。

1. 制作favicon图标
2. favicon图标放到网站根目录下(shopping下)
3. HTML页面引入favicon图标

• 制作favicon图标

1. 把品优购图标切成PNG图片；
2. 用比特虫把PNG转换为ico图标

1.7 网站TDK三大标签SEO优化

SEO优化：搜索引擎优化，迎合搜索引擎排名规则，提高网站排名。公司一般有专门的SEO人员 

页面必须有三个标签来符合SEO优化：title  / description / keywords

1. title  网站标题

建议：网站名（产品名）-网站的介绍（尽量不超30字） 

例如：京东（JD.COM）- 正品低价、品质保障、配送及时、轻松购物！

2.description 网站说明

 “我们是...”“我们提供....”“电话：010....”之类的

3.keywords 关键字

6-8个关键字，英文逗号分割，最好的产品往前写

---

2.1常用模块命名 

1.  快捷导航栏——shortcut
2. 标志——logo
3. 头部——header
4. 购物车——shopcar
5. 搜索——search
6. 热点词——hotwords
7. 导航——nav
8. 导航左侧——dropdown包含dd dt
9. 导航右侧——navitems
10. 页面底部——footer
11. 页面底部服务模块——mod_service
12. 页面底部帮助模块——mod_help
13. 页面底部版权模块——mod_copyright

2.2 快捷导航栏shortcut制作

1. 通栏——版心——左浮动右浮动
2. fl——ul>li>a
3. 空格 
4. 公共类名的调用style_red
5. fr——小竖线是设置成宽度1px的even li，margin值布局
6. 伪元素字体图标arrow-icon、fonts文件夹、字体声明css路径

2.3 头部header制作

1. 版心header——logo、search、hotwords、shopcar

• LOGO SEO优化：

1. logo里放一个h1标签；（提高权重）
2. h1里放一个a标签，路径可以返回首页的，a标签设置logo的背景图片；转成块级设置宽高
3. 链接里要放文字（网站名称），但文字不要显示出来；text-indent:-9999px，overflow-hidden；font-size:0;
4. 最后给链接一个title属性，这样鼠标放在logo上可以看到提示文字。

• search

1. 大边框盒子search包含两个小盒子input search（placeholder）和button

2.4 nav导航制作

1. 只有下边框的大盒子——版心——浮动的两个盒子dropdown和navitems
2. dropdown 下拉栏要写dt dd
3. 给块级化的a标签padding值，可以扩大选中范围

2.5 footer底部制作

1. 通栏——版心——上中下三个盒子 mod_service、mod_help、mod_copyright
2. mod_service 下边框——ul>li——图标h5精灵图——div (h4 p)
3. mod_help下边框——dl>dt>dd>a——dl浮动
4. mod_copyright

2.6 main主体模块制作

1. main主体模块是index里面专有的，注意需要新的样式文件index.css。
2. 版心——main盒子——两个盒子focus、newsflash
3. newsflash——news（hd bd）、lifeservice（ul>li）字体图标i、bargin

2.7推荐模块recom制作

1. 版心——左右两个盒子
2. 左hd——img p
3. 右bd——ul>li

2.8楼层区floor 制作

1. 楼层区没有高度
2. 一楼——版心——hd（h3、tab_list-ul>li）
3.  Tab栏原理——布局需求——tab_content-tab_list_item

---

 3.1 准备工作

1. list.html
2. 列表页头部尾部基本一致，去首页将头尾结构复制过来
3. 头尾样式也需要，list.html引入common.css
4. list.css

 3.2 列表页header和nav修改

1. 秒杀 sk 绝对定位
2. nav——版心——sk_list（ul>li>a）——sk_con（ul>li>a）

---

4.1 注册页命名

1. register.html ——注册页面比较隐私，不需要对当前页面进行SEO优化
2. 注册专区——registerarea
3. 注册内容——reg-form
4. 错误的——error
5. 成功的——success
6. 默认的——default

4.1 注册页布局

1. 头部 header——div-logo
2. 主体 registerarea——h3-div——reg_form-form>ul>li（label input span i）
3. 底部 footer

---

5.1 base.css:

5.2 common.css :

5.3 index.html: