尚硅谷前端基础 (103)

好，那么结构写完了，接下来我们来一起来写一下这个样式啊，你们写的时候也是注意尽量的，我写一点呢，你就写一点，你别觉得说简单你就不写，然后你直接往下去看了那个这样效果应该不会特别好。既然你是通过。看视频来学习的，对吧，那尽量就是我讲一点，你做一点这块做明白了，然后咱们再往下去进行，或者至少呢。上一个视频你听明白了，咱们再往下去进行啊，一定要强调我们学习任何东西，重要的一定都是练，一定要多练，一定要多练啊，光听懂了，光记住了那是不行的，一定要能做出来啊，一定能做出来好，那我们整个这个结构我们来看一下，刚才我们的样式，我们就要在我们这个引ex.C里写了，首先我们来看上边这块，整个上边这块它实际上是有一个背景颜色，对吧，背景颜色，而上边这块呢，我们给它起了一个类，这个class，我们叫做一个top bar的一个rapper top but rapper我们先把它写上，这个是我们这个，诶顶部导航条的一个容器啊，容器这里边我们直接是点一个top把的一个rapper rapper的话宽度是100%，哎，它就是包地多宽，它就有多宽啊，全屏的对吧，全屏的，然后的话，我们这儿还要给它设置一个BA background color background color，它的颜色应该是。

那它的颜色应该是一个，我们这儿写了，哎，3333是吧，是这么一个颜色，所以井号我们来一个三个三，设置这么一个背景颜色，那对于顶部的这块，其实你要做其实应该是呃，只设置它了，别的东西倒没什么了，还有一个就是它需要有一个这个高度，对吧，需要有一个高度，就是高度是40，当然你也可以写一个hide，是一个40，也可以这么写，那这个时候其实我们还是那个问题，你看我们这个文字在这里边是不是它是一个这个垂直方向是居中的呀，哎，居中的话就意味着我们这儿还要设置一个烂head的，要写什么呢？40像素，这样才能确保它会有一个居中效果，那这两个实际上现在就有冲就就就就写一个就行了，因为你写一个烂he的话，它的元素的高度也会自动撑起来，所以这个时候这个高度你可以给它去掉了，去掉以后我们来看它什么效果，哎，它现在是不是变成这样一个效果呀？哎，当然你说老师你不是说写一个就行了吗？哎，写一个就行了，我们怎么不行啊。

哎，因为我们现在这个东西，我们是不是还没有让它变成一行，哎，变成一行，变成一行以后，它就是用这么一个效果，所以这个害ight呀，当然你说老师我就非得写上，写上也行，写上也行啊，省略呢也行，两种方式，那如果你觉得这样看到会舒服一点，但是可能确实是这样，写完了以后，但是我们看起来可能会方便一些，所以我们把这写什么也行，但是真正做出来以后，实际上这个高度啊，你写不写都行，无所谓，好然后再来看我们现在这整个这一块写完了，然后就是它内部，它内部这一块，首先我们来看什么小米商城啊，这堆超链接，这堆东西，它是不是应该在这个位置是居中的呀，哎，在这儿是居中的，所以这个时候我们应该给下边那个元素那个容器，我们是不是要给它设置一个居中效果呀，哎，但是还好我们不用写了，为什么不用写呢？因为这里边我们是不是已经写好了一个类叫做W，哎，所以我只需要给这个类把这个W1加，然后它的宽度就确定了，宽度确定，然后这是不是也居中了，哎，也达到了一个居中效果，所以这个就是我们W一个目的。

你希望谁的宽度是1126固定的，希望谁是居中的，那这个时候你就把这个W的类给它加上就完事了啊，大家加上就完事了，然后再往下看，那我们整个这个top bar这个rapper的样式就设置完了啊，我们简单写几个注释，这个是什么呢？哎，这个是设置我们的宽度啊，设置我们的宽度是全屏啊，全屏的一个宽度，然后呢，这是设置我们这个高度，设置这个高度和我们这个行高啊，行高主要的目的是让我们这个文字垂直居中啊，然后这个呢，是设置我们这个什么呀，设置背景颜色啊，这颜色好，这都设置完了，然后接下来我们要做的事儿就是让我们这几个块是不是让他们去水平排列呀，哎，什么排列主要几个块主要在这的话，我们其实是有三个块，一个叫做service，一个叫做shop car，还有个叫做user in for啊user in，所以这个时候呢，Service应该是向左浮动的，所以这个时候我们设置什么呢？这是设置我们这个左侧的这个导上来。

也就是我们这个service，我们直接写一个点一个S压v SE service，它应该是向向左浮动啊，向左浮动，然后的话，我们的这个shop card user in for这两个东西应该是向右浮动，所以这里边我们直接点一个这个shop card shop card，还有我们叫做一个这个user in。User in for啊应该是叫做一个向右浮动啊，向右向右浮动啊，Float一个这个right，哎，向右浮动，那这样是不是两边的都过去了，诶你看购物车还有这个这个登陆这个也就跑这边来了啊，然后我们这个浮动设置完了，浮动设置完了以后，我们还要注意一个问题，那你现在像我们这个小米商城的下边这一组这些东西，它是不是应该也是向左浮动了，哎，也是向左浮动，那这个东西是不是应该也是向这这这购物车不用管了，对吧？但是这组玩意儿是不是应该也是浮动啊，诶同样他们也应该去向左浮动啊，也应该向左浮动，所以这个时候呢，其实就是谁呀，是不是让Li向左浮动，哎，向左浮动，所以这个时候我们就直接，呃，顺着写一下吧，Service，然后加上一个我们service下的LY，这些都是向左浮动，然后就直接，诶，还不能是service下的LY，那这个应该是什么呢？应该我们写的。

通用一点的话，应该是我们这个top bar下的LY，哎top把下的LY，那这样是不是就所有LY就都变成了一个向左浮动的效果了，哎，然后就都横过来了啊，就都横过来啊，也比较简单，跟我们之前说那个没什么太大的区别啊叭较简单，然后这里边的话还需要注意一点问题，现在的话，我们的这个service，还有这个shop card，他们的外层容器都是这个top bar，对吧，都是这个top bar，所以现在等于说什么呢？等于说我这个top bar里边的所有元素啊，Top bar里边的有元素都干嘛了，都浮动了，所以你现在看top bar的高度说少高度是零，为什么是零，因为它的高度塌陷了啊，高度塌陷了，所以这个问题其实解不解决都行，因为它不涉及到布局了，所以解不解决都行，如果你说我想解决一下的话，那你就给这个to把呢，你再加一个这个可丽尔fix。

那这样再看它的高度，哎，高度的话，我们来看一下，我们直接刷新一下。Top bar fix。我们来看一下我们这个类是不是写错了。

这个样式应该写错了，所以你看到我们这个东西它是不是没有生效啊，哎，这个宽度是1126，但是高度是不是还是还是一个零啊，哎，还是一个零，证明还是塌陷了，还是塌陷的应该是我们这个base里面那个样式写的问题，base.cssc我是不是少写了一个R，哎，少写的R可fix啊可fix你们写的时候一定要注意啊，一定要注意不要像我这样犯这种错误啊，直接点开，这时候再看是不是高度40还塌不塌了，哎，就不塌陷了啊，就不塌陷了，但是这个问题其实处不处理都行啊，但是你最好还是处理一下啊，最好处理一下好，接下来我们再来看，接下来再整的话，就是我们的一个文字的一个效果了，对吧，就是一个文字效果了，浮动我们都设置完了是吧，这个是我们这个设置，我们这个设置我们这个右侧的一个菜单对吧，右侧一个导航栏，这都完事了啊，这都完事儿了，然后再来做的话，就是设置一下我们这个文字的一个效果文字。

的效果，这都已经写了，12个像素是这个颜色，对吧？我们这都已经写了，你可以看一下图啊，所以在这儿的话，我们还是应该是它里边所有的A是不是都是那个颜色呀？哎，所以在这我们就直接统一设置一下，我们来设置什么呢？设置我们这个超链接的一个颜色，超链接的一个颜色，超链接颜色呢，我们这直接写一个点一个top bar下边的所有的A，所有A的话，首先它的fo size fo size是一个12个像素，然后的话字体颜色是一个什么呢？了color的，我们这应该是一个井号，叫做一个B0B0B0是那个颜色，整个颜色是不是都变过来了，哎，然后这个A的话没有下划线，而且这个没有下划线，应该是所有A都没有下划线，所以我们把这个东西往这边写，往这个被子里边写，诶这是来去除我们这个A的一个下划线，这样的话就是基本上你下回的所有的A就都没有什么了，就都没有这个下划线啊，我们直接来一个AA的话，我们来一个这个taxre taxre我们直接来一个这个nu，然后颜色的话，我们也给它呃重置，呃颜色的话，颜色我们也给它重置一下吧，那就就是以后不让它是那个是那个是那个蓝色是吧，变成这么一个近似于黑灰这么一个颜色，然后待会我们再去需要再去改，因为那个蓝色实际调起来很费劲是吧，都统一到这儿，然后这个时候你看，然后再看这堆下划线是不是就都都没了，哎，下划线都没了，然后整体的一个样式基本上就已经就已经出来了啊，就已经出来，然后我们再。

看的问题就是，呃，现在的话我们这个效果，哎，我们这个效果的话，你现在看啊，这儿能点，但是上边干嘛呢？点不了对吧，上边点不了，因为现在我们的A的范围是不是只是这块啊，哎，上边的这个范围就不算是A了，点不了，那我们来看看原版的什么效果，如果说它也是这样，只是这块能点，那我们就不用改了，如果不一样，我们是不是就需要处理一下了，哎，所以这时候我们看原版，原版的话你看这能点，这能点，这能点是不是整个这个范围都可以去点击啊，所以那就意味着等于是这一块实际上它都是什么，都是A，那都是A，就意味着我这个A是不是要。

变一下了，哎，然A要变一下了，A要发生一些变化了，所以这一块，那既然整个范围都是A，那处理起来也很简单，我们直接让这个A变成一个块元素啊display，我们来让它整一个block变成块元素，然后再看是不是上下就都可以点了，哎上下都可以点了，那这样点起来就没问题了，包括这块是不是也是一样，哎，就都可以去点击了，然后的话还有一点就是诶我们移动上去以后，它会有一个whole的效果，是不是字体的颜色会发生变化呀，哎，发生变化这是什么颜色呀，我们来看一下，移动上去以后，我们看到style，我们要换一个颜色，那其实换颜色很简单，就是给它设置一个这个这个whole，但是我们要看一下它是一个什么颜色。

这个颜色现在我们来看看，它是显示不出来。对吧，这个颜色先显示出来，我这样我给它保持一个这个J的状态，然后再看它是什么颜色。是一个啊，就是一个白色对吧，就是一个白色，呃，白色就好办了，直接给他，直接给他变过来就行。白色的话，我们就直接给它来一个嗯，Top，把下边的A我们直接冒号来一个这个ho的话，我们直接来一个color color来一个井号FF设置一个白色啊，变成白色这么一个效果再看。诶是不是就OK了，哎，整个包括这块什么这个东西是不是都OK了，哎，就都OK了啊，然后再来看我们中间那还有一条线，还有一条线，也就是这个这个线对吧，这个中间的细线，我们用的是一个小竖线对吧？它的颜色是一个424242，我们要单独给它设置一下，因为这个东西我没有放到A里边，我们是放到一个Li里边，那个Li是不是起个class叫做叫做叫做line呀，哎，Line，所以这个时候我们要单独给它设置一下样式设置谁呢？设置的是我们这个点一个top bar下边的一个这个LALA的话，我们这个color刚才看到是一个井号，是一个424242，诶是这么一个颜色，424242这么一个颜色，然后我们再看效果。

哎，这个线是不是就已经就已经出来了，哎，大小的话，我们来看跟图上的网。大小。位置的话，我们跟图上的相比，它位置有点偏下啊，位置点下，待会儿我们来调整一下它的位置啊，待会儿咱们调整位置，但是先别着急，我们先把这个其他东西给它写完啊，这东西写那这里边的话，呃，刚才我们这个字体是12像素，这个盖的话，我们也应该调成12像素，尽量干嘛呢？统一一下啊，统一一下也是一个12像素，调整完了以后，大概是是这样一个效果，哎，你看12个像素以后，它的位置基本上就和我们那个原版的那个位置就。

基本上就基本上一样了，对吧，就一样了，所以你调完这个字体大小以后，你的这个你的这个位置呢，也就也就不用调了，如果要调的话，你可以再用那个什么呀，那个那个ver tical LA啊可以再调整一下的位置，你往上挪一点，往下挪一点，或者你不想用那个verical，哎，你也可以用什么呢？哎，用我们那个定位啊，用那个呃呃，Position是吧，把它往上拉一点，或者往下拉一点都行啊，待会我们再调整一下吧，那这里边它整完了以后，还有一点就是现在我们这个东西挤的是不是特别紧啊，他们之间是不是还有一个距离啊，哎，我这都给你体现出来了，你看我这给你量了，是不是前后有一个各有一个八个像素的一个距离啊，哎，前后各有一个八个像素距离，这个距离就好办了，我直接给谁呢？直接给我这个LA加上加上一个什么呢？Marin啊marin诶这个什么呢？诶上下不要，诶左右呢，我们给它来一个什么呢？来一个这个八个像素啊左右来一个八个像素，那这样的效果就是它就可以把这个距离给它撑开了。

包括这儿，包括这儿距离是不是就都撑开了，哎，那现在基本上就会有一个比较，哎，比较好的一个效果，比较好的效果了，但是你会觉得，如果你觉得说现在我觉得这个位置还可以了，对吧，这个位置还可以了，但如果说你说老师不行，我觉得这个位置，这个位置不太好，我想让这个盖儿啊，往上去去，往上去去的话，还有一种方式，我们直接给他设置一个什么呢？我们直接给设置一个margin margin的话，我可以给他设置一个margin top margin top的话，比如说来一个负二像素，往上往上挪两个像素，那这样它的整个位置是不是就就就就就就往上走了，哎，往上走了有点大了是吧。然后呢，我再调整一下，我来一个这个。

负一呢？负一啊，往上调的小一点，这个位置呢，就会有一些这个改变啊，当然就是其实这里边我觉得调不调都无所谓了，因为我觉得那个位置还可以是吧，如果你要想调的话，你可以用定位或者用margin去调整都可以啊，我就不调了，好这里边我们来写个注释，这个是设置什么呢？这个是设置我们这个超链接，超链接移入的一个效果，这个呢是设置，设置我们中间这个什么呢？哎，中间这个分隔线啊，中间这个分隔线，那基本上其实你会发现这么几个样式的话，就把我们中间整个这块是不是都给它，左边这块就已经完成了，哎，跟我们原版的基本上就就一模一样了，对吧？一模一样了啊，这块整完了以后再来看，再来看就是我们的，呃，这个位置啊，整个这个位置的话，其实你会发现跟这个原版的话差距还挺大的啊，差距还挺大的，那这里边我们从几个角度来处理呢，我们先处理一下这个东西啊，这。

定义，首先这个购物车它的整体宽度是一个120啊120，而我现在是不是没有写宽度啊，哎，没有写宽度，所以在这儿我们来设置一下这个购物车，购物车也是同样啊，注意这个宽度应该给谁，这个宽度你看原版里边，其实我们会发现原版里边它这个两个位置啊，就点没了。这购物车整个你看整个这个边儿上是不是都可以去点击啊，哎，那哪哪都可以去，都可以去点击，诶他这。刚才好像他这感觉有点有点有点有点bug似的啊，一闪一闪的，先不管它了啊，比如说现在我们的这个购物车的话，你看我点这儿也能点，点这也能点，点这也能点，所以很明显它的整个应该也是一个超链接，所以设置购物车大小的时候，我们这个大小，比如说这个宽度一百二也应该指定给谁，也应该指定购物车里边那个超链接购物车的话，我们叫做shop card。Shop car在这我们写一下，这是来设置我们这个购物车的一个样式，我们直接来一个点一个shop card，点一个shop cart里边的这个AA的话有一个宽度，宽度是一个120像素，把这个宽度指定出来，那基本上这个效果就就出来了。

哎，宽度当然我还诶shop car里边的A，我们来看shop cart里边的一个A，呃，宽度设置了一个120像素，但是我们看的好像是好像是没有生效对吧，这宽哎出来了，生效了，只不过这宽度是往往后边展了，哎往后边展了，那这里边我们还有一点需要注意，它这个整个购物车是有一个背景颜色，这个背景颜色跟其他那个颜色是不是是不是不太一样啊，哎不太一样，所以我们单独要给它设置一个不同的这个背景颜色，这背景颜色我没取，没取的话我们在这看一眼吧。这景颜色是一个424242，所以我们这个时候单独给它设置一个背景颜色，嗯，叫做一个background color background color，我们直接写一个井号，424242，设置完了以后，毕竟颜色设置上了，但是很明显我们的这个问题啊，跟我们这个原图相比较，我们的这个问题呢，其实是什么呢？哎，它位置基本上已经对了，你看这个位置是吧？哎，位置基本上跟图片里是一模一样了啊，但是只不过不同点就是这个购物车它现在是应该是一个居中的，而这是不是这是不是等于靠左了啊，所以我们要给它设置一个tax，来一个什么呢？T，我们来一个这个center，我们要让他干嘛呢？来一个这个水平居中啊，它居中过去，这样效果就可以去接受了，效果可以接受的话，我们这字啊，写的时候差点东西，它里边还有一个购物车的一个数量，我们应该再给它写上，最好跟它一模一样，对吧，最好跟他一模一样，我们这里边购物车应该是有一个中文的括号。

中文的括号啊，它那应该是全角的对吧，然后写一个这个零，哎，那大概是不是就这样一个效果，哎，这样一个效果，那这个效果的话，基本上跟上边那个就就一样了，但是感觉的上它那个车跟这个购物之间还有一点儿呃小距离是吧？呃，这个距离呢。

调不调都行，调的话也简单，嗯，A的话我们就。A是一个120像素，它里边是有一个I是那个小图标，所以我们直接是烧cart里边那个II的话，我们给它设置一个margin margin rightin right，这个距离呢，很明显不能太大，我来一个两个像素，我们来看看效果。两个像素我们看效果，那这样的距离是不是就基本上差不多了啊，差不多了啊，我觉得这个距离就合适了啊，咱们就不再去调，不再去那么细致调了，我们就调成这个效果就OK了啊，这个效果就OK了，好那么整个我们的这个购物车这块就已经完成了，然后还有一点就是你要看一下原版，原版的话，购物车的话，你看这儿啊，你实际上当你购物车后到以后，购物车它首先这个弹出层我们先不管，待会我们再一起处理，我们先说购物车这个样式，购物车是不是会变成一个白色背景，然后它还有一个这个字体颜色的发生改变，哎，字体颜色的变化，所以这个都是我们需要处理的，这就比较简单了。

直接给我们这个，我们想一下啊，这个应该是给谁的，这个应该是给我们的，我可以给设置，或者也可以给谁呢，也可以给我们的这个整个这个谁呢。给这个Li去绑定ho，或者给这个谁呢？给这个ul去绑定ho，对吧？那这个ho应该给谁呢？诶那注意了这一点需要注意这个whole按道理来讲应该是给这个ul的，为什么要给这个ul，为什么要给ul，因为我们说了，待会儿它下边是不是有一个弹出层啊，这跟我们之前说那个问题一样，我们需要做的是效，做的效果是当我一到这里边的时候，这个弹出层是不是依然不消失啊，哎，依然不消失，那所以就导致你的ho味，必须给绑定一个公共的副元素，才能让它达到一个不消失的效果，否则的话，你就是从这一移出去是不是就会消失啊，哎，所以这没得说了，直接把这个后绑定给我们的这个ul，也就是shop shop啊RC，我们给他粘过来shop，所以这里边我们直接来一个这是一个这个shop card，给shop card设置一个以后再给A设置样式啊，我们以后要。

把A的背景颜色变成什么呢？变成一个白色，然后字体颜色，哎，我们是字体颜色变成一个那个橙色，橙色应该是跟它这个logo的颜色是一样的，这logo是什么色的。Logo是个图片，是个图片呢，我们简单的吸一下吧。

我这我们就系这个log，没吸这个log的颜色啊，我们这简单的吸一下这个logo的颜色啊，从这个取色器，因为这个颜色刚才跟这个字的颜色是一样的啊，我们吸一下是一个FF6700，因为它俩是一个颜色嘛，对吧，FF6700，所以这个时候我们这个颜色啊，直接井上一个FF6700，然后一设置看效果，哎，这时候一用哎是不是就这么一个效果呀，这下拉层我们待会一块处理啊，这里边我们先不管了，然后再往下看的话，其实就没什么东西了，再有东西就是诶，他们之间这有一个这个距离对吧，有一个距离他需要把整个把这哥们儿是往往左挤啊，那这个东西其实说白了就是给他指定一个什么呢，就给他指定一个这个margin margin lab就行了啊margin lab这个距离我这也没体现出来，待会儿我把我把我把图这个距离给你补上，你在看的时候就就有了啊，就有了在这儿呢，我简单去量一下。

呃，应该是一个25个像素对吧，25个像素我们取个整吧，取一个26，所以呢，我们直接给我们的这个shop car shop car，我给它设置一个这个外边距，我们叫做一个margin left是一个26个像素啊26像素，那这样的效果就是它会把我们整个这个框干嘛呀，哎，是不是就往往这边挤了，哎往这边挤了，那这样你看啊，我们这个效果跟我们这个图片里基本上就是一模一样啊，就是一模一样了，当然还有两个层我们没有写出来，待会儿我们再给它补上，那现在的话，诶，你会发现其实你写个导航那基本上很轻松了，那就是你只要知道你想要什么，哎想要什么以后，然后补上这个适当的样式就已经没问题了，对吧，就已经没问题了啊好，那这个是我们说的一个这个导航条出完成，但是那下拉层我们还没写，待会我们来一块来写一下，我们先来评一下。