B站《前端Web开发HTML5+CSS3+移动web视频教程》第九天和第10天的课程：SEO、Favicon、小兔鲜网页制作。
一、项目目录
1.根文件夹xtx-pc
2.子文件夹
- images文件夹：存放固定使用的图片素材
- uploads文件夹：存放非固定使用的图片素材
- iconfont文件夹：字体图标素材
- CSS文件夹
- base.css：基础公共样式
- common.css：各个网页相同模块的重复样式
- index.css：首页样式
3.index.html
二、准备工作
1.SEO三大标签
①SEO：搜索引擎优化，可以提升网站百度搜索排名
②提升SEO常见的方法
- 竞价排名
- 将网页制作成html后缀
- 标签语义化
③网页头部SEO标签 - title：网页标题标签
- description：网页描述
- keywords：网页关键词
SEO内容是SEO工作人员给的，网页制作的时候根据提供的内容填写。
④小兔鲜网三大标签存储在素材文件夹下的SEO.text文件中
2.Favicon图标
①Favicon图标：网页图标，出现在浏览器标题栏，增加网站辨识度
②由设计师提供，存放在网站的根目录中。
③用link引入 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
三、流程
设计稿是素材/小兔鲜PC首页/index.html
1.版心
版心宽度1240px
2.快捷导航（shortcut）
①标签结构：通栏>版心>导航ul
②布局：flex右对齐：flex-end（主轴对齐方式）
③顶部各个小标签的右边有一条竖线，可以看成是右边框线，因为和字体一样高，属性设置给a，小标签之间的距离用a的右内边距实现，
3.头部（header）
①结构：.header>.logo +导航（.nav）+ 搜索（.search）+ 购物车（.cart）
②在制作搜索的时候，发现导航区域文字转行，是因为导航区域是弹性盒子，最右边的购物车区域原本是图片，但是测试的时候写的是“购物车”三个字占的空间太大，挤压了前面弹性盒子的大小，使得空间变小，文字转行。
③浏览器在解析input时，优先生效input默认的宽高，通过CSS默认重置宽高。添加width：0；
4.底部footer
①标签结构：通栏>版心>服务中心+帮助中心+版权区域
②在制作底部的版权结构的时候，因为是网页的最后一部分，可以不用考虑搜索引擎优化，所以a没有嵌套在li里面
5.banner区域
①结构：通栏（.banner）>版心>左侧导航(subnav>ul)+轮播图(ul.pic)+圆点指示器（ol）
②flex布局，父级宽度不够，子级被挤小，增大父级尺度
6.新鲜好物
①结构：版心>标题+内容
②多区域样式共用
7. 热门品牌
①标题结构：左侧(left) + 右侧箭头（显示在标题外部，定位）
②父级和子级都设置margin时，会出现外边框塌陷，可以在父级设置overflow：hidden解决
8.生鲜（fresh）
①标题结构：右侧（.right）>菜单（ul）+查看全部
