当前版本号[20231108]。

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

所插入的图片及文字图标如下分布：

• xtx-pc

1. images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
2. uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
3. iconfont 文件夹：字体图标素材
4. css 文件夹：存放 CSS 文件（link 标签引入）
5. • base.css：基础公共样式
   • commoner.css：各个网页相同模块的重复样式，例如：头部、底部
   • index.css：首页 CSS 样式
6. index.html：首页 HTML 文件

引用所有我们需要的css进来。

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

1. 竞价排名

2. 将网页制作成html后缀

3. 标签语义化（在合适的地方使用合适的标签）

4. ……

   网页头部 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、最后修改完成。