尚硅谷前端基础 (85)

好，那么接下来我们来一块呢，给这个导航条来给它写一个样式啊，我们先把它的外围的样式写出来，首先的话，我们来看它整个外围的话，我们设置了一个标签，叫做一个top bar的一个rapper，这个div的话，它整个的话很明显它是跟屏幕一边宽的，对吧？屏幕一边宽的，所以这个时候我们先写它的样式啊，先写它的样式，我们直接写一个style标签，呃，那在这儿的话，我们来先设置我们这个什么呢？设我们这个外部容器的一个样式，外部容器的样式呢，我们这是一个点，一个叫做一个top bar，一个rapper啊top bar一个rapper wapp样rapper的话，首先呢外是一个100%，那其实这块写也都行，因为你不写它也是100%，对吧？哎，不写百分之，但是我们显示写什么啊，写着保险一点，然后的话它有一个。背景颜色对吧，有一个背景颜色，背景颜色的话我吸一下吧。屏幕取色器，我直接吸一下是这个颜色啊，直接来一个我们这个background color background color，我们直接给它粘过来，是这么一个颜色，然后的话，除了背景颜色，它这里边还有一个高度，我们来看一下它这个高度还不光有高度，下边还有一个边框，所以这个时候呢，我们先量一下它的高度，哎，我就糙一点，直接拿这个。

截图工具去量了啊。高度应该是一个30啊，加上边框高度是一个30，所以height是一个这个30个像素，然后呢，我们还有一个叫做一个包der bottom是不是有一个底部的一个边框啊，比地亚borderder，一个bottom borderder bottom呢，我们设置一个叫做一个像素啊，那个像变块也就一个像素red的，我们来一个solid里的啊底部边框，然后我们这个写完了，大概是是这样一个效果，但是它那个边框不是红色的，我们也可以吸一下啊，当然这太小了，不好，不太好吸了。在这哎是一个哎六个D对吧，六个D，所以这个颜色应该是一个井号，一个ddd啊ddd这个颜色，然后大概我们这个。

上边这个容器的效果就是这样的了，对吧，我们就给它设置出来了，当然这里边其实我们设置的时候还有一点注意，你来看一下，实际上我现在它里边的文字啊，无论你是A也好，还是span也好，文字在这里边实际上是不是都是垂直居中的，哎，在我们行高之间垂直居中的，所以这个时候我们应该什么呢？我们应该设置完headde，为了确保文字居中，我们是不是还应该设置一个烂head，也是一个30个像素，诶，也是一个30像素，那这样就可以确保我们这横高居中了，而我们也说过了，你光设置烂ight，烂实际上就可以撑起它的高度了，所以高度你可以不写了，效果是不是？效果是不是一样的呀，诶效果是一样，但是你说老师这明显不一样，诶现在是不一样，因为现在我的这些元素是不是现在是多行排列，它没有横过来的，所以现在是多行，所以现在看着特别高，待会儿我们让元素横过来是不是就没有这个问题了，哎，所以我们可以通过行高来设置啊，设置完行高还有一点需要注意，我们这航高应该是一个29 29，我们想一下29其实不太好，我们就设置一个30 29吧，因为刚才我们量的时候，是不是我量的它的一个整体高度是30啊，但是它多了一个边框，多了一个边块以后的话，它的高度实际上整体高度是30，多了一个边框，它剩下这一块区域的高度是不是应该就是29啊，诶29我们看到它原版的是多少。

看一下它的高度commuted commuted是不是一个乘以30啊，哎，这30是加上这个什么呀，加上哎，我们看一下30加没加变号。嗯，高度。它的高度是被内容撑开的哦，那它的高度就没有加边框，那没有加边框那我们也好好办了啊，我直接给它改过了，还是改回30就完事了，那也就是说整个高度是一个31啊好，那现在我们整个这一块条就给它设置完了啊，当然现在先不用管它，待会它就变过来了啊，只要它不换行就变过来了，那现在的话，我们的内容的话，现在是等于是还都是竖着垂直排列的对吧？竖着垂直排列，那我们的实际效果应该是横向排列的，诶不对，先不是说这个效果呢，先说的是什么呢？现在我们设置的是外围这个条，它中间是不是还有一个条呢？哎，中间还有一个条，我们是不是要给中间这个条设置样式，也说我要这个元素在这里边，是不是居中啊，哎，居中，所以接下来接着写，这先写个注释啊，这是设置我们这个宽度，哎，这呢是设置背景啊颜色。

下边一个这是设置我们这个行高。设置行高啊，没有没有设置这个高度啊，那么们可以什么呢？我们十哎，我们这个文字垂直居中啊，垂直居中下边呢，这个是设置我们这个下边框啊，下边框，然后往下这里边接着来设置我们这个内部容器的一个样式啊，内部容器，内部容器其实没什么好设置的，叫做一个top一个半top一个把它首先的话，它有一个固定的宽度，这宽度就不量了，我们直接取一下，其实你要量的话也能量，量的话其实就是什么呢？就是从这边到这边的距离，你看它上边是一边齐的，大概这么一个距离，这应该是一个1190，我们看一下应该就是这个距离。

直接点就行了。哎，是不是一千一百九啊，哎，看左边那个啊，1190，所以这个时候我们就直接给它把宽度设置成一千一百九就行了啊，哎，Y是一个1190是这么一个，然后的话，他应该是干嘛的呢？它应该是在我们的屏幕当中，是不是居中的呀？哎居中的居中的话，我们就直接来一个margin，我们来一个零，来一个凹凸，让它做一个居中效果，现在的话我们来看看。

聚没聚过来呀？看不出来是吧，看不出来，我们给它设置一个背景颜色background color，我们给它设置一个red，看看能不能看见它，哎哟。Top bar等于是不是看不见呀，看不见我们再给它加一个高度吧，高度比如说来个十像素，肯定是哪出问题了。Top bar啊，我说的呢，我的这个类名写错了，这是top套了是吧，应该叫top bar啊top把你们写的时候一定要注意，现在是不是就居中了啊，就居中了啊，当然还很难看，不用着急，一点点完善背景颜色给它去掉，那现在我们整个等于外围是一个容器，这个容器是全屏的，然后内部是一个容器，这个容器是在我们这个屏幕当中居中的，那就达到这么一个效果，对吧？好，那这块就设置完了啊，这个是我们这儿是固定宽度，固定宽度下边这个呢，是设置我们这个水平居中啊，设置水平居中这里都设置完了，接下来再往下进行，再往下进行的话，再来看现在我们这个菜单这个条，你看什么北京啊，什么这一系列的是不是都还垂直排列呢？那按道理讲，是不是北京应该在在这边对吧，那这个条是不是应该在在这边啊，哎，它应该是一个什么呀，它应该是一个水平方向排列的啊水平方向排列。

水平方向排列，那就意味着我们应该让这两个东西是不是都浮动啊，哎，北京这个东西应该是向向左浮动，而下边北京这个东西是不是整体是一个，这个是一个div啊，哎，这个div我们应该让它向向左浮动，而我们这个ul是应该整体向向右浮动啊，因为我们菜单在这显示的效果是一个靠左，一个靠右啊哎，一个靠左，一个靠右，所以这个时候我们直接来设置啊，设置我们的什么呢？设置我们lolo的一个位置，点一个这个lo location应该是float，一个left，然后再来设置什么呢？哎，设置我们这个ULUL，也就是我们这个short cutt short cutt叫做快捷方式，对吧？快捷方式点一个short cutt shortt short cutt，我们让这个向右浮动啊，一个在左边，一个在右边嘛，哎，这是一个F，哎，Float一个这个right啊float一个right，哎出不来FLOAT1。

这个。哎，那这样的话，我们这两个是不是就都浮动起来了，哎，都浮动了，但是都浮动起来你会发现其实也会出现一个问题，什么问题呢？我们上边那个top bar这个元素是不是就就看不着它了？哎，看不着它了，这top bar跑哪去了？Top bar我这不是已经设置拉，Head跑哪去了？没了，为什么没了？因为现在这top bar里边它只有一个子元素，就是这个top，而这个top bar里边有两个子元素，一个是location，一个是烧cut的，这两个子元素它撑开它的高度，而这哥们是撑开这个的高度，对吧？但是问题来了，这两个它是不是浮动了，这两个浮动了，意味着它们两个现在能不能撑起它的高度，撑不起来，高度塌陷了，它的高度没了，那他的高度是不是也跟着没了，哎，这是我们之前说那个高度塌陷问题，解决这个问题两种方案，你给他这儿呢，你要想避免高度塌陷呀，你也可以给他。

设置一个高度，高度呢，你就直接来一个30像素，这样可以解决这问题，是不是就不塌了，诶这是一种方案，或者你用我们之前那个可粒fix，诶还记得那个吗？哎，可粒fix诶然后冒号，冒号一个比before，然后逗号，我们点一个可fix冒号，冒号一个阿after，我们这直接来一个content，来一个content的内容display，我们来一个这个table ta，然后我们这个来一个这个boss，诶你干嘛呢？谁塌了，你给它加上就完事了，谁塌了呀，是不是掏半塌了，哎，你把这个clear fix给它加上，那这个时候高度是不是又可以撑起来了，哎，又可以撑起来啊，这样就避免这个高度塌陷的问题，好，那现在这个两个块都已经浮动过来了，但是现在我们来看我这一堆链接是不是还是竖着排呢？哎，还是竖着排呢，所以这个时候注意了，我们不仅仅要让ul向右浮动u Li里边的Li是不是也得。

浮动啊，哎，Ul里的Li也得浮动，那这个时候我们u Li Li也要浮动啊，我们这来设置什么呢？诶设置我们这个u Li，这Li我们直接是一个点short的cut里边的Li，这些Li应该干嘛呢？应该是向左浮动，因为这里边你好，是不是什么都在在这边啊，哎，所以这些Li向左浮动达到这么一个目的，你如果向右浮动，那就可能是什么呀，你的菜单的顺序就颠倒了，注册时候就跑后边来了，哎，跑后边了啊，所以注意Li应该是向左浮动的，浮动方向一定要搞清楚好，那这块整理完了，那你其实这儿的话，它里边的元素也都是脱离文档流了，所以为了避免它的高度也太线，把这个可雷尔F斯也给大家加上，当然这儿没什么区别，因为你你现在看不见它啊，你现在看不见它，好，那现在我们整个的一个大体上的布局就已经完成了，那接下来我们要做的就是一些细微的一些这种调整了，整体效果是不是就已经已经出来了。

已经出来了啊，细微的调整，我们来看看我们需要调什么，我们需要调的首先是一个字儿，我们的这个字儿是不是整体来说是不是有点有点大了，哎，它这个字应该是一个我们默认的字体大小应该是一个16像素啊，16像素，所以我们来看一下body，这我们直接来一个fo size size，我们来一个16像素，这个时候它是应该是没有区别的，对吧，因为默认就是16嘛，把往下写，我们统一改一下字体，我们把字体改成14，我们看看啊，14改小一点，哎，那我们应该这个14是不是跟这个字体是不是应该差不多的，哎，差不多的，然后字体的颜色，我们这也设置一下，Color的话，应该是一个井号，应该是跟那个边框像是一个颜色，诶，我不对，这就有点串色了是吧。

边框什么颜色？边框是DVD。背景颜色是这个，那还不是这个颜色，我们看一下它是什么颜色。是一个哦，999对吧，999，然后字体呢，就是一个微软雅黑啊，它还是一个12像素，等于我这一块指令是不是都给它指定大了，哎指大了，那这样吧，我就不写了，既然已经有了，我就直接给它复制一下就完事。嗯，找到我们这个body body的话，我们这是一个这个东西啊CTRLC复制一下。

嗯，我们这是一个fo，我们就不写了啊，我们就不写了，直接把它这个都给它复制过来就完事了啊什么玩意儿呢，什么这个12像素1.5倍的航高，诶威尔雅黑这个字体黑体什么SC是吧，都整好了，我们就不再改了，我们就跟他这个跟他这个一样就完事了，那现在是不是这个效果，感觉这个字有点。有点儿小啊。你们看一下啊，他的字儿。就是14像素我们就不改了啊，他既然原版就是14我们就不改了，好，那现在整个这个字的样式就给它设置完了，颜色刚才没看到颜色啊，颜色是一个999对吧，三个九。哎，这个是设置我们这个字体，设置我们这个字体，那注意了啊，你看啊，我这个字体我是在这个body上去设置的啊，我在body上设置的话的好处就是它的话，它只会对这个，它就会对我页面中所有的去生效啊，所有的生效，但是颜色的话，其实最好不要在玻璃上去设置，因为你颜色在玻璃上设置，那等于所有的都是这个颜色了，那我现在其实是不是只希望的是这这些玩意儿是这个颜色呀，哎，所以我们需要单独给他们设置一下颜色，单独设置的话，我们找一下，那就是一个点一个这个，呃，我看看啊都是谁，呃，也就是说这个北京还有这对字体，还有这对字体都得设置，那所以其实就是点一个我们叫做一个top bar下边的A还有谁呢？还有我们点top bar下边的这个SPA是不是也得是这个效果呀，哎，SPA，哎，SPASPA。

还有谁呢？我们看看。嗯，还有我们这个东西，这个东西是不是也是一个效果呀，哎，一个效果，所以这里边我们是一个top bar下边的一个叫做哎哎啊这几个东西它们的color都是一个颜色啊，Color呢，都是一个井号，一个三个点，那这样我们就把它们颜色统一了，A的下划线也不需要我们直接text text，我们来一个这个，那那这里就等于我们就把我们这个里面的字体就统一了啊这是设置我们这些，哎，设置我们这些自己的一个样式，嗯，这个的话我想一下。

我还是把它往上提吧，因为它属于top bar的范围下了，我把它写到这个top bar的下边，我们找的时候也好找一些，好，那现在字体上大概就是这样一个效果了啊，自己这样的一个效果，呃，然后的话我们就从左往右设置吧，先设置这个location location的话，它还有一个往忘整一东西，它前面是不是有一个这个这个箭头啊，哎，这个箭头这个图标我们这有没有，我们看看找一下，嗯，这叫什么玩意儿啊，Map吗？

Map。买吧。不是，那location o。这个玩意儿不是。我们的，呃，那是位置off side不是，嗯，我们找一下吧。它应该在这附近是吧，我们看一下应该我之前用到过，但是我忘了他这个名字了，其实应该是呃，搜map就能找到，所以这个时候用它也会比较麻烦一点，就是有的时候这东西比较多，你需要去，你需要去找一下啊，需要找一下。

而且这些这个东西也是忒多了。我觉得我应该已经错过了。这location吧，谢location，我觉得应该在他附近应该就有。因为它也算是一种箭头嘛，对吧，箭头里边应该。这个事就比较烦了，卖吧。Market，这叫是吧？

MARKET。嗯，这样吧，我先暂停一下，我去找一下，好，那刚才我去自己找了一下啊，其实这个东西在这呢，它其实也是map map什么market out，所以我们要加这个东西的话也很简单，CTRLC复制一下，找到我们这个页面，我要加到北京的前边，找到北京，北京前边呢，我给它加一个，哎哎呢，我给它来一个这个class class我们叫一个as，然后把这个class粘过来，这小图标是不是也过来了，哎，也过来了，也过来以后呢，我们就可以直接来去给北京设置这个样式了，北京呢，首先的位置的话，我们就已经不用管了，然后这个小图标呢，它是一个红色的，红色的话location在这，我们来设置我们这个location下的一个这个什么呢？小图标，诶小图标，小图标的话，我们就是点一个location，下边我们就直接点一个FA，我通过这个类设置，我要给它设置一个color，设置一个红色，比如说我来一个red啊，变成一个红色，呃，当然这个红。

色的话，它这个红的话，我这个红有点浓，它这个红应该不是那种纯红，它是一个F10215，所以我也用这个颜色啊，井号一个F10215，设置一个这个颜色啊，那大概就这么一个效果，诶这个效果整体来说就还还可以了，对吧？那基本上我就不用去调了，包括大小的话，那可能可能我们这里面的实际效果这个条感觉可能稍微的大一点，对吧，但这个效果其实还挺好的，我们可以把自己大小调整一下方size，刚才是我调一个14像素呢。14像素稍微大一点是吧，稍微大一点，我感觉可能还是小一点好看，那这个就我们根据自己情况去调整吧，我先放到这么大啊，14像素我们通过这个来设置啊，注意为什么可以这么设置，因为我们这个小图标是不是一个爱标签啊，哎，爱标签爱标签我们有个class叫FVS，那我我在这儿我单独给它起一个类也行，我就懒得洗了，所以我就直接用它这个类了，这个类实际上是我们这个放在阿苏里边这个类啊，我们就直接借用一下这个类就完事了啊，北京就这样效果，然后我们这块移动到北京上去以后，它这个字是不是变成一个红色呀，哎，变成一个红色，不仅它变成红色这个这个这个这个这个是不是，诶，除了后边这三个是不是全都变红色呀，啊全都变红，所以这个时候很直接，我们直接给这个A绑定一个whole啊，给这个A绑定一个ho，所以我们直接往下写top a冒号一个ho，设置一个ho的状态，改成一个color color是一个井号。

F，哎，10125设置上这个颜色，那这个时候的效果就是，诶，你看我移动到它上边，移动到它上边，是不是移动到每一个上边是不是都变成一个红色，除了后边这三个其他的都变成红色，那并且的话，其实还会有一个，你像这个免费注册，还有这个企业采购是不是默认就是一个红色呀，诶默认就是一个红色，所以我们上来也是应该让他们也变成变成红色，我们就一起设置了啊一起设置了，那这个是一个免费注册，那它也变成红色，那为了区分的话，我给他加一个这个class，我叫做一个hi hi highlight，诶高亮，那就让这两个高亮，我给它加上一个highlight，还有一个叫企业采购在这儿给它加一个highlight，那这个时候其实就简单了，我这再给它同时设置一下啊，同时设置一下，那后捧场就J在这同时设置一个什么呢？同时设置一个点一个这个。

Top bar下边的A点一个highlight，这也变成红色，那这些是不是就自然而然就变成红色了，哎，那这样跟这个效果就就差不多了啊，就差不多了，好，那这一块我们就都给它设置完了，诶这红。

我看一下啊。F10125没错，好不改了啊，那这块我们这儿是不是就给它做完了，当然你会发现其实这我们去诶移动到它这上，诶它这上边以后它会变一个白色，这个待会儿我们跟那个下拉一块做，现在先放在这儿啊，然后的话。那基本上就可以是这样了，可以这样，这个东西我觉得还是再小一点，让它默认大小有点丑。小一点呢，还好看一点是吧，小一点好看一点，那这样北京这块我们就设置完了，然后我们来设置这块，这块的位置的话，我们来看，首先的话很明显我们之前有一个那个线我们是不是没有做呀，哎，我们要把这个线给它做出来，这个线的话，这个标签我们已经预留好了，这个标签我们是不是留了一个这个烂呀，哎，烂，所以这个线的话，我们直接是我们这个就不是老kitchen了，是烧cut，这里边我们来设置什么呢？哎，设置我们这个分隔的一个线，呃，分隔线的话，我们这是一个点，一个烧的cut的下边的一个点，一个这个烂我们要设置个样式，这个烂我们怎么设置，那首先其实它就是一个块元素，对吧，块元素，块元素的话，我们来看一下它的宽度的话，我们就直接给它宽度是一个一个像素，因为这个线很明显，粗细是不是就一啊哎，然后的话高度你得设置一下高度，我们大概看一下它是多高。

高度。这个看这意思，高度应该是一个。八九个像素的意思是吧，看一下呃。放大一点。有一个最最原始的方式是吧，我给量一下啊，这是。呃，应该就是十个像素吧，我看。这跟这个跟他是一边大的123，这是三四五六七八九十十一。

看到都眼花了。聊一下。十个像素啊，我们就那正好就取一个整吧，十个像素，所以这个时候它的高度是一个十个像素，所以它其实就是一个宽是一，高是十的这么一个块元素啊块元素，然后的话，你再给它设置一个背景颜色，Background color background color，应该是我们刚才那个三个九吧，是吧，三个九跟那个字的颜色是一样的，那这样你看我这个线是不是就就就已经出来了，哎，就已经出来了，当然位置现在还不太对，所以我们还需要调整一下它的一个位置，位置的话，它应该基本上是不是在我们这块，它属于是一个垂直居中的效果啊，垂直居中，垂直居中好办，我们给它设置一个这个margin啊，这个margin，呃，Margin的话，我们先给它整一个这个零零，哎，也就是说上下左右全都是一个零啊，然后呢，我们既然让它垂直居中大，是不是这个位置，我们是应该让它往往下去挪一些，哎，往下挪一些，往下挪一些的话，我们想一下，我们整个这个高度是30，它的高度是一个十，我要。

那它居中，那是不是上边时下边时它就居中了，哎，所以我们上下是一个十像素，十像素，然后就达到了一个居中效果，是不是正好是在我们这个字的一个中间啊，哎字儿的一个中间，当然其实我们看上去的话，我们视觉上的话就是一个居中的东西，我们看上去可能是要偏下一点的，所以你也可以再调是吧，你可以再调，你可以往下调一点，比如说调成这个12像素。12想做往下调一点啊，这样也不是不可以，但是你往下调的话，待会我们先写成十吧，待会我们再把这个整个布局写完了，我们再做这个微调，因为你往下调以后，它等于把下边会极大的，那这时候你不能上下都是十对吧，你不能上下都是12，你只能有一个上边是12，那下边你就调成八了啊，我们先写成十，好，那整个这一块也处理完了，然后再看我们还需要做什么，再看的话就是我们的它的前后，你看我们这个字儿距离我们这个烂前后是不是会有一个距离啊，哎，所以很典型，我们直接给它设置一个哎左右的外边剧情了，那这很显然是一样的，我们量一下大概。

是一个十二十二像素的话，那我就直接这取一个这个12个像素，然后他们的距离就会干嘛，哎是不是就就拉开了，哎就拉开了啊，就得到了这样一个效果，那这个效果基本上跟京东那个就是就是一致的了，那再调的话，其实就是我们看一下。这个字儿的颜色我是不是写错了？999没错，但是感觉嗯，我这个颜色是不是要比它那个深一点啊，哎，深一点深一点，我也不吸它那个颜色了，我直接把这个颜色呢，我给它取浅一点就完事。

取浅一点儿，往下往上取一点，它就亮一点。再亮一点儿。哎，这样的颜色，哎，我们自己调一下，我就不去取那个颜色了啊好，那现在我们这整个的效果基本上就出来了，但是像我们刚才说这个问题，你会感觉到其实整体这个整体这个线有点有点偏上了啊，有点偏上了，那这就是我们刚才说的那个问题，就是你这个你这个线你在设置的时候就是它如果是居中的话，我们会感觉是有点偏上的，实际上我们需要偏下一点才能感觉到居中的一个效果，所以这个时候呢，边距呢，我给它设置一个这个12，但是这时候还多写一个，我让他下边距是一个零，那这样他就不会把它整体撑高了，那这样的效果基本上跟我们那个原版的就基本上是类似的了，还有一个这个象限的箭头，这箭头我觉得这个效果我就可以接受了，就不改了啊，你觉得颜色不对，你可以再调调，我就不去调了，呃，距离的话哦。

还有一点需要调，如果要需要调的话，就是这个箭头，这个箭头跟这个京东这个字儿，他们之间稍微的有一点点的这个这个距离是吧，你要调的话，可以把这个距离给它调出来，你只需要给它加一个这个margin就行了啊，我是我不想调了啊，不想调了，自己调的话，感兴趣自己调一下，我们把这个整体的布局给它先先布出来，然后待会儿的话，你自己来把这个布局写写，其实整体来说并不难啊，并不难，但是它涉及到就是他们东西挺多的啊，东西挺多的，慢慢写一下，然后我们接下来再做的是它这儿还有几个下拉框，诶，这有一个下拉框，这有一个下拉框，这有一个下拉框，这有一个下拉框，这有一下拉框，对吧，有几个下拉框，下拉框整体的做法其实都是一样的啊，都是一样的，我就做一个不全做了啊，我就做一个不全做了，做一个我们展示一下，剩下你自己做啊，然后还有一个，这儿有一个，呃，这个东西，这个东西它也属于一个。

你看它也属于一个下拉框是吧，诶也属于一个下拉框，那这个我们也不做了，因为后边我们有类似的东西，这待会我也不做了，我就把这个下拉框做下来，咱们这块就完事了啊，那你待会儿呢，尝试着把刚才我写这个代码自己再好好写一遍，然后思考一下这个下拉框要怎么设计啊，要怎么设计好，我们这先来停一下。