尚硅谷前端基础 (84)

好，讲完了字体，又到了我们这个练习的时间了，那这节课我们来做一个这个练习，练习的话主要是指的是我们京东这个页面，京东的话其实很多部分我们都做了是吧？像这一块这一块对这一块我们都写了，对吧？那今天呢，我们来写京东的顶部的这个导航条啊，京东顶部这个导航条，那这个导航条我们要，诶怎么来写，我们来看一下，那首先呢，我们还是先从这个结构上来出发，那首先的话，很显然整个这个导航点我们需要整个做一个这个块元素，然后给它包起来，对吧？给它包起来，但是这里边我们要注意有一个问题啊，实际上京东整个导航条主体呢，实际上是在这部分，但是实际上这个导航条的整个宽度实际上要这么宽，那这个时候我们这个整个容器就需要两个，一个容器代表我们整个外边这条，哎，这条是不需要居中的。因为很明。

明显这个的宽度是跟我们显示器的，跟我们屏幕的宽度是一样的，屏幕多宽它就多宽，对吧？然后呢，在它的里边我们需要创再创建一个容器，这个容器的宽度就应该是固定的了，应该是跟我们整个屏幕的宽度是一样的，然后这个东西我们是需要它整体来是是居中的对吧？是居中的这是一个，所以这里边我们就需要外层的话，就需要两个容器，一个是整个外部的容器，还有一个是我们中间这个容器啊，然后再往看，再往里看，里边的话，实际上我们整个这个菜单这个栏实际上分成两部分，左边这有一个北京这个是吧，这里边可以显示我们这些城市的信息啊，左边这个是一部分，然后呢，右边的话，我们这儿还有一组菜单，也就是说实际上我们这个里边它是有两个材料，一个是我们这个城市信息，还有一组是是这个材料，对吧，这个材料，所以那就意味着我这里边要需要两个ul，或者说其实。

呃，这个你用不用ul都行啊，如果要用ul的话，那就是两个ul对吧，2UL，那这是一个ul，这儿也是一个EL，两个ul，然后这个ul里面有几个Li对吧？那大概就是这样一个结构，但是你要注意这点，这后边的两个你像这个客户服务，还有网站导航，还有手机京东，后边这三个都不是超链接，所以后边这三个的话，呃，你放不放到A标签里边都都可以啊，都可以啊，放不放A标签里都可以，好那这样我们就可以来给他们来设置一下这个样式啊，设置一下样式，先写结构啊，先写结构来。呃，把这些呢全都给它关闭，然后呢，找到我们这个练习的这个文件夹，在这里边我们来新建一个文件，我们来一个零五叫做一个京东，京东的这个顶部的这个导航条，哎，我先把这关掉啊，因为它切换的话会导致视频比较大啊，没有写扩展名啊，我们这来一个F2，把扩展名加上点一个头，然后呢写一个基本结构，那这个呢是我们京东顶部的这个导航条，那当然了，我们要写它的话，这里边我们还得需要啊，我们这是一个这个京东，那我们要写它的话，我们这里边还得要引入我们这个重置样式表啊，引入重置样表我们是一个link啊，Link我们是点斜盖CSS下边的一个re.css然后很明显它这里边有一些我们这个小图标对吧，所以我们还要引入到我们的那个，那个放到。

Awesome啊awesome呢，我们直接把这个给它，我复制一下。CTRLCCTRLV，我给它复制过来，其实这里边放到R里边，CSS我们还可以再精简一下，像这些玩意儿我们都可以给它删了，它也没什么用。你给它删了也没问题啊，删了也没问题，然后呢，我们来引入我们这个放awesome啊link，我们这个是点斜盖ffa下边的一个CSS下边的一个这个o.CSS啊，写个注释啊，这是引入，诶引入我们这个重置样式表，下边呢，这个是引入，呃，引入我们这个图标字体啊标字体，然后我们来定义它这个结构，它这个结构呢，首先在最外围往给它加上一个容器啊，加上一个容器啊，我们叫做一个div吧。

哎，创建我们这个外围的容器啊，外围的一个容器，哎，我们叫做一个点，一个top bar的一个rapper，哎，Rapper啊，这是它一个rapper，然后呢，这个是我们中间的一个容器啊，创建我们这个内部容器，内部容器哎。

内部容器我们这儿叫做一个点，一个就叫top bar啊top bar top bar它的外边啊，Top bar是我们这个里边，然后呢，在他这一块，我们还要再整整什么呢，整这整个。这个top bar表示的就是我们整个中间这部分了，然后这里边实际上有两个菜单，一个是我们左边这个北京这个，还有一个是我们的这边这个菜料，对吧，北京这个我们想一下我用不用UR了，呃，北京这块其实用不用ul都行，那这样吧，我就不用ul了，北京这块我直接写一个div div，我们起个class，我叫做一个这个location吧，因为它是表示我这个位置信息的嘛，这个location这个是我们这个左侧的这个菜单，左侧的菜单，然后呢，我们右侧菜单呢，我来整一个ul，诶，这是我们右侧的一个菜单，右侧的菜单我们直接来个div div我们叫做一个short，哎哎，Short short cut啊，我们叫做一个快捷方式啊，快捷方式这是我们右侧菜单，左侧菜单的话，现在我们看上去效果的话，这只有一个北京对吧，当然这块移动下来以后，下边是不是还有一些这个一些这个列表啊。

啊哎，一些列表，但是别着急，我们先给它就确定一个，我们先给它写一个这个北京，所以在这儿呢，我们直接来一个div div，我们来一个class，我们叫做一个呃，C啊C啊叫做c rt card c c rt card c为什么叫current city呢？因为现在这个显示的是不是我们当前的城市啊哎，所以我给起名叫current啊，放一个超链接，Java script，冒号分号这个里面我们写一个北京，哎，北京，然后下边那个部分我们待会来定义啊，我们待会定义，我们先把这个条给整完啊，条给整完然后再往下看，就是我们这个右边，右边的话也是这么一组一组菜单啊，我把这右边我给它叠一下，我们写小，我们小一点看一下，右边的话也是一组菜单，我们在这儿已经设置好这个ul，然后接下来我们要做的事是要把这个整个这个结构。

都给它，哎给它写出来啊，写出来啊，我们来看一下，那首先呢，诶右侧我写了div了，改成ul，诶改成ul啊，然后里边我们来看有几个啊，有一这诶您好，请登录免费注册，这是两个对吧，两个，然后我的订单，我的京东，京东会员企业采购，客户服务网站导航，手机京东一共这么几个，然后这里边还要注意一点，注意一点的话，我们这个。我们先写吧，待会儿再补充这个结果啊，我们先写上一个Li Li后边呢，这个是您好，请登录，然后免费注册，呃，他俩很明显应该是在一个LY里边，因为他俩之间是没有这个盖，哎，没有这盖，所以我一个LY里边我们写两个A啊javascript。

冒号分号两个A，第一个是一个你好啊你好，然后是请登录，请登录，然后下边这个呢，我们复制一下，下边这个是免费注册，哎免费注册，然后再往下的话，它后边是一条线对吧，一条线，这个线的处理方式呢，有很多种啊，有很多种我们可以给它，我们可以给它，可以给它去用，直接用那个竖线啊，直接那个竖线可以，或者是找一个图标字体也行，但是在我们这个京东里面呢，它这条线实际上是用的是一个直接用的一个标签来设置的啊，这里边我们就干脆模仿一下，它实际上是设置了一个标签，然后呢，给一个标签设置了一个高度，设置一个宽度，是一个背景颜色，实际上它是一个标签，所以这里边呢，我们在这儿用一个标签，我们叫做一个Li，我一个class，我就叫一个line啊，Line这个是什么呢？这个作用是我们这个分隔线啊，分隔线待会儿我们来设置样式，我们就用这个Li表示。

这个分割线，然后在这我们来看有几条线，一条两条，三条，四条，五条，六条，七条，七条线，那我就直接复制过去。234567啊，然后下边我们再写这个写LY，下边一个Li，我们叫做一个这个我的订单，哎，Javascript的冒号分号，冒号分号啊，这是我的订单，我们先不管它那个下拉的啊，先不管下拉的，然后下边一个我们叫做京东会员。下边一个我们叫做企业采购，企业采购，然后再诶企业采购的话，我们来看看啊，我的订单啊，落了一个我的京东对吧，我的京东啊，然后我把这个移移上来。

结构写的时候你就慢慢写就行了啊，这也不用着急，这是一个我的京东，我的京东，我的京东你注意了，我的京东后边会有一个这个向下的一个这个箭头对吧，向下箭头，所以这个的话，我们就直接用一个图标字体给它设置上就好了啊设置上就好了，图标字体我们来看看向下的箭头有没有，这搜一下吧，向下箭头箭头a row arrows，看看有没有箭头，是不是这有一个向下呀，哎，叫一个FA的一个这个N轴的一个这个一个档是吧，一个档我们可以用class来设置，也可以用一个这个样式来设置，我们就class吧，直接写一个在它的我的。我的京东，我的京东的这个超链接的后边给它加上一个箭头，我们就用一个I标签吧，直接加一个I标签，我们这是一个class，叫做一个as，然后加上一个这个样式啊，然后呢，企业采购那也有。

企业采购也有，所以在企业采购这呢，也给他加上这么一个小箭头，然后后边还有客户服务，还有网站导航，还有手机京东客户服务，网站导航，手机京东就都不是超链接了，都不是超链接的话，我们就直接把这个字给它写到里边就行啊，写到里边就行了，所以在这里边Li里边呢，我们给它写一个这个SPA吧，SPA我们这叫做一个客户服务，客户服务的话我们来看一下，客户服务的话，把这线三角粘过来叫做一个客户服务，再往下边呢，是一个网站导航。诶别写到这儿啊，这写到这个line里了，对吧，我们再单独单独拉出一个Li啊粘过来客户符格式化一下。

然后接下来我们再往下写，下边是一个叫做网站导航，跟它是一样的啊，直接把这字儿给它粘过来，然后把它换成一个网站导航，网站导航，网站导航在下边是一个手机京东啊，手机京东我们直接写一个这个Li，里边我放一个这个SPA就完事了啊SPA我们叫做一个手机京东，手机京东那大概这是现在我们写这么一个结构啊out shift的F格式化一下结构我们就定义完了，但是我们现在定义的结构仅仅是它的第一层，下边它是不是还有一个隐藏一层呢？隐藏层我们现在还没处理，待会儿我们再处理，先把整体结果给它定义完了，定义完了然后我们这来运行一下看看效果，哎，那现在呢，我们选完的结构就长这个模式，当然跟我们这原版那个是不是还差距还挺大的呢，哎，差距还挺大的呢，哎，别着急，我们慢慢来还写啊，慢慢来写好整个这。

的结构我们定义完了啊，我们分步骤来写一下，我们先停一下啊，这是我们的一个结构。