目标：
- 能会引入ico图标
- 能简单看懂网站优化的三大标签
- 能使用字体图标 ( 重点 )
- 能说出我们css属性书写顺序
1. 品优购项目介绍
- 复习、总结、提高前面所学布局技术，完成首页、列表页、详情页、注册页面的制作
- 技术栈：HTML 结构 + CSS 布局
2. 设计目标
- 保证浏览器 ie7及以上, 火狐, 360, safari，chrome等
- 熟悉CSS+DIV布局，页面的搭建工作
- 了解常用电商类网站的布局模式
- 为后期品优购移动端做铺垫
3. 前期准备工作
要实现结构和样式相分离的设计思想
目录文件夹
| 名称 | 说明 |
|---|---|
| 项目文件夹 | pinyougou |
| 样式类图片文件夹 | img |
| 样式文件夹 | css |
| 产品类图片文件夹 | upload |
| 字体类文件夹 | fonts |
| 脚本文件夹 | js |
样式文件的分类
- 初始化css (css reset) 让浏览器风格统一，把常用的初始化语句放入 base.css里面
- 公共的样式 放入common.css里面
4. ⭐网站ico图标
1). 使用ico图标
把favicon.ico 这个图标放到根目录下
-
再 head 之间引入代码。
2). 制作ico图标
方法步骤：
- 首先把我们想要的切成图片
- 要把图片转换为 ico 图标，借助于第三方转换网站 http://www.bitbug.net/ 比特虫
总结：
代码：
注意：
- 她（它）是显示在浏览器中的网页图标
- 它是图标形式，不是一个图片
- 位置是放到 head 标签中间
- 后面的type="image/x-icon" 属性可以省略
- 为了兼容性，请将favicon.ico 这个图标放到根目录下
5. ⭐网站优化三大标签
SEO是由英文Search Engine Optimization缩写， 中文意译为“搜索引擎优化”！
SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来
我们现在阶段主要进行站内优化。网站优化，我们应该要懂title、keyword、description三大标签
1). 网页title 标题
title具有不可替代性，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点
建议：
⭐首页标题：网站名（产品名）- 网站的介绍
例如：
品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2). Description 网站说明
作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的
我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句
品优购网：
⭐
注意点：
- 这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击
- 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字
- 补充在 title 和 keywords 中未能充分表述的说明
- 用英文逗号 关键词1,关键词2
3). Keywords 关键字
Keywords是页面关键词，Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许
品优购网：
小米网：
4). 总结
- 我们的网页要做的优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页
所以我们的网站要做很多的优化， 其中就有这三大标签
- 一般情况下，三大标签里面的优化词，都是专门的优化人员写的，我们大概了解一下规范就可以了
- 我们的主要任务是，能写出这三大标签， 然后把优化人员给我们的内容，添加到里面
6. 字体图标
图片不但增加了总文件的大小，还增加了很多额外的"http请求"，图片放大和缩小会失真
此时，一个非常重要的技术出现了， 这就是字体图标（iconfont)
1). 字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药...
2). 设计字体图标
UI设计人员在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，之后保存为svg格式，交给前端人员
3). 上传生成字体包
前端人员收到svg文件，转换成页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的
推荐网站： http://icomoon.io
- icomoon字库
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢
- 阿里icon font字库
http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！
4). 下载兼容字体包
刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载（文件记得备份selection.json）
5). 字体引入到HTML
字体图标 本质就是 字体文件，需要引入到我们页面中
-
首先把 fonts文件夹放入项目 根目录下
-
html标签内里面添加结构
//到网站下载页面复制图标
-
在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
-
给盒子使用字体
span {
font-family: "icomoon";
}
6). 追加字体图标
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标
http://icomoon.io 点击import icons，把压缩包里面的selection.json 上传，然后，选新的图标，重新下载压缩包，替换原来文件即可
7). 拓展@ 常见字体格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
- TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
- OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
- Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
- Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
- SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
10. 品优购首页布局
命名集合：
| 名称 | 说明 |
|---|---|
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 热点词 | hotwrods |
| 导航 | nav |
| 导航左侧 | dorpdown 包含 .dd .dt |
| 导航右侧 | navitems |
1). shortcut 制作
- 通栏的盒子 命名为shortcut 快捷导航的意思， 注意，这里给行高，可以继承给里面的子盒子。
- 里面包含 版心的盒子
- 版心盒子里面包含1号左侧盒子左浮动
- 版心盒子里面包含2号右侧盒子右浮动
2). header 制作
- header盒子必须要有高度
- 1号盒子是 logo 标志 定位
- 2号盒子是 search 搜索模块 定位
- 3号盒子是 hotwrods 热词模块 定位
- 4号盒子是 shopcar 购车车模块
- count 统计部分 用绝对定位做
- count 统计部分 不要给宽度，因为可能买的件数比较多，让件数撑开就好了 给一个高度
- 一定注意左下角 不是圆角 其余三个是圆角
3). nav 制作
- nav 盒子通栏有高度 而且有个下边框
- 1号盒子 左侧浮动 dorpdown 下拉导航 里面包含 dt dd
- 2号盒子右侧浮动 navitems 导航栏组
4). logo 优化
- logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
- h1里面在放一个连接，可以返回首页的， 给a一个 大小 和 logo 的背景图片
- a里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
- 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
- 直接给font-size: 0; 就看不到文字了， 京东的做法
- 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了
5). footer 底部制作
- footer 页面底部盒子 通栏 给一个高度 灰色的背景
- footer 里面 首先一个 大 的版心
- 版心里面包含 1号盒子 mod_service 服务模块 module 模块的意思
- 版心里面包含 2号盒子 mod_help 帮助模块
- 版心里面包含 3号盒子 mod_copyright 版权模块
6). main 主体模块制作
这部分是 index 里面 专有的， 注意 需要新的样式文件 index.css
main 盒子 宽度 为 980像素， 距离 左边 220 给一个margin-left 就好了， 给高度就不用清除浮动。
main 里面包含 左侧盒子 左浮动 focus 焦点图 模块
main 里面包含 右侧盒子 右浮动 newsflash 新闻快报模块
(1). newsflash 新闻快报模块
- 1 号盒子 为 news 新闻模块
- 2 号盒子 为lifeservice 生活服务模块
- 3 号盒子为 bargain 特价商品
(2). news 新闻模块
- 注意，这里我们 分为 上下两个模块， 但是 两个模块 都用div
- 1号 盒子 news-hd 新闻头部模块 给一个 高度 和 下边框
- 2号 盒子 news-bd 新闻主题部分 里面 包含 ul 和 li 还有 链接
(3). lifeservice 生活服务模块
此地方有个小技巧，
- lifeservice 盒子 宽度为 250 但是装不开 里面的 4个 小 li
- 可以让 lifeservice 里面的 ul 宽度为 252 就可以 装的下 4个 小li
- lifeservice 盒子 overflow 隐藏多余的部分就可以了。
7). recommend 推荐模块
- 里面包含2个盒子， 浮动即可
- 1号盒子 recom-hd
- 2号盒子 recom-bd 注意里面的小 竖线
8). 楼层区 floor
注意这个floor 一个大盒子 包含， 不要给高度，内容有多少，算多少
[图片上传中...(2.png-49057d-1596098049982-0)]
(1). 家用电器模块
- 这个模块 jiadian 不需要写样式
- 版心居中对齐 因为这些模块 基本相同，下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是：
- 1号盒子 box-hd 给一个高度， 有个下边框 里面分为左右2个盒子
- 2号盒子 box-bd 不要给高度。
(2). box-hd 模块
- 有高度
- 左边 h3 盒子
- 右边 div 命名为 tab-list 因为用到 tab 切换效果， 所以 里面 要用 ul 和 li 来做 。
(3). box-bd 模块
- 根据tab 切换的原理， 应该还需要一个 tab-content 的 内容来包装 里面的 5个 盒子
- 分为5个大列 列的宽度 不一致
9). 侧边栏 fixedtool 制作
此模块用固定定位 里面包含 li
8. ⭐知识点 -过渡(CSS3)
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
低版本浏览器不支持（ie9以下版本）；经常和 :hover 一起 搭配使用。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
- 属性
属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
-
花费时间
transition-duration 花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease（还有linear ease-in ease-out ease-in-out）
-
何时开始
默认是 0s 鼠标触发就立即开始 可以设置 延迟触发时间
案例：
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
transition: all 0.5s;
常见效果：
按钮变换底色 图片移动 小米效果 （阴影效果） 传智导航栏效果 等等
9. 列表页制作
1). 列表页准备工作
列表页面是新的页面，我们需要新建 list.html
因为 列表页的 头部 和 底部 基本一致， 我们需要 把首页中的 头部 和 底部的 结构复制过去
头部和底部的 样式 ，列表也需要， 因此 list.html 也需要 引入 common.css
同时 需要新的 list.css 文件 这个 样式文件，里面只写 list.html 结构里面的内容就好了
2). 列表页 header 和 nav 修改
- 秒杀盒子 sk 定位 即可 second kill
- 1 号 盒子 左侧浮动 sk_list 里面包含 ul 和 li
- 2 号盒子 右侧浮动 sk_con 里面 包含 ul 和 li
3). 列表页主体盒子 sk _container
这个盒子里面包含了 所有的 列表页的所有主体内容
- 1号盒子 sk _container 给宽度 1200 不要给高度
- 2号盒子 sk_hd 插入图片即可
- 3号盒子 sk_bd 里面包含 很多的 ul 和 li
4). sk_goods 布局
- 此li 我们命名为 sk_goods
- 1号位置 有 a 包含 本图片 和下面的 标题 插入 图片即可 seckill_mod_goods_img 可以做一个 鼠标放入 图片 上滑动的效果
- 2号位置 标题 H5 命名为 sk_goods_title
- 3号 位置 为 价格 div 命名为 sk_goods_price
- 4号位置 为 div 命名为 sk_goods_progress 此处，我们 采取 代码的形式 写出 这个 导航条
- 5号位置 为 a 链接 命名为 sk_goods_buy 此处注意， 因为父盒子已经有左右padding 我们这里用定位合适。
5). 分页制作 page
- 最大的盒子 我们div 命名为 page 注意里面的盒子 全部用 行内块
- 1号盒子 用 span 命名为 page_num ( 页码的意思 ) 里面 放 a 把a 转换为 行内块 设置样式
- pn_prev 上一页 pn_next 下一页
- 2号盒子 用 span 命名为 page_skip ( skip 跳转 转移的意思 ) 里面注意 有 input 和 button
10.⭐ 知识点 -获得焦点元素
:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素
:hover
语法：
.total input {
border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
/*这个input 获得了焦点*/
.total input:focus {
width: 80px;
border: 1px solid skyblue;
}
border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
/这个input 获得了焦点/
.total input:focus {
width: 80px;
border: 1px solid skyblue;
}
11. 详情页 detail.html
| 名称 | 说明 |
|---|---|
| 主体 | de_container |
| 面包屑导航 | crumb_wrap |
| 产品介绍 | product_intro （ introduction介绍） |
| 预览包 | preview_wrap（左侧部分） |
| 预览缩略图 | preview_img |
| 预览列表 | preview_list |
| 左按钮 | arrow_prev |
| 右按钮 | arrow_next |
| 小图列表 | preview_items |
| 产品详细信息区域 | itemInfo_wrap （右侧部分） |
| 头部名称 | sku_name skull 头骨 |
| 新闻 | news |
| 摘要 | summary |
| 评价 | remark |
| 价格摘要 | summary_price |
| 配送至 | summary_stock |
| 支持 | summary_support |
| 选择 | choose |
| 选择按钮组 | choose_btns |
| 选择数量 | choose_amount |
| 减去 | reduce |
| 加入购物车 | addshopcar |
| 产品细节 | product_detail （ detail描述） |
| 左侧边 | aside |
| 详细描述 | detail |
1). 面包屑导航
- crumb_wrap 面包屑导航
- 关于面包屑导航的由来是源于一则童话故事的一个词语：汉泽尔和格蕾特尔两个人在穿过森林是，为了避免找不到回家的路，他们在沿途走过的地方都会撒下面包屑以便于根据这些面包屑找到回家的路。
2). 产品介绍 模块
- 1号盒子 本模块 命名为产品模块 product_intro （ introduction介绍）
- 此模块不要给高度 因为右侧的模块内容高度不固定
- 里面有2个盒子 分为是2号盒子 和 3号盒子
- 2号盒子为 预览区域 preview_wrap 给宽度，给高度， 左浮动
- 3号盒子为 产品详细信息区域 itemInfo_wrap 给宽度 ，不要给高度 左侧浮动
3). product_intro模块
1号盒子 为 图片预览 命名为 preview_img 注意里面的图片，我们切图的时候是 398*398 像素的
-
2号盒子 为 预览列表 命名为 preview_list
preview_list 制作
- 盒子 有左右按钮 arrow_prev arrow_next 用定位即可
- 中间 用 ul 命名为 list-item 给宽度和高度 然后 margin: 0 auto; 水平居中对齐即可
4). itemInfo_wrap 模块
此盒子命名为 itemInfo
1 号盒子 为 头部 sku_name
2 号盒子 为 最新新闻 news
3号盒子 为 产品详细摘要 我们命名为 summary （摘要的意思） 之所以下面都是摘要部分，因为里面格式基本相同。
-
下面为详细命名
名称 说明 头部名称 sku_name skull 头骨 新闻 news 摘要 summary 评价 remark 价格摘要 summary_price 促销摘要 summary_promotion 配送至 summary_stock 支持 summary_support 选择 choose 选择版本 choose_version 选择类型 choose_type 选择按钮组 choose_btns 选择数量 choose_amount add 是加的意思 减去 reduce cursor: not-allowed; 禁止符号 加入购物车 addshopcar
5). 产品细节模块 product_detail
- 大盒子为 product_detail 模块 不要给高度 ，别忘记清除浮动
- 1号盒子 左侧浮动 命名为 aside 有宽度 不给高度
- 2号盒子 右侧浮动 命名为 detail 有宽度不给高度
6) aside 布局
- 1 号盒子 命名为 tab_list 给高度就好了 ，里面 放 ul 和 li 注意这是 tab栏切换布局
- 2 号盒子 命名为 tab_con 里面还包含 很多个ul.item 和 上面的 tab_list 里面的li一一对应。
7) detail 布局
- 1 号盒子 命名为 detail_tab_list 给高度就好了 ，里面 放 ul 和 li 注意这是 tab栏切换布局
- 2 号盒子 命名为 detail_tab_con 里面还包含 很多个ul.item 和 上面的 tab_list 里面的li一一对应。
12. 注册页面 register
注册页面
| 名称 | 说明 |
|---|---|
| 注册专区 | registerarea |
| 注册内容 | reg-form |
| 错误的 | error |
| 成功的 | success |
| 默认的 | default |