话不多说先看效果图，源代码在文末
- 首页
- 现阶段，主要是做前台页面设计
- 项目名称：品优购
- 项目描述：品优购是一个电商网站，需求是完成 、、 的制作
开发工具
- VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
技术栈
- 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式
- 采取结构与样式相分离，模块化开发
1、需要创建如下文件夹：
- images：放置背景等不经常更换的图片
- upload：放置产品类需要经常更换的图片
一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上
- 目前主要的浏览器都支持 favicon.ico 图标
具体制作步骤：
1、制作 favicon 图标
- 把品优购图标切成 png 图片，注意是透明形式
- 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
- 在 html 页面里面的 元素之间引入代码
汉译为 ，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度
title 具有不可替代性，是内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
- 小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站
- 华为 - 构建万物互联的智能世界
2、description 网站说明
description 是网页描述文字，尽量用简洁的文字描述该网页的主要内容，一般控制在60字以内
3、 keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 的形式
- 对于前端人员来说，只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备
网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php
以下是约定的命名模块
- 给通栏的盒子加行高，里面子盒无需加行高，可以继承父盒行高
- 里面包含版心的盒子，版心盒子里面包含1号左浮动盒子，2号右浮动盒子
- 右侧盒子中竖线 | ，也可以设为一个盒子，加左右外边距
- 注意字体图标的路径问题
- header 盒子必须要有高度
- 1 号盒子是 logo 标志，采取定位
- 2 号盒子是 search 搜索模块，采取定位
- 3 号盒子是 hotwords 热词模块，采取定位
- 4 号盒子是 shopcar 购物车模块，采取定位
这里讲解一下实际开发中真正的 logo 应该怎样去做：要符合 SEO优化
- logo 里面首先放一个 ，目的是为了提权，告诉搜索引擎，这个地方很重要
- h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
- 为了搜索引擎收录我们，链接里面要放文字 ，但是文字不要显示出来
- 方法 1：text-indent 移到盒子外面 ，然后 （淘宝做法）
- 方法 2：直接给 就看不到文字了（京东做法）
- 最后给链接一个 ，这样鼠标放到 logo 上就可以看到提示文字了
- footer 页面底部盒子通栏给一个高度和灰色的背景
- footer 里面有一个大的版心
- 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思
- 版心里面包含 2 号盒子，mod_help 是帮助模块
- 版心里面包含 3 号盒子，mod_copyright 是版权模块
- main 盒子宽度为 980 像素，位置距离左边 ，给高度就不用清除浮动
- main 里面包含左侧盒子，左浮动，focus 焦点图模块
- main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块
- 1 号盒子为 news 新闻模块 高度为 165px
- 2 号盒子为 lifeservice 生活服务模块 高度为 209px
- 3 号盒子为 bargain 特价商品
- 注意：这里我们分为上下两个模块，但是两个模块都用 div
- 1 号盒子 news-hd 新闻头部模块，给一个高度和下边框
- 2 号盒子 news-bd 新闻主题部分，里面包含 ul 和 li 还有链接
- lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
- 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li 。或者 可以采用
- lifeservice 盒子 隐藏多余的部分就可以了
- 大盒子 recom 推荐模块 recommend
- 里面包含 2 个盒子， 浮动即可
- 1 号盒子 recom_hd
- 2 号盒子 recom_bd ，注意里面的小竖线
1. box_hd 模块
- 有高度可以不用清除浮动
- 左边 h3 ，盒子左浮动
- 右边 tab_list ，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做
- 要求选项卡个数要内容个数一致
- 根据 tab 切换的原理， tab_content 里面包含 内容部分。 这个内容可以通过ul布局
- 分为 5 个大列，列的宽度不一致
- 列表页面是新的页面，我们需要新建页面文件
- 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
- 头部和底部的样式也需要，因此 list.html 中还需要引入
- 需要新的 样式文件，这是列表页专门的样式文件
- 秒杀盒子 sk（ seckill ） 定位即可
- 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
- 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
- 1 号盒子 sk _container 给宽度 1200，不要给高度
- 2 号盒子 sk_hd ，插入图片即可
- 3 号盒子 sk_bd ，里面包含很多的 ul 和 li
说明：老师所讲解的女鞋产品部分是直接用的图片，此部分是自己补充完善的，代码可能不太比较混乱
注册页面：
- 注意：注册页面比较隐私，为了保护用户信息，我们