尚硅谷前端基础 (102)

好，那我们在着手去做这个项目之前呢，我们先来看一下啊，看一下你在真正开发的时候，你也会拿到的是一个设计图啊设计图呃，差一点的可能是草图，对吧，正常一点的都会给你一个PID的一个分层文件，也就说你这个图的话，你大概你得知道是什么样，那这个时候拿到这个东西啊，你别着急动手啊，先把这个啊，你要给它看一下啊，你要看一下，你要知道一下我这个图的大概的一个这个结构是什么样的，那这里边呢，我们来看一下我们的这个图。首先呢，它这个图啊，整体上挺宽的，是不是要有这么宽呀，哎，有这么宽，但是这个时候你做网页的时候，你一定要注意它整体上有这么宽，但是你要注意它显示我们主要内容的区域是不是这么宽，也就说是不是全屏的，诶不是它的主要内容的区域是不是只有中间窄窄的这一块，诶窄窄这一块，这也是我们大部分这个商业网站的一个设计特点，就是说它的内容的区域的宽度是固定的啊，只是某一个位置它的宽度是固定的，它不会设一个全屏的，为什么？因为现在的显示器越来越大了，它如果真的设置一个全屏的，如果你那个显示器特别宽，这个网页你会看起来会特别的累，因为我们是视线，视角是有有限制的，你如果网页做的特别大的话，我们看不全，就就就就就得就得转脑袋看，所以很累，所以基本上都是这么一个，我们会有一个固定的宽度，可能之前比较早的时候，可能我们是一个是一个这个呃，960的宽度是吧，现在可能。

可能1000啊，一千零一千零二十是吧，都有1000左右，现在主要主流的话就1000啊，一千二大概这么一个宽度，所以你在做这个网页的时候，你先确定一下这个网页的一个主要区域的一个宽度，它是多少，你先要把这个宽度给它干嘛呢？给它确定掉啊，给它确定了，那这里边它的一个宽度，其实我在这儿已经标注了，是一个什么呀？是一个1226，也就是说你看它中间所有的这块是不是都是在这1226像素当中啊，哎，所以对于它来说，它的主宽度就是一个1226，那以后我们像我们中间这容器，那宽度一定都是1226的，所以这个时候我们为了干嘛呢？我们为了设置的方便一点，所以这个时候我们来，诶，我来专门设置一个类啊，设置一个类用来什么呢？诶，用来表示我们这个中间这个什么呢？容器的一个宽度啊，所以我们在这儿可以写一个类，比如说你可以用counter，诶比如说我更习惯用一个简单。

就是一个W，哎W表示什么呢？哎，你可以理解成是我们这个哎Y啊，Y是我们屏幕的一个宽度，那这个时候W的作用就是什么呢？就是我要用这个类来确定我们屏幕的一个宽度，那我现在在这一个宽度是什么呢？这一个宽度我现在的宽度就应该是一个1226个像素啊，1226个像素，那这样的话，我写完了它以后，谁再想把宽度定下来，你就直接把这个W这个类一加，是不是就达到这么一个效果了，哎，并且宽度是固定的，而且它整个是不是还要在我们屏幕当中是一个居中的效果呀，哎，居中的效果，所以我们把那玩意儿也写上，我们叫做一个margin margin我们来一个零，然后来一个凹凸啊凹凸，所以啊，这是什么呢？哎，固定我们这个容器的一个宽度啊，这个玩意儿呢，诶这是固定，诶设置我们什么呢？设置我们这个容器居中啊，设置我们容器居中那以后。

再遇到什么容器，直接把这个marin给它一加上就OK了啊，就OK了，然后这里边我们还要注意它还会存在一个问题，什么问题呢？现在的话，我的这个W是设置了我们中间这个容器的宽度对吧？中间这个容容器的宽度，那实际上我们这个容器它是不是在我们这个body的里边啊，哎，Body里边，那这个时候就会产生一个问题，我的容器宽度我给它固定了是一个1226，但是我们包的宽度，当你屏幕缩小的时候，你的包的宽度是不是就会变窄呀？哎，包的宽度变窄就会导致这个内容从这个包的里边溢出啊，从这个包地里边溢出就会出来一块，所以这个时候也可能会造成一些不太好的体验，尤其是当你屏幕变小的时候，可能你整个布局就变乱了啊，就是子容器一出了，可能就出现滚动条，或者出现什么一些其他的不太好的效果，所以这里边像我们这种屏幕，我们要求你看他这写了一个M。

是一个1226，什么意思呢？Min外min就是最低的，最低宽度是一个1226像素，也就是说对于包地来说，我这个包底的最小宽度就是1226，那什么最小什么意思？哎，就是说你大它可以变大，但是当你太小的时候，你现在看现在是1572啊，你看这个右上角这1564啊，我可以再去缩小，再去缩小，现在是1400，你看这包Y是不是随时在改变呀，你看一下包Y的宽度，包迪现在是不是1300，诶，1343，你看我再调是不是可以放大呀？哎，但是当它小到什么呢？比那个1226还小的时候，它还会不会再缩小了？哎，就不会再缩小了，所以我们要给包Y加上一个M外，诶，Min mean外写什么呢？也是1226个像素，那它是什么作用，它的作用就是不让你这个body变得过小，导致这个容器溢出啊这么一个。

度，所以我们等于又添加这么一个基础的样式，然后给body，哎，Body又限制了一下这个宽度啊好，那接下来我们回到我们的页面中，我们开始写我们页面代码，那还是我们一块一块来写，哎，我们先写什么呢？诶先写上边这个，诶然后写我们这个，诶下边这个，然后再往下，哎，一块一块慢慢来细啊，慢慢来洗，好那接下来呢，我们就先看上边这条，呃，上边这条的很典型，诶上边肯定最外层是不是要有一个容器啊哎，最外层要有一个容器，这个容器的宽度是一个全屏的啊，屏幕多宽它就多宽啊，屏幕多宽它就多宽，然后在屏幕里边，很显然的是它这里边会有一个这个div，对吧？这个div它是干嘛的呢？它是用来呃居中的对吧，就是实际上显示的内容是在里边的，所以现在能确定的是我们外围容器，呃两个，一个是我们最外边的一个，它就是负责外边。

一个背景对吧，还有一个是我们里边这个核心的容器是我们这个div，这个div我们要设置的是一个那个W那个类，然它是一个1226个像素，然后还要居中啊居中，然后在上边这个工作这个这个条里边是吧，这个导航条里边，它实际上有这么一块，有这么一块，还有这么一块，是不是等于有三个部分，哎，有三个部分，但是这块其实你也可以分成两部分，这一部分，这一部分是吧，你也可以分成两部分，但是现在现在的话，这个东西其实也没有什么固定的分法，你说我分两部分和三部分都一样，那其实是无所谓的啊，其实无所谓的，但是这里面呢，我看的这个购物车呀，跟这个登录注册呀，他们的关系呢，它并不是那么的紧密啊，它并不是那么的紧密，所以这个时候呢，呃，我从这个结构上来讲，我更倾向于分三块，一个是这个玩意儿，一个是这个玩意儿，还有一个是这块啊，我更倾向于分三块啊，分三块然后呢。

这是一个ul，哎这儿呢也是一个ul，呃，至于这个购物车的话，你是放一个ul还是放一个这个div的话，其实无所谓，因为它只有什么呀，只有一个叭较省事一点，叭事一点，所以呢，基本上这个结构我们就基本上就定出来了啊，我们一点点写一下，首先呢，哎，我们这儿先创建我们这个顶部导航条啊比导航条那第一个我们这儿是一个，我们这是一个什么呢？哎，我就写一个顶部导航条，第一个我们写的是一个外部的一个什么呢？顶部导航条它的一个外部的一个容器，外部容器的话是div，我们就叫一个叫做一个这个top top的一个rapper wi，诶我们就叫做一个。

嗯，Top bar的一个rap RA呀，Rapper这个名感觉有点长是吧，但是长一点就无所谓了，长一点的话我们看的清楚一点，我就连着写了，叫top bar top bar rapper，这是我们顶部导航它的一个外部的一个容器，啊，外部一个容器，然后在这儿我们来创建什么呢？诶创建这是我们的内部的一个容器，内部容器我给它两个类，一个我们就叫做一个top top还有一个类呢，是我们这个W，因为待会我们要它居中是吧，让它居中这个我们可以先不写啊，先不写，先空着，待会我们再说，然后div里边，我们这里边左边的是一个这个ul，呃，左边的是一个ul，我们直接写上ULUL写上以后的话，我们来看一下它里边的话是几个这个菜单，菜单的话有什么小米商城，米UI什么lott，云服务是不是等等有一系列东西啊，哎，一系列东西我给起个名吧，Glass这个名我们叫做什么呢？叫做一个service吧，哎，S。

SE service啊，小米给我们提供这个服务，然后里边是几个链接，链接就比较简单了，直接Li里边放这个A就就完事了啊javascript冒号分号，Javascript的冒号分号呢，我们第一个是我们那个小米商城。小米商城，小米商城写了以后你要注意了啊，你看我的每一个链接之间是不是还有一个这个竖线给它隔开呀，诶这个竖线给它隔开，这个竖线呢，也可以用我们之前京那个手法，我直接写一个这个边框，呃，然后给它设置一下，用京东那个也也可以，或者呢，我们在键盘上，我直接其实就有一个什么呀，有一个竖线就在那个回车的上边，你shift就出来了，对吧，你也可以这么写，我直接来一个L，然后shift加这个竖线，这样也行啊，这样也行，两种方式，用哪种方式呢都可以啊，用哪种方式都可以，那之前我们那个直接整一个元素那种方式我们也用过了，对吧？用过了那这里边我们就换一种方式啊，我们用一个这个竖线来表示这个东西啊，我们给它加一个单独class，我们叫做一个烂啊，避免待会儿它有特殊样式，我们需要设置，然后再往下的话。

我想一下用不用单独给他加。嗯，他应该就不用加了，我们就加这么class就完事了，因为待会儿应该不需要单独选中这个LY啊，所以单独给他加一个就行了，然后我这一共有几个，数一下一二三四五六七八九十十一十二，一共12个。

复制一下，这是二三四五六七八九十十一十二，最后一个没有数字里边的文字改一下啊。这个没什么难度，写的时候细心点行了啊米UI，然后呢，这个是我们叫做一个lot后呢，这个是我们的一个叫做云服务，第三一个我们叫做一个金融，然后这个是我们叫做一个油品吧，挡住了油品，然后呢，这个叫做一个挟挟开放平台啊挟开放平台，然后下边一个我们叫做一个企业团购，诶企业团购再往下呢，是我们的一个叫做资质证照。

协议规则下边是一个下载这个APP啊APP，然后呢，最后一个我们叫做select location。SE select location应该是一个国际化的一个东西，选择你的一个地理位置是吧，大概这么一个东西，那这几个呢，我们再看一下官网啊，官网的话应该他们都是超链接，这应该是。你点上去看啊，诶都是超链接对吧，所以我们放到一个A标签里就没问题了，但是下载APP这呢，它还有一个隐藏层对吧？隐藏层我们待会再说啊，待会再说，然后整个这个结构我们就定义完了，这个是我们第一块啊，我们先给它叠起来，这个表示什么呢？表示的是我们左边这块对吧，左边这块，然后右边还有两个，一个是注登注册消息通知，那这个呢，我们就叫做一个这个ul，这个叫什么呀？登录注册消息通知，这个都是跟我们用户相关的，所以我们就叫做一个US12吧，诶，User字的一个啊，用户的一个信息啊，用户的一个信息，用户的信息里面也是放三个超链接，其实跟上面的结构是一样的，跟上边结构是一样的话，我就直接复制三个就完事了啊三个。

CTRLC。跌大发了，找到这个ul啊，给它粘过来，然后的话，这里边是改个名就完事了啊叫登录，这个叫注册，诶这个叫消息通知。消息通知啊，是这么一个结构，然后再往下写的话，我们来接着看。我们接着看的话，我们这里边的话，还有一个下边是我们这个购物车啊，购物车的话，我们再往下接着写，直接来个URL是URL啊，URL呢，我们这给它来一个这个class啊，Class呢，我们来写一个叫做一个，诶叫一个什么呢？诶叫做一个这个shop cart shop cart shop cart里边它的结构比较简单，它就一购物车对吧，但是它有个问题啊，它这个东西本身你要先看一下它这个东西是不是也是可以去点击的呀，诶也是可以去点击的，所以这时候很显然这应该也是一个超链接，也是一个超链接，我们就直接写一个Li里边我们写一个A啊，这也是一个javascript。

Javascript冒号分号，这个我们叫做一个购物购物车，但是它里边还有个图标字体对吧？图标字体待会我们再给它加上，那现在呢，那基本上就这么一个结构，我们就给它定义完了，定义完了以后的话，这里边我们要看一下问题啊，现在我这么写这个结构行不行，当然如果你从仅有的结构上来看的话，这么写也没什么问题，但是你注意有一个问题，我们这个左边这个就在这儿了，没问题对吧？但是右边这两个它是不是在右边啊，诶右边呢，很显然，待会我们写的时候得让这两个是不是向右浮动啊，诶向右浮动，向右浮动的话，那这两个都得是float light float right，那float right你注意他俩的顺序，它在前，它在后，那我如果是向右浮动的话，那注意了，我浮动完了以后，最右边的应该是谁。

哎，最右边是不是应该是它呀，哎，因为这个ul是不是在这个ul的一个上边，哎，那这样就会导致我们这个顺序就变了，或者说你也可以调整，调整起来就很麻烦了，所以这个时候我要调整一下它俩的顺序，我要把这ul放到这个ul什么呀上边，这样我在向右浮动的时候，它就干嘛了，哎就去右边了啊就去右边了，最右边了就不会出现这个问题啊，所以啊这么一个问题啊，待会你写的时候你注意一下就完事了，这里边我们写一个啊，这个是我们这个，诶左侧的一个这个导航条，哎左侧导航，然后呢，这个是我们这个购物车，哎购物车然后呢，这个是我们这个用户的一个什么呢？诶用户的一个登录注册，诶登录注册呀，信息等等一系列东西，然后刚才我们提到这购物车，购物车它里边是不是有一个这个这个小图标啊，哎，图标那还好，我们这个放的阿米已经引入好了，引入好了以后我们直接找一下。

嗯，找一下看有没有啊看。啊card card card车啊card card，诶烧card是不是正好有这么一个购物车呀，当是它有点丑是吧，没没关系，你先凑合用啊，你要不喜欢用它的话，你可以用那个阿里的那个那个那个那个爱空放的啊，一样的效果啊，因为我自己选一下就完事了啊不多说了，我先把这加上，只找到这，呃，这里边呢，我们购物车里边我们加一个这个，我这先给它换个行吧，换个行里边我们加一个小的图标字体，我直接写一个ii的话，我们这儿来一个class class，我们叫一个FA，然后这我们来一个它啊这里边呢，我们直接来运行一下，看看效果，一打开。

诶，是不是购物车也出来了，哎，然后这几个图标也都出来了，哎，当然最终效果跟我们预想的还有还有有差距，因为我们还没有写样式对吧，产品样式，但是结构上基本上就是这样一个效果了啊，结构上所以我们先把结构写完啊，然后呢，你自己写一下这个结构，诶然后可以尝试着写一下样式，我们还是先来暂停一下。