当前版本号[20231108]。
本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。
所插入的图片及文字图标如下分布：
- xtx-pc
- images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
- uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
- iconfont 文件夹：字体图标素材
- css 文件夹：存放 CSS 文件（link 标签引入）
-
- base.css：基础公共样式
- commoner.css：各个网页相同模块的重复样式，例如：头部、底部
- index.css：首页 CSS 样式
- index.html：首页 HTML 文件
引用所有我们需要的css进来。
SEO：搜索引擎优化，提升网站百度搜索排名
提升SEO的常见方法：
-
竞价排名
-
将网页制作成html后缀
-
标签语义化（在合适的地方使用合适的标签）
-
……
网页头部 SEO 标签：
• title：网页标题标签
• description：网页描述
• keywords：网页关键词
示例SEO标签：
Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。
图标：favicon.ico，一般存放到网站的根目录里面
版心
wrapper
版心宽度：1240px
可见我们的版心配置正确：
快捷导航（shortcut）
结构：通栏 > 版心 > 导航 ul
布局：flex-end
1、我们需要的快捷导航的区域是集中在粉红色的部分右边。此时需要通过来实现的。
2、插入导航栏的文字，并放置于一行里，设置好内边距。
3、再加上右边距。
4、把最右边的边去掉。
5、进一步修改，把字体大小及样式改变了。
6、加上手机的字体图标。
7、图标与旁边的文字增加边距和进行对齐。
8、把粉色背景注销掉，并把首个标签颜色变为绿色。
头部（header）
结构：.header > logo + 导航（nav）+ 搜索（search） + 购物车（car）
1、同时也需要对齐版心，在居中的位置。
2、使用外边距，给上下都加上距离。
3、把头部分几个位置。
logo
1、为提升搜索排名，可以使用标签语义化：
2、加上logo背景图，
导航
1、首先把导航的文字弄出来。
2、把两端距离拉开。
3、加上右边距。
4、加上鼠标浮在上面的前后背景色。
5、再把背景颜色注销即可。
搜索
1、画出下划线，做出搜索栏。
2、插入字体图标。
3、改变字体大小和颜色。
4、把背景颜色注销掉。
购物车
1、发现没有对齐，在太过于上的位置。
2、改变字体图标的大小。
3、子绝父相（对齐方式）
4、修改好样式与字体大小。
5、但我们发现，选择right，数字一多就会往左走。
6、而如果选择left，向右走。
7、用两张图来更清晰地看出两者的区别：
8、最后修改完成。