# 品优购项目

# 项目搭建

1. 需要创建如下文件夹 :

   名称	说明
   项目文件夹	shoping
   样式类图片文件夹	images
   样式文件夹	css
   产品图片文件夹	upload
   字体类文件夹	fonts
   脚本文件夹	js

2. 需要创建如下文件 :

   名称	说明
   首页	index.html
   CSS 初始化样式文件	base.css
   CSS 公共样式文件	common.css

3. 模块化开发

   • 有些央视和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复利用
   • 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
   • 模块化开发具有重复使用，修改方便等特点

# 网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上

目前主要的浏览器都支持 favicon.ico 图标

1. 制作 favicon 图标
2. 将 favicon 图标放到项目根目录
3. 在 HTML 页面中引入 favicon 图标

# 网站 TDK 三大标签 SEO 优化

SEO 优化 (Search Engine Optimization) 汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度

1. title 网站标题

   title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点

   建议 : 网站名 (产品名) - 网站的介绍 (尽量不要超过 30 个汉字)

   例如 :

   • 京东 (JD.COM)- 综合网购首选 - 正品低价，品质保障，配送及时，轻松购物！
   • 小米商城 - 小米 5s, 红米 Note4, 小米 MIX, 小米笔记本官方网站

2. description 网站说明

   简要说明我们网站主要是做什么的

   我们提倡，description 作为网站的总体业务和主题概括，多采用 "我们是...", "我们提供...", "xxx 网站作为...", "电话 : 010..." 之类的语句

   例如 :

3. keywords 关键字

   keywords 是页面关键词，是搜索引擎的关注点之一

   keywords 最好限制为 6-8 个关键词，关键词之间用英文逗号隔开，采用 关键词1, 关键词2 的形式

# 常用模块类名命名

以下是常用类名模块

# header

# LOGO SEO 优化

1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1 里面再放一个标签，可以返回首页的，把 logo 的背景图片给链接即可
3. 为了搜索引擎收录我们，我们链接里面要放文字 (网站名称), 但是文字不要显示出来
   • 方法一 : text-indent 移到盒子外面 ( text-indent: -9999px ), 然后 overflow: hidden , 淘宝的做法
   • 方法二：直接给 font-size: 0; 就看不到文字了，京东的做法
4. 最后给链接一个 title属性 ，这样鼠标放到 logo 上就可以看到提示文字了

# header 制作

1. header 盒子必须要有高度
2. 1 号盒子是 logo 标志定位
3. 2 号盒子是 search 搜索模块定位
4. 3 号盒子是 hotwords 热词模块定位
5. 4 号盒子是 shopcar 购物车模块
   • count 统计部分用绝对定位做
   • count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开，给一个高度
   • 一定注意左下角不是圆角，其余三个是圆角 写法 : border-radius: 7px 7px 7px 0

# nav 导航制作

• nav 盒子通栏有高度，而且有个下边框
• 1 号盒子左侧浮动，dropdown
• 2 号盒子左侧浮动，navitems 导航栏组

# main 主题模块制作

• main 盒子宽度为 980 像素，位置距离左边 220px (margin-left), 给高度就不用清除浮动
• main 里面包含左侧盒子，左浮动， focus 焦点图模块
• main 里面包含右侧盒子，右浮动， newsflash 新闻快报模块

# 列表页制作准备工作

1. 列表页面是新的页面，我们需要新建页面文件 list.html
2. 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
3. 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css
4. 需要新的 list.css 样式文件，这是列表页专门的样式文件

# 注册页面类名命名

注册页面 : register.html

** 注意 : ** 注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做 SEO 优化