尚硅谷前端基础 (145)

好，接下来我们来介绍完了，我们这个媒体查询呢，接下来我们可以利用我们这个媒体查询来做一些呃小的练习啊，我们来尝试着做一个响应式的一个这个设计的网站，那这个时候我们在做的话，我就不再做整站了，因为你做整站的话，其实它的整个套路吧，并没有那么难，只不过就是你在做的时候需要考虑一下它不同分辨率的时候的一个一个布局，一个样式，那我们这儿就做一个示例啊，做一个示例，那这块我看到了一个，呃，相对来说比较适合我们去做的啊，我们这是一个这个美图，呃，美图美图的一个官网是吧，美图手机的这么一个官网，那它的这个官网的话，我们上边你看它这个网站就是一个响应式的网站，当我们的网页比较小的时候，你看它这个布局是不一样的，对吧？诶点开的话，菜单就会隐藏起来，当我这网页比较大的时候呢，诶它它又变了一个布局，很明显，你看这个图片是不是一直在一直在变呀，啊一直在变，所以我们就来做一下这个，这个的话我们做也不做整站，我们就做一个它的这什么呢？它的导航条啊，它一个。

导条其实你做到现在，其实你也会发现一个网站其实比较复杂，其实导航条是比较复杂一个东西，你像我们之前做那个那个那个小米导航条是不是做了半天呀，哎，所以导航条相对来说是一个比较复杂的，所以你把导航条它的这个响是原来给整明白了，下边其实也就是一样啊，就一样，那这里边呢，我们要做这个东西的话，我们来，哎，我们来先创建一个网站，创建一个页面，我们直接在我们这个练习里边创建啊，直接新建一个文件，我们来一个18，哎18呢，这儿我们来写一个啊，我们这是美图的一个手机啊，美图吧，美图点一个A码，诶我们就做一下它这个导航条，那这里边呢，我们结构写一下，那这块呢，它是一个PC端的是吧，P端我们给它引入一下我们这个东西，只要就是我们在去引的时候，引我们这个CSS，引我们这个点CSS的时候，你要注意我的惯是什么呢？如果是PC端，如果你这个网站需要在PC端用，那这个最好重置一下，如果不需要的话，那你所。

直接星号上零也可以啊也可以，那这里的话我们要做这个导航条，我们来看看我们要怎么做，那当然我们这里边要做它的话，我们最好也是通过这个lesss来Les来做啊，Les来做，Lesss来做呢，我们来创建一个新的文件夹吧，我们叫一个美图，美图呢里边我们直接创建一个新的一个这个文件，我们叫做一个stylele style点一个lesss啊style.lesss然后呢，我们在这来引我们这个less文件啊，我们直接来一个link，诶link link引入我们这个点一个这个美图下的一个style.css，同时我们这里边肯定也要用这个图标字体，图标字体我们也引入一下，哎，我们这个是一个斜杠FV下边的一个这个O，这个什么呀，CSS叫做一个o.min啊，我们直接引入这个压缩版本，那这样我们这个文件就引入掉了。引入这个来，这个结构基本上这样了，然后我们再less时可以直接去写代码了，写代码的话我们先来写，说一下这东西我们要怎么写，那注意了，我们在写这种响应式的网站的时候，我们在写这个响应式的网站，响应式设计的一个网页啊，我们这个时候我们有两个这个两个原则，第一个我们叫做一个移动端优先啊，移动端优先什么叫移动端优先，因为我们这个是整个是一个响应式设计，响应式设计它就会有一个屏幕比较宽的情况，或者还有一个屏幕比较窄的情况，它是有不同屏幕宽的情况，对吧？那我们写的时候，我们肯定是一个个写，你不可能说我一下把所有都写出来，那除非你这个你写的特别多，你这东西写的已经很熟了，你可以这么写，那一般情况下我们都是要什么呀，你要先设计的一块，比如说我先把移动端的写出来，或者我先把我们这个PC端的写出来，都行是吧，都行，那这里面我们就是先干嘛呢？哎，我们现在这种设计原则基本上都是移动端优先，因为。

现在移动互联网比较发达，一个网站的话，基本上其实你们想一下，一般的用户其实像电脑的话，平时很少用，现在基本上主要都是使用什么，使用手机了，所以这个时候我们再去设计一个网站的时候，我们先来干嘛，我们先来设计一下我们移动端时候的一个情况啊，我们先把移动端这个情况给它设计出来，然后我们在干嘛呢？哎，第二一句话，我们叫什么呢？哎，我们叫做一个渐进增强，渐进增强什么叫渐进增强，也就是说我先移动端优先，也就是我写这个网页的时候，我先按照移动端的效果去设计，也就说我这个我要我要确保它在移动端里面可以正常去显示，然后渐进增强，我一点一点的再去增强它这个，诶，Pec端的一个功能，懂意思吧，诶移动端邮件，所以这个时候我们在写它的时候，我们还是直接以这个移动端的页面，就是说最小的这个情况，哎，我们作为一个参照来写这个东西，那首先你这一看这个移动端这块效果。

其实这简单了对吧，哎整体一个结构很简单，整个的话是不是一个这个容器啊，哎容器然后里边分成了三个部分，哎这儿一个这个菜单，这一个这个logo，诶这儿又是一个这个菜单，对吧，这两个菜单是不是都可以去诶展现内容啊，诶展现内容是我们这两个部分，那所以这里边我们写的话，我们先写我们这个结构，整个外层的话，我直接给它一个div，或者我给它一个na也行，我们写个div吧，Div我们给它class，我这个就叫做一个top top啊顶部的一个工具条啊top，然后呢，它里边实际上整体来说是分成了三个部分，三个部分这个左边是一个这个菜单，哎，Div，我给它来一个这个life的menu嘛，Me nu啊nu，诶左侧的一个菜单，然后呢，中间的是一个我们这个logo啊，我们这儿直接接logo了，给他一个H1，我叫做一个这个logo啊logo，然后右边的话是我们的一个这个用户的一个信息，对吧，是一个用户的图标，那这里边我们就直。

再给它来一个div，我们给它来一个class class，我们这叫做一个US1USER字的一个音符，哎，那现在我们整个这三个块就整出来了啊，这个我们这是什么呢？这个是我们这个外部的一个容器，外部的容器这个呢，是我们的这个左侧的一个菜单啊左侧菜单，然后这个呢，是我们的一个什么呀，是我们的这个logo啊，Logo最下边这个是我们这个用户的一个信息，用户的信息啊，整个分成了这么三个三个部分啊，三个部分然后的话，我们来填充它里边这个内容，首先呢，我们来看这个menu啊，这个菜单啊，左侧这个菜单，我这一点它实际上底边是不是会有一个这个等于是有一个这个弹出层啊啊有一个弹出层，你一点它就可以出来啊，你点它就可以出来，那这个东西咱们要注意了，这个效果现在是在这个移动端实现的效果，那我们要实现这个效果，我们必须得使用。

GS必定使用GS，没有GS这个东西我们做不出来，没有GS做出来，因为它一点击状态是不是发生变化了，哎，我们必须要结合GS去使用，但是现在我没有GS，没有GS我们就只能去模拟一下了，我们只能模拟一下，那比如说我可以模拟什么呢？哎，当我点击的时候，哎，当我去active的时候，或者当我鼠标移入的时候，我是不是弹出这层啊，哎，我弹出这层啊，所以这里边这个东西我们只能模拟一下它的下拉层，实际上有两个，一个是我们这个菜单，还有一个是我用户这个两个菜单，两个菜的话我们就做一个，我就做左侧这个，右侧我这个不做，到时候你们可以自己做啊，为什么只做左侧，因为左侧这个菜单现在我是通过它展示的，当我们屏幕一大以后，这菜单是不是跑这儿来了，但那那那块不是就没了，哎，那块没了，因为它有一个响应式的一个变化，而这玩意儿它就一直就那样，对吧，它没有变化，所以为了体现出我们这个响应式的一个效果的话，我们在这里面我们就做这么一个设计啊，这么一个设计好，然后呢，我们来看一下这一块。

整完了我们先给它叠回来，叠回来以后呢，在这儿我们来看，嗯，现在的话我们整个这个整完了是吧，我们要整这个东西，这个东西它有一个点开完了以后展开它是不是有一个这个隐藏菜单啊，哎隐藏菜单，隐藏菜单呢，咱们先不看，然后这里边我们这按钮是不是它可以有一个这个，诶你看这是不是有一个可以有一个有一个小动画呀，哎，这个小动画那本来如果你只是一个简单的这种三明治的菜单的话，我们就用一个图标字体去做就行了，但是你这有了一个动画效果，那这个动画效果实际上我们这里边要做要怎么做呢？哎，实际上那这个东西实际上它是用一个用这个纯CSS去实现，那这个东西怎么做啊，我们现在在这先做啊div，我们上边写一个啊，创建一个什么呢，在这啊，我们来创建我们这个什么呀，哎，这叫一个，诶菜单的一个图标，菜单的一个图标，也就是说我在这儿呢，专门创建一个东西用来表。

制了一个菜单，我叫一个div，我们叫做一个这个MU menu的一个icon，诶菜单的一个图标这个东西就表示它，那这里边它里边实际上包含了有什么呀，有三条线对吧？有三条线的话，那实际上这我其实最好我就直接写上了，我就直接用ul了，三条线嘛，诶三条线一个Li是一条线，那待会儿我通过什么呀，CSS来给他们设置这个设置样子，哎，并且来给它去添加这个什么呀，添加这个动画效果啊，还有一个这个动画效果，这是一个问题，然后呢，我们整个这个菜单的话，它这里边我们点完了以后，它里边是有一个这个弹出层的，对吧，弹出层我们要给他写一个，那这一块我们还是那句话，我们现在设计的话，我没有办法用这个CSS，没有办法用GS，所以我们还是只能用一个这个纯什么呢？纯这个csi的手段，所以在下边我们再创建一个什么呢？哎，创建一个我们这个菜单，这个菜单呢，我们直接来一个u lulu呢，给他一个class class，我们。

叫做一个，这个叫做一个navy吧，我们的一个导航嘛，它也算什么叫主导航了，这里边的话我们来看一下这么几个部分，第一个呢，是我们一个手机，我们就直接写就完事了，它比较简单。

手机，然后呢，下边一个我们叫美容仪器啊，美容仪器我们直接复制几个啊，一个246个。第二一个我们叫做美容仪器，美容仪器，然后第三一个叫做什么呢？叫做这个配件配件，第四一个叫做服务支持，第五一个叫企业网站，嗯，下边一个叫做一个搜索，我们看一下这个玩意儿好像，呃，这个东西好像跟别的不太一样，别的那些呢，都是一个超链接都能点的，但是这个搜索这个它不是超链接对吧？所以你看我鼠鼠标一上去不变形，诶这玩意儿啊，这放大镜是个链接，但是这个字是不是不是链接呀，哎，所以这个时候呢，最后一个我们简单一点，最后一个的话，我在里边啊，放一个放大镜的图标。

在这个A里边放大放大镜的图标的话，我们直接给它来一个爱标签class，我们叫一个放大镜呢，我们应该叫一个SE ch search嘛，对吧？搜索啊，我们看看有没有search啊，就这个东西我们直接给它放过来就行啊，CTRLCCTRLV放过来，这个图鸦有了，但是下边呢，它还有一个这个字是吧？搜索这个美图点com，我们那这个东西它不是一个超链接，不是超链接的话，这个字的话，我们就不给它放到A里边了，我们给它放到什么呢？放到A外边，我们在这个A里，诶这个Li里边最后一个Li，我再单独放一个span，这个叫做一个搜索这个什么呢？哎，Me Mei tu.com啊，搜索美图点com是这么一个文字，那这样我们这个菜单的结构是不是就整完了，哎，菜单结构整完了，菜单的结构整完了以后，然后中间这一块是我们的一个这个logo logo的话肯定得能点，我们直接写一个A标签，诶链接到一个主页，然后里边呢，我们给他写一个字吧，写一个字我们就叫一个。

这个美图，美图的一个手机，这个图片，待会儿我们再设置，我来把这图片先给它拿下来，这图片我们来看一下它啊，直接点中它，看它是什么东西，最大化一下啊。它这个图片这个A标签，A标签我们看一下在这呢，它这里边用的是一个雪碧图去做的一个图片，对吧，我们把这个图片给它存出来，图片另存为存到我们的这个桌面上，存到桌面上呢，我把它拿过来啊，拿过来在这里边我们创建一个文件夹，新建一个文件夹。文件夹，这时候我们该18了啊18，然后我把这个图片呢，给它拖过来，它这个的话，你要注意一下，它这个后边给你标识了，给你写了一个二倍图，看到了吗？艾特一个二叉，二倍图就意味着它这个图标应该比它那个真实的大小大了什么呀，大了一倍，大了一倍，但是我们做的时候就给它，给它缩小一下啊，给它缩小一下，待会我们再找啊，待会再找，然后往下我们来看。

整个这个图我们给它引入完了，然后的话，我们来看一下这个，待会我们再通过这个，呃，通过这个CSS再来设置它这个logo的一个样式啊logo的样式，那这一块等于我们中间这个部分就已经完事了，对吧，中间这部分就已经完事了，然后再往下是我们右边中间这部分，它就一个logo嘛，它也没别的东西啊，然后就是我们这个右边，右边的话是我们一个是一个这个用户信息，用户信息呢，这一块它也是一个超链接，那我们就直接写一个A标签了啊，是一个超链接，我们直接写一个这个井号，然后里边是一个用户信息，我们给他放一个这个图标字体class，我们叫一个as个我们图标字体的话，我们这应该是一个user，应该是有的USER1USER，我们看看user是不是在这儿呢，当然它是一个实的是吧，是一个实的，这里边我们直接给它粘过来，然后这个东西我们就设置完了，看效果，我们洗完的这个效果啊好哎，我们洗完了是是这个效果对吧，当然跟我们预期那个东西还差的比较比较远，但是结构上。

基本上就这样了啊，我们待会儿再一点点的去给它，哎写，让他把这个样式跟我们这个原来网站越来越越来像啊，慢慢我们再去完善它，好，那这一块我们处理完了，然后呢，我们先先停一下啊，待会儿我们来写它的一个样式啊，写的样式。