尚硅谷前端基础 (114)

好，那么关于我们这个小米这个官网的这个练习的话，我们就呃，暂时就算是告一段落了啊，就做完了。但是呢，还有一些问题呢，简单的呃，做一个补充，什么问题呢？第一个问题就是我们要看一下我们这个网站的话，大体上跟我们这个官网是一样的，对吧？但是实际上还有一些细节地方，我们要说一下，打开我们小米官网，我们来看一下啊，小米的官网出现了以后，其实我们主要就说这一点，你看在这儿我们的这个标题栏，这是一个小地球是吧？在小米官网这个标题栏呢，它是一个小米的一个logo，对吧？那这样的体验就像我们这种体验就不太好了，那我现在比如说我也想把我这个东西改成这个logo，那要怎么办呢？啊，那要怎办呢？那这个里边啊，我们在这儿来说一下，在上边来说一下。这是什么呢？这个东西我们叫做一个网站呢，它属于一个这个收藏的一个图标啊，我们来说设置什么呢？诶设置我们这个网站的一个图标啊，网站图标这个图标栏主要其实主要作用它会在什么呢？在我们这个标题栏和什么呢？和这个收藏栏显示，也就说你你再去收藏我这个网站，或者去看我这个网站，它在标题栏上会显示这样一个这个图标啊，那这个图标我们怎么设置，非常简单，你就是整一个图片，然后我们这用一个link标签，Link标签呢，这个时候rel你就不能写style shitet了，你应该写的是一什么呢？叫做一个icon啊，就一个写的这个小图标，然后他的这个地址写的是什么呢？写的是我们这个图片的一个路径，你就说在这儿，你实际上要给他提供这么一个小图标，那这个图标一般在哪儿，哎，要注意了，我们这个网站的图标，诶，它一般都存储在我们这个网站的。

根目录下啊，根目录下名字一般都叫什么呢？名字一般都叫做我们叫做一个fe，都叫做叫做fav，诶叫做fe啊fe I诶点一个icon啊，点一个icon，一般都是叫这个名啊，一般都叫这个名，所以这个时候你要想找这个图片的话，你直接找到根目录，你直接打一个斜盖，哎，Vvi点一个ICO，点一个ICO回车，那这个时候你就一一般情况下啊，一般情况下都会有这样一个图片啊，这个图片我们直接右键给它另存为存到我们的桌面上，图片整过来以后呢，我们给它拖过来。

这个图片一般比较小啊，一般比较小，呃，如果你要想自己制作这个图片的话，也很简单，直接去网上一搜，制作这个ICO图片，它会有专门的网站去制作，你可以自己看一下，我们的课上我们就不说了，然后的话，其实我们也最好呢，就把这个图片放到根目录啊，直接放到网站根目录下边啊，那这样的话我们就直接引一下就行了啊，直接来一个点上鞋盖，点上鞋盖我们来一个这个favoritever的一个ICU，这样我们来看效果，然后诶，你看这个图标是不是就做过来了，哎，这个作就过来啊，所以它的用法非常简单，就是通过这个来设置啊，你要是忘了，你说老师不行，你这玩意儿记不住，记不住，还是那句话，我们网网站是不是现成的呀，你忘了，你忘了直接查看一下它的网页的源代码，你是不是可以看看它是怎么设置的，哎，你看看他这里里边有没有link reli con是不是它这就有现成的呀，哎，有现成的你可以，你说你实在忘了，你可以直接照着他这个写一个是不是就OK了。

哎，就OK了啊好，这是网站的一个收藏图标，这个问题不多说了，然后再往下说啊，当然这个像轮播图的一些动态效果我们就做不了了啊，通过GS来实现，再往下说的话就是一些呃琐碎的问题了，那这里边我们拿我们这个CS的举例子，CSS我们这现在有三个，有base.css index.css，还有reet.CS，我们有三个CS的文件，那这里我们要强调一下，我们在做这个项目的时候，或者说我们这个项目在上线的时候，对吧？我们项目有一个比较重要的东西，就是一个访问速度，也就是说我的用户需要多长时间才能把我的项目给它加载出来，诶这时间越快，我们用户的体验是不是就就越好啊？诶所以我们会有一个要求的一个时间，那这里边呢，实际上我们做完项目的话，不仅仅是要把功能完成，我们还需要干嘛呢？哎，我们还需要让我们这个项目尽量的小啊，尽量的小，我们要尽量的小，我项目越。

小，那么用户加载速度是不是越快啊，那用户加载速度越快，是不是用户的体验就越好啊，啊就越好，所以这个时候我们在写完一个项目的时候，往往我们还需要对我们项目中的代码进行一个压缩，怎么叫压缩呢？诶比如就是把我们项目当中没用的那些东西全都给删除，什么是没用的，就是你像注释对于我们代码来说有没有用，没用，它是我们写的时候有用，但是项目真的上上线的时候，对我们用户来说它是没有用的，所以像这些注释我们一般都要删除，对吧？一个注释还有什么，你看我们代码里边是有一些换行，有些空格啊，这些换行和空格我们一般也需要给它删除，那总之就是把那些代码无关的，只是为了好看，为了格式，为了说明的这些东西全都要给它删除，但是这时候也会产生一个问题，那你像我们写这样，这这这这这赛好说，那我们自己写这个，你看这写的也不多是吧，不到500行代码，那你要自己去删这个注释，去删这些空格，这玩意儿是不是有点有点麻烦呀。

哎，有点麻烦，所以这个时候我们就需要一个工具，一个什么样的工具呢？一个可以帮我们对代码进行压缩的一个工具，诶所以这个时候我们就要装一个插件啊，点击我们这个扩展啊选项，直接就是搜，搜一个CSS，搜完CSS呢，那这块就是跟这个CSS相关的插件呢，都会给你显示出来，那这里边我们要用的是一个叫做的这个GS and的CSS，一个这个诶mini份，Mini份就是一个什么呀，就是一个这个最小化就是一个这个就是一个这个压缩的意思啊，就是一个压缩的意思，我们这个软件怎么用，你选中这个插件，然后直接点击这个install，稍微等一下就很快就安装完了，安装完了怎么用啊，安装了怎么用它这个用起来其实不是很智能，我们以后会有更强大的工具啊，这个我们先介绍一下啊，比如说现在我想压缩这个index.csi怎么办？摁你键盘上的F1啊，你键盘。

上了F1，然后你就直接打mini fat mini five就是小是吧，就是小，然后这有一个叫做mini five document啊叫什么呀？压缩文档啊，压缩文档直接选中它，选中它，然后这个时候你会发现什么呢？你点完它以后，你在你的页，在你的文件夹里会多出一个index.min.CSS min就是压缩的意思，就是最小的意思，那这个就是一个压缩后的文件，那我们来看一下压缩完了以后干嘛了，我们的代码是不是只剩一行了，哎，只剩一行了，就是说他把我们代码里边的什么注释啊，什么换行啊，这些东西通通都给删除了，哎，让我们代码有一个最小的状态，同样你要想压缩贝也是一样的，F1直接来一个，你看它有历史记录了，你直接回车，它就会自动压缩了。re，也是一样，F1，然后你输入一个这个mini five直接压缩，然后就变成最小了，对吧，变成最小了，然后你要用的话，在页面里你就可以改一下了，你就可以不用这这种方式去引了，你可以直接用什么呀？诶直接用那个压缩后的。

的。哎，在终端了，在我们的资源管理器中打开，我们来看一下，原来三个文件啊，正常的三个文件没带min的，正常的是10.3K，压缩以后的呢，是一个什么呀？哎，是一个5.67K，那基本上压缩到了一半，当然现在我们的文件还少，文件越多压缩的这种略越大啊，越小，那文件越小，我们的访问速度就就越快啊，就越快这么一个东西，当然这个东西其实用起来不是，呃，不是很方便啊，不是很方便，我们还得手动压缩，以后我们会讲一些更高的开发工具，那到时候会有一些更高级的压缩方式，那现在这个方式先理解一下，你要知道代码是需要压缩的啊，需要压缩的好，那我们的整个项目这个时候就算是完成了，那我们前边这一段知识就算是告一段落了，那我们待接下来就要开始要讲我们的CS3的一些其他的，哎像动画呀，哎像这种过度啊，哎像这种3D2D的一些效果呀，还有像一些其他的布局，包括我们移动端下边我们要进。

入一个新的阶段了，所以你们再往下进行的时候，还是先把项目做完，然后咱们再往下进行，好先说这么多啊，我在下一阶段去等你。