目录
1.品优购项目规划
1.1网站制作流程
1.2品优购项目整体介绍
1.3品优购项目的学习目的
1.4开发工具以及技术栈
小总结
1.5品优购项目搭建工作、
1.5.1创建文件夹
1.5.2创建文件
1.5.3 模块化开发
1.6网站 favicon 图标
1.7网站TDK三大标签SEO优化
1.7.1title网站标题
1.7.2description网站说明
1.7.3keywords关键字
第一阶段-项目规划参考代码
2.品优购首页制作
2.1常用模块类名命名
2.2快捷导航shortcut制作
===快捷导航shortcut制作完成代码展示===
2.3header制作
2.3.1LOGO SEO优化
LOGO SEO优化代码完成展示
2.3.2 搜索框模块
搜索框模块代码完成展示
2.3.3hotwords热词模块
2.3.4shopcar模块
===header制作完成展示===
2.6main主体模块
2.6.1newsflash快报模块
===main主体模块代码展示===
2.7推荐模块制作
===推荐模块代码展示===
2.8楼层区floor模块制作
2.8.1头部box_hd制作
2.8.2Tab栏原理-布局需求
===floor模块代码展示===
3.品优购列表页制作
3.1准备工作
3.3列表页主体 sk_con tainer
===列表页主题代码展示===
4.品优购注册页制作
4.1注册页类名命名
===注册页面代码展示===
5.Web服务器
5.1什么是Web服务器
5.2本地服务器
5.3远程服务器
5.4将自己的网站上传到远程服务器
- 项目名称：品优购
- 项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作
1.5.1创建文件夹
1.5.2创建文件
base.css文件 - CSS初始化代码：
1.5.3 模块化开发
favicon.ico一般用于作为缩略的网站标志，他显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持 favicon.ico图标
第一步：
1.把品优购图标切成png图片
2.把png图片转化为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
第二步:
favicon图标放到网站根目录下
第三步：
在html页面的<head></head>元素之间引入代码
总结：
1.7.1title网站标题
1.7.2description网站说明
1.7.3keywords关键字
网站的首页一般都是使用index命名，比如index.html 或者 index.php。
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面
1.设置.style_red样式给左侧 '免费注册' 是因为模块中不只有它是这种红色样式（例如搜索框下面的 ' 优惠购首发' ），设置单独一个类名更加合理方便
2. 借鉴右侧导航栏做法，设置13个li ，给偶数小li设置样式实现 ' | ' 分隔，而不是用border（高度不一致麻烦）
3.右侧导航栏中的字体图标采用after伪元素，注意字体图标路径(见common.css文件）
index.html
common.css
2.3.1LOGO SEO优化
logo我们以前的做法div里面放图片是不合理的，实际开发中应该用到SEO优化
LOGO SEO优化代码完成展示
index.html
common.css
2.3.2 搜索框模块
搜索框测量大盒子定位数据时，因为用的CSS3盒子模型，边框是不会撑大盒子的，因此测量宽度高度的时候直接把边框量进去就是最终的宽度/高度了
参考搜索框做法大盒子包裹住search表单和button按钮，注意search表单和button按钮都是行内元素，会有间隙，卡好宽度的时候容易掉下来 可以用浮动去除。
搜索框模块代码完成展示
index.html
common.css
2.3.3hotwords热词模块
indedx.html
common.css
2.3.4shopcar模块
（自己用了shopcar模块用a链接转换成块元素） 加上css伪类元素::before和::after添加文字图标
购物车商品数量count用定位
效果：
index.html
common.css
制作：
index.html
common.css
效果：
制作：
index.html
common.css
以前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专用的，注意需要新的样式文件 index.css。
2.6.1newsflash快报模块
newsflash中的news模块细分
效果：
整体：
index.html
index.css
index.html
index.css
2.8.1头部box_hd制作
2.8.2Tab栏原理-布局需求
当用户点击tab_list上的某个选项时，tab_content呈现对应内容，其他内容隐藏。
===floor模块代码展示===
index.html
index.css
list.html
list.css
list.html
list.css
效果：
注册页面：register.html
注意：注册页面比较隐私，我们不需要对当前页面进行SEO优化
register.html
register.css
效果：
我们可以把自己的电脑设置为本地服务器，这样同一个区域网内的同学就可以访问你的品优购网站了。后面学ajax'的时候，在进行讲解。
注意：一般稳定的服务器都是要收费的。比如：阿里云