尚硅谷前端基础 (95)

好，那么关于背景相关的这些基础知识我们就都说完了啊，后边说的这两个渐变是吧，两种渐变那主要还是呃了解一下，然后我们后边随着使用，我们随时再去加深理解，然后呢，我们就着这个呃，就是这个这个这个这个背景呢，我们再来说一个小练习。哪个练习呢？呃，在我们这个资料里边有一个这个PSD啊，1.pd，哎，我们这么一个练习啊，然你再去打开这么一个文件的时候，你你弹出那提示，呃，告诉你字体欠缺是吧，熟什么什么什么字体，你直接点这个什么呀，不要解决就行了啊，不用管它，我们也不用它这个字体啊，那这个时候呢，我们这个是一个网页的一个设计图啊，网页设计图注意了，这个是我们第一次去打开一个这个PSD的设计图啊，叫做一个PSD，那PSD这个设计图呢，它就是我们这个原版的一个这个Photoshop产生的一个文件，那我们简单说一下这个文件，这个设计图，PD的图跟我们平时用的PNG啊，JPG这些图它有什么区别呢？诶PID它是一个更复杂的一个结构，它是一个分层的结构，也就是说像我们之前用的PNG，它就是一个平面的图片，而我们这个PD它可能是由什么呀，哎，有十张图片100张。

甚至由上千张图片来组成这么一个图，一层压着一层，那这里边你要看什么呢？打开PID以后，你要看你这个右下角，你看这是有一堆的，你看这个文件夹有这种图，这都是什么呢？这些都是我们的网页里边的，这这这这这个PSD里边的一个图层啊图层，你看图层前面是不是一个小眼睛啊，诶你点那个小眼睛它就干嘛呢？它就眼睛没了，就隐藏了，眼睛出来就显示了，所以你看这儿，这是不是有一个叫做配置捞进这么一个东西啊，哎，你看这是谁，这就是这玩意儿，我一点就没了，再一点就出来了，下边也是同样，这里边的每一个东西一定对应的我们屏幕一个东西，你像我们这个head，诶HDR是吧，我这一点是不是上边那部分呀，诶，这部分就没了啊，User一点是不是这部分呀，哎，所以它这块也有一个分组是吧，Post是我们这个文章的一个列表，也就是说每一个图层啊，每一个图层我们都可以去设置它是显示还是隐藏啊，非常简单那。

那我们这节课呢，我们就简单来实现一下，我们怎么样能通过我们的一个，通过我们的这个，诶HTML啊，或者通过我们的NLCS，通过网页来实现一个我们这个PSD的设计图，那这一块呢，这个设计图其实整体来说它挺复杂的啊，挺复杂的，所以这个我们是通过这个设计图来学习一下，再加深一下的一个基本的一个使用，所以我们并不是整个全做，我们只做这个设计图里边的一部分，只是做什么呢？哎，只是做，我们就做这么一个框，就做这么一个框，哎，也是主要一个部分啊，这个框我们来看一下怎么做，其他部分我们就不管了，因为这个网页的布局相对来说会有点复杂啊，你不要看着简单，那实际上做起来会有点杂，所以我们只做这一个框，我们只是先练习一下什么呢，练习一下我们这PS一个使用，那比如说哎，我们就做这个框吧，哎，那现在我就想把这一部分干嘛呢？哎，把这一个部分在我的。

整个网页中给它进行一个哎，进行一个这个实现，那这个东西我们要怎么做？哎，首先我们还是先来分析一下它一个结构，首先我们这个框肯定毫无疑问整体上是一个什么，整体上是不是一个容器呀，哎，你用一个div，用一个section是吧？哎，用什么都行啊，整体上是一个容器，然后在这个容器里边，它是实际上呢，我们可以分上中下三个部分啊，上中下三个部分，上边的部分是我们的一个图片，诶中间这个部分呢，是我们的一些信息对吧，一些信息，然后在下边这个部分是我们的一个这个等于是一个这个评分这么一个东西，对吧？那这里边我们就可以把它整体分成三部分，那实际上就是一个大div里面再套上三个小的div，三个小div，上边这个div就放图片，没什么可说的，下边这个div呢，哎，我们可能需要放一个这个，放个标题对吧？哎放个标题，哎放个这玩意儿啊，放个。

这个段落对吧，然后最下边这个div能放几个星星啊，然后放这个，诶Facebook的这个链接对吧，这么一个意思，那这里边我们来看一下是怎么做，还是我们先来定义结构，嗯，在这里边我们来新建一个文件，我们来一个一零，哎一零这个是我们这个什么呢？诶这个是我们的一个。呃，电影的一个卡片吧，呃，因为这个它实际上是表示的是一个电影信息嘛，哎，所以我们起名极简，那叫一个电影卡片，那这里边呢，它比较复杂一点，我们这块还是先给它进行一下样式的一个重置啊，引入我们这个CSS下边一个re.css重置样式表，然后在这把我们的样式写上style标签，当然这里边实际上你看到像这些星星，像这个像这个它实际上是不是一些小的图标啊，哎，所以我们还可以把我们那个放awesome给它引进来啊，点儿我们下边的一个FA，下边的一个这个CSS下边的一个这个o.CSS直接引入，引入完了以后，我们整个一个页面的一个搭建就算是给它完成了，当然现在页面里什么都没有，然后我们来创建一下它一个结构，结构的话我们直接对照这来看吧，哎，结构刚才我们也说了是吧，我们做的是这个图，把它放在这。

首先我们来创建一个这个外层容器，外层容器我们这直接来个点一个aler o u TT呀啊OUT呀，就是一个aler，我们的外层容器，外层容器这表示的是我们整个这个块，整个这个块里边我们先这儿是我们这个创建什么呢？哎，创建我们图片的容器，哎创建我们图片这个容器，当然图片这个容器的话，其实严格意义上讲，你写不写都行，你直接写个图片也行，但是我们为了布局的话清晰一点，我们还是写一个我们叫做一个div，点一个IMPP啊哎图片的一个这个容器，然后下边呢，是我们的一个，诶主要内容，我们创建我们这个内容的一个容器啊，内容的容器，主要内容的话，我们就直接写一个div，诶给它来一个class，我们叫我们叫一个这个叫一个infer吧，诶叫一个infer，我们的一些信息啊信息，然后呢，在这我们。

下边是一个我们这个呃，一些这个呃分享啊一些这个评分的一个效果，所以这个是下边呢，是创建什么呢？哎，创建我们这个呃，这个评分的。

哎，平分的一个容器啊，评分的一个容器，那在这里边我们就div为s t star啊，Star一个rap wap啊star一个rap，放我们这个星星的对吧，这些东西，那这样一个结构我们就定义完了，结构完事以后，那这里边我们来看一下我们这个结构我们要怎么去处理啊，怎么去处理，先来看我们这个MG，这个rap mg river，很明显这里边很简单，我们其实只需要放一张什么呢？诶放一张图片，哎，放我们这个，哎设置我们这个图片，很明显在这儿我们应该用的是一个这个img标签，那这个时候我们是不是需要拿到这个图片，拿到这个图片，拿到这个图片的话，同样我们这儿也是需要进行切图，切图我们还是可以直接通过这个矩形框去选择它啊，直接切它就OK了，或者呢，像这个图片啊，它是我们这个，它实际上它本身就是已经是一个单独的图片了，它本身就是我们PSD里边的一个图层了。

所以我们可以单独的去处理这个图层，怎么处理呢？看这儿了，我们在工具栏这有一个这个箭头，这个是我们的一个选择工具和移动工具，你直接选中它，选中它以后的话，在这里边呢，你其实你就不用改，直接默认就行了，然后在这儿有一个有一个叫做自动选择，你要把这个勾给它勾上啊，然后这儿选择上图层啊，选到图层那这什么效果，你把这个勾上选择图层以后，它的效果就是当你选中我们网页中的每一个块的时候，你看这边啊，当我点这位个置位置的时候，这块它会跟着你去干嘛呀，他会跟着你去改变，也就说我点哪个就选中哪个组合，所以我点这个这个女的是吧，我这一点现在实际上就选中了它这个图层，然后我这一点是不是它就可以消失可以显示啊，哎，可以消失可以显示，然后呢，选中它以后，你直接按你键盘上的这个alt键，然后同时点那个眼睛，这个时候的效果就是只显示它一个。

让别的全都隐藏，就这么个效果，然后选中以后的话，呃，选中你再点按还是按照再点那就都出来了，对吧，按照的点就隐藏，别的再点都就都出来了，那我们先点上它，然后我们这还是选择图，哎选择这个图像，图像之前我们用那个矩形框去选的时候，我们选的是裁剪，这儿呢，我们直接选这个裁切，裁切诶然后都默认值，然后点击确定，那这样它就可以直接把这个图片给你切下来，我们就不用再去拖那个框了，然后文件还是我们导出，诶导出为诶你可以导出为PNG，最简单了，或者你可以直接存储为web所用所用格式啊，然后这去选一下也OKPG4这是69，哎，然后gpeg是一个10KB，然后这个GIFGIF是一个28KB，那这块我们是不是j PEG最小啊，我们看看啊24。

看看效果啊，呃，GBG效果也不错，然后也比较小，所以我们就直接把它保存一个，就GPG这么一个格式，然后我们直接来存储，存储到桌面，我们就叫一个，诶1.gpd，然后呢，我把这东西改回来啊，取消选择，然后还是out，我们把它们都显示出来，恢复到原来的一个情况，对吧，图片我们已经截好了，就是我们这个图，然后呢，在我们这里边，我们来新建一个文件夹，我们该一零了啊，该一零了，然后把这个图片放到这个一零里，放进去，图片是不是有了，哎，那接下来我们要做的事就简单了，你只需要把这个图片给它显示出来，我们这个是一个。点鞋盖img下边的一个一零下边的一个1.gvd，那这样图片是不是就已经出来了，哎，图片就已经出来了啊，然后再往下写，再下写的话就是我们的这里边它有一些这个字，呃，这个字啊就无所谓了，随便写就完事了，因为我们也没有必要跟他写的一样啊，当然你说老师我就想非得跟他写的一样也没问题啊，我就不写跟他一样了啊，我们这里边看首先呢，第一个是一个标题，标题的话我们这用一个H2h2.1个tle拍头，呃，HR呢，我们这个叫做一个这个动画电影。

动画电影对吧，我直接翻译过来了，哎，然后的话，下边一个这儿等于是有一个嘘标题是吧，嘘标题嘘题呢，我们在这用一个H3 h3的话，我们这个是一个这个class啊，Class我们这个叫做一个他这个animations animations实际上写的就是一个动画对吧，写的就是一个动画。动画，但是这里边的话，它实际上它也属于一个标题，我们想一下class，我给它起什么啊class，嗯，Class的话，我们给它叫一个。

我们。给他写一个类别吧，类别应该叫做cat GR是吧，我搜一下这个单词，单词突然想不起来怎么拼了啊，我们来一个这个翻译，诶，我们叫做一个这个类别，或者叫分类是吧，应该叫category。嗯，Cat啊是这个词啊，这个词我听一下。开瑞啊，我们直接给它粘过来啊，这里边我们粘过来以后，那这就叫这个名了啊分类了啊好，那这一块我们设置完了啊，还是你们写的时候也是单词想不起来呢，呃，弄个词典呀，查一下尽量能写英语，英文呢就写写英文啊写英文好，那这一块写完了再看还有什么，下边的话，我们还有一组这个介绍的文字，介绍的文字的话，我们就来一个这个P标签，P标签我们来1.1个int，叫做一个这个intro是吧，In intro里面写一个写写写他写了点字是吧，写了点字啊呃，我们呢，你也可以写一个LIM，直接给他写上，那这稍微有点长了是吧，我们写简单点吧。

哎，我们写简单点，诶这是一个什么呢？诶这是一部什么呢？这是一部这个诶一部这个迪士尼的一个什么呢？诶动画电影啊，动画电影非常非常的好看啊，非常非常好看，简单的写点描述啊，简单写描述，然后再往下再往下，下边的这儿是这么几个星星，对吧？几个星星，然后这是有一个Facebook的一个图标，星星的话，那我们直接来创建我们这个星星，创建星星，那这个星星的话，它是一个一组的，是不是四个星星啊，哎，四个星星，那这里边呢，最好我们最简单的方法，我们就直接来创建一个什么呢？创建一个u ly啊，创建一个u ly ul里边既然是四个星星呢，我就放这个四个LY啊，放这个四个LY我们先写上啊这个lul呢，我们给大来一个class，我们就叫做一个s starts star啊，叫做一个star啊，一个star在我们的这里边，我们。

门来放的这个就是这个星星啊，就说你有几个LY，那么你就有几个星星啊，有几个LY你就有几个星星，那这个时候我们来看一下它的样式，样式的话我们就直接class，那既然你要让它是星星，我们这块是不是要用到我们图标字体啊，哎，我们的这个放awesome，那所以我们这先来一个fas，星星是什么，我们来查一下，打开我们的文档。直接搜一下str叫做一个star，我们找找有没有。Star star稍微等一下，诶，应该就叫FV star，诶你看是不是就这个星星，哎，还有star是不是一半的星星，我们这块呢，我们也不用什么一半了，我们就直接来一个这个F。

Fste啊，直接给它粘过来，然后这个星星是不是就已经出来了，哎星星啊就已经出来了，然后我们这儿一共是需要的是，呃，需要的是几个呀，需要的是一个，哎四个星星对吧？四个星星啊，然后这儿我们来一个四个四个我复制一下四个星星啊，一共是四个星星，当然这四个星星里边实际上还有是有的是黄的，就是亮的，还有的是这个什么呀，是这个是这个灰的对吧，是这个灰的，所以这里边呢，哎，我们就给我们上边，上边这两个Li是不是应该它默认有两个是黄的呀，哎黄的那怎么办呢？我给上边这个Li加一个哎Li啊light，哎，亮的一个星星啊，亮的一个星星，然后待会我们再单独设置样式啊，先把类写上啊，当然你在写的时候，你可能一次性想不了这么多，你想不了这么多，你可以写一点SSS1点点写，或者想不了这么多，先写先写，写完了以后。

哪有不足我们再去修改，所以慢慢写，不要着急，然后再往下，下边是一个Facebook的这个图标，对吧，Facebook这个图标那里边的话，Facebook啊，这是我们创建我们这个，这很明显应该是一个分享的一个图标，Facebook在我们这应该也有是吧，Facebook Facebook Facebook Facebook图标在这是不是也有啊，哎，一模一样的，但是这个时候其实我们想一下这个意意，其实这东西在我们中国都都上不了是吧，这个破网站中国都访问不了，诶也不知道很奇怪，对吧，所以这个时候我们用一个我们自己的吧，自己我们有什么呀，知乎可不可以。知乎，诶知乎有是吧，或者你想不想用知乎，你可以用那个用微博或者是微信是不是都可以啊，那比如说我们就用一个微博吧，所以这个时候我们下边我再放一个图标，直接放一个我们新浪微博的一个图标，所以这个里边呢，我就直接用一个死SPA吧，啊死SPASPA我们给它来一个class class我们叫一个FA，这儿我们直接来一个FA的一个这个微博啊，FA的一个微博，当然这里边你也可以给它再套一个容器啊，你也给他给它套一个容器，两个块嘛，都行啊，这块我就不套了，好，哎呀，这应该还不是它，这应该是FFAB吧。

FFAB微博是不是也就出来了，哎，就出来了，那现在等于说我们这整个的一个结构就给它，就是结构上都给它整出来了，然后我们要给它来设置样式啊，设置样式那我们就一点点来写吧，啊在这里边我们先来干嘛呢？首先我们先来设置我们整个外层容器的一个结构啊，我们是一个al，我们直接点一个al，设置我们这个外层的一个容器，我们直接来一个点一个aler。Aler的话，那我们这要确定一下它的大小，那同样我们直接用矩形块去量一下就行了啊，量一下我们干嘛呢？哎，直接从这个左上角。

这块有点量的不太准了啊，我们来诶，其实我应该可以直接去来看一下。哎，我们是不是可以直接通过我们这个就是你按着你的CTRL键，然后你移动你的鼠标在这里边，你就可以直接看到这个什么呀，哎，看到这个框的一个大小，当然这个时候啊，它这个框的大小啊，你看的时候它不是，哎，它不是那么的，不是那么准确，因为你现在我现在的话很难诶选中它这个整个一个框，你看它，它里边的大小就没有显示，所以这块为了准一点，我们还是直接拖一下，拖的时候你注意啊，像这个东西我们说一下它的整个的一个高度，高度我们这里边用不用去给它确定啊，高度注意，像这种东西高度一般都是不需要确定的，为什么高度不确定，因为我们想一下，它里边显示的是一些电影的一个信息，而这个信息是不是有可能多，也有可能少啊，哎，所以如果你把高度给它确定了的话，那这个时候它里边的那个内容如果你多了的话，可能一出或者。

出滚动条少了的话，那可能就就就空一大块，所以这个时候你看它每一个元素的高度，它每一个元素的高度，你看这一块实际上是不是都不太一样啊，这码这个就比较多，这就比较少，因为马这个图片是比较大呀，哎，所以这个时候我们在设置的时候，它的高度我们不用管高度就让它被内容撑开就完事儿了，它有多少内容你就多高就行了，所以高度我们这儿是不用处理的，我们唯一一个需要处理的就是什么呢？它的一个宽度，宽度我们要给它确定了，因为这个东西如果不一边宽，它会很难看，所以我们要量的话，也只是量一下它的一个宽。宽其实也不用量了，宽应该就是跟我们这个图片是不是一样的呀，一样的，但是我们为了保险，我们还是确定一下。

从这量到我们这个边，它的一个宽度是一个240个像素啊，240个像素，所以这个时候我们直接给它一个外是一个240，这图片是不是240，我们看看是不是正好240，哎，两百四啊，所以外我们这儿给他设置一个240，然后的话，我们来看一下整个宽度定了这字是不是就换行了，哎，然后为了看的清楚一点，我们给它设置一个居中，诶居中我们来一个零，然后来一个凹凸AO to，嗯，往下呢，稍微调一点啊，我这来一个100个像素啊，往下调一稍调一点，那这一块整个这个宽度就给它定出来了，宽度定出来以后，然后再看我们外围，我们还需要做什么。外围的话我们来看一下，嗯，外围的话，它的下边这个部分我们来看一下，嗯，下边这个部分实际上有一个感觉上是一个不是特别明显的边块，但是我觉得这一块的话，其实你说它是边框也行，或者你说它是阴影是不是也行啊，哎，是阴影，所以这里边呢，我们就不给它设置边框了，我直接给它周围呢设置一个阴影啊，设置一个阴影，所以这个时候呢，我们直接给它来设置我们这个阴影，设置我们这个阴影的一个效果，阴影的话，我们叫做一个box，一个shadow box shadow的话偏移亮我们不让它偏移，然后的话，我们这个虚这个这个凝半径，我给它设置一个十个像素，然后呢，颜色的话，我们用一个RGBARDBA这的000，然后这来一个点三，大概是这么一个透明效果，那这样基本上就比较的比较立体了，对吧，模糊半。

你还可以再调，那我就设这么一个，那整体上这个效果就出来了，所以这个边框的话，呃，如果你说把它作为一个边框来设计也行，那在这儿我感觉我看这个图上不像是边框，但是如果你觉得是边框的话，你可以直接给它加边框都可以啊，这个比较简单，然后再往下的话，就是它里边的这些这个这个字了，对吧，这个字这个字的话，第一个是我们的，诶不是我们先整一下图片啊，我们先整一下图片，图片的问题我们还没有处理，诶有同学老师你这图片不是显示的效果已经挺好的吗？还要处理图片干嘛呀？哎，注意注意了，图片虽然现在小显示的效果还可以，是因为现在我们这个图片它正好跟我们这个元素是一边宽的，假如说你这用一个比较宽的图片的话，那你会发现图片是不是就会就会溢出了，哎就溢了，所以这个时候我们要干嘛呢？哎，我们来设置一下我们这个图片，设置我们这个图片，图片的话，在这我们应该是一个点。

啊，一个这个img rapper，诶下边的一个我们叫做一个IgMg的话，我们应该至少写一个宽度100%，你要它的宽度是什么呀？哎，宽度是一个100%，和副元素宽度是一样的，还是强调一点，只需要指定一个，不需要指定多少，哎，就是你不需要指定高度，因为宽度定了以后，高度就自动跟着调了，啊跟着调了是这么一个，然后还有一个问题，可能不是那么明显，但是这个问题我们之前说过提到过MG，我们可以给它设置一个一个像素，然后来一个，然后来一个solid，这个时候其实你会发现在我们这个div下边实际上会有一个空格，诶空格为什么？因为我们图片的特点跟字体特点很像，所以图片默认情况下是基线对齐的，那么基线的位置它靠上，所以会导致下边会出现一个空白啊，会转一空白，所以这个时候解决这个问题的话，我们就是一个vertical line，我们来一个。

靠或者包他们都行，只要不让它基线对齐，那这样这个框就这个空白就没了啊，然后我们可以把这边框给它去掉，所以这个东西啊，你设不设置都行，你不设置的话，其实多那么一块距离，在这种情况下看不出来啊，也看不出来，好这个是我们说的整个一个，哎，上边的部分就完事了，然后再往下，下边呢，是我们这个标题动画电影我们写一下。

哎，设置我们这个标题，标题的话，我们这个是哪里边的呀，我们叫做一个in for里边的，我们叫做一个点，一个这个title INF for里边的title啊INF for里边的title，然后下边还有个小标题是我们INF for里边的，我们叫做一个这个哎，Category categ green啊，两个玩意儿，两个东西呢，我们这来看一下，首先这个。首先我们会看到一个特点，什么特点呢？整个的话，它实际上我们整个这个，它这里边是不是会有一个这个会有一个编剧。他是不是整个把我们这一块的东西都往里给他挤了呀，哎，往里给挤了，所以这个时候我们应该给中间这个元素呢，给它设置一个，哎，给他设一个内边距啊，把整个这个内容给它往里去干嘛呢？去挤一下这内边距是多少，我们大概量一下，它应该是两边都是一样的，那里不一样，我们也最好取一个一样的，我们就量到这块吧，这是一个。

我应该是多量了一点啊，我重新再量一下。呃，是一个应该是多量了一个像素，多量了一个像素，所以这个距离应该是一个18个像素啊，18个像素看这边的距离呢，这边就无所谓了啊，这无所谓了，因为你这边设置一个18，那这边我们就不妨就给它设置一个一样的啊，那整体都往里去挤就完事了，所以这个时候呢，我们要给我们整个这个音符啊，音符往里去挤一下，音符我们给它设置一个拍Ding，拍Ding的话，我们左右呢不要哎，呃上下不要左右是一个18个像素，然后这个时候我们看到的效果就是这个文字的话，就会往里去往里去挤，对吧，往里去挤下边这个我们带来处理，因为它下边这个边距，它下边个边距，我感觉我们看一下啊。

如果他也是18，我们可以一块指定，嗯。基本上是一样的，对吧，基本是一样的，但是它稍微的小一点，它应该16对吧，所以这个我们先不管它了，待会儿我们再去调，我们先写上边了，上边的话整完了以后，我们来设置一下这个字体，字体的话怎么看，呃，首先呢，我们先来看一下这个字体的一个大小，这个态度字体怎么看，字体的话看这儿，你点一下这个T，在我们里一个T，然后你通过T直接选中这个文字，然后在这儿就可以显示一个字体的格式，但是就这个图来讲，我们就不管自己什么格式了，你真正到公司开发以后，因为我这个设计图是一个国外的设计图，它跟我们中国的情况不太一样，我们中国应该是中文字体，对吧，那这儿它是一个，这个它是一个英文字体，而这个字体其实我们也不是特别常用，所以字体我们就不管了啊，但是这儿你要知道，这是看字体格式的啊，是温雅黑还是宋体还是什么字体，这儿是看粗细的regular就是正常是吧，还有什么这个还还有什么这个Bo的就是加粗对吧，你可以去选一下自体格式，然。

然后这呢是我们字体的一个大小，这是一个17.99像素，那基本上你可以相当于是一个18个像素，然后这个位置是一个字体的一个颜色啊，你要知道怎么看，所以这个玩意儿的话，我们字体格式我们就不管了，我们取一个大小，取一个颜色是一个18个像素，然后颜色是一个717171，所以这个时候我们就直接干嘛呢，到这儿来给它设置一下，我们教，诶我们来看一下这color是不是一样的啊，不一样，只有它是这个颜色，所以这个时候我们给它设置一个color color是一个井号，一个717171，然后大小的话，方size，这应该是一个18个像素啊，18个像素，然后这个时候这个字的效果基本就出来了，对吧？字的效果，然后再往下的话，再看这块你改完了，你看完这个文字以后，你直接ESC摁E，然后取消取消选择啊，取消选择你就不要对这个文文字产生了影响啊，ESC退出就行了，然后再看的话，我们的这个玩意儿它上下传个。

离啊，摁着CTRL一点，你看上边是13个像素，下边是一个15个像素，那下边这个呢，诶，它就是一个15个像素，对吧？所以这时候呢，我们要给我们的这个animation films，这个films给它设置一个编距啊，上边是13，下边是一个15，所以呢，在这我们直接来一个marin marin上边是13个像素，右边是零，然后下边是15像素，哎，左边也是零，那这样的效果就是我们这个位置就给它出来对吧，这个整个就没有问题了啊，整个它就没有问题了，然后再往下的话，是我们的这个嘘题，这个动画，动画这个嘘题的话，它有点特殊，它下边是不是还有一个这个这个玩意儿啊，哎，这个玩意儿，这个玩意儿的话，我们可以直接。

哎，我们是不是可以直接通过我们的这个，嗯，既然在前边我可以通过伪类去设置，诶那个伪元素，伪元素去设置，或者也可以直接在它前边加一个什么呀，加一个东西，比如说我加一个SPA，加一个SPA，或者加一个这个I标签，专门表示我们小图标嘛，小图标我们这叫做一个诶class我们叫做一个as，然后那个类叫什么玩意儿来着，那个类我们得看一下，在京东那个顶部导航点，我们用过这个，在那个北京前边北京北京。叫做一个FA map marker的一个out，叫这么一个类，所以这个时候直接把这个类往这一写就完事了啊一写然后这是不是就出来了，哎，就出来了啊，我们就不管它了，写完了以后，当然你也可以通过伪类去设置啊，伪类这个尾元素啊伪元素好，那这写完了，然后设置一下样式大小，它应该小一些，看一下大小。大小是一个14像素是吧，14像素，然后颜色是一个ACA啊这么一个颜色，风塞诶color color是一个我们叫做井号一个这个颜色，然后的话，我们fo size size是一个14个像素，14个像素，然后写完了以后，它是变成了这样。

我把这加错地儿了，这应该是放到我们这个动画这个位置，对吧，不应该放到我们这个动画电影上啊，这属于这块的，然后整个这一块是不是就给它设置完了，哎设置完了以后再看问题，再看问题就是它的这块的话，我们这个整个这个图标跟我们后边这个东西它之间是有一个间距啊，诶间距大概是一个。七像素CTRL点一下，点不到大概会有一个七个像素的一个边距，七个像素的边距的话，那我们直接给我们的这个，呃，Categ GR categ grey里边的这个I，这个I啊就这小图标嘛，我们设置一个margin right margin right来个七个像素，把这玩意儿往那边挤七个像素，那这样他的位置是不是就过去了，哎，位置过去了很简单，然后的话还有个小问题，就是它实际上它比这个要稍微的还要往往里去一点，有那么。

四个像素对吧，有那么四个像素，所以这个时候呢，其实这种情况你设不设置都行，但是如果你要设置的一样的话，跟它一样的话，你最好在这再写一个margin left，你来一个四像素，那这样它就会自动往里去了啊，往里去了那这个位置基本上就OK了啊，这个位置基本上OK了，好，那这个是我们这个动画，动画完事了以后，下边呢，是我们这个整个这个段落，这个段落就比较的简单了，我们直接写上就完事儿了啊，往下直接来设置，设置我们的这个简介的信息啊，简介的一个这个样式，简介的话是我们这个点in for，下边的我们叫做一个intro串，点一个串音串的话，这里边颜色的话，它们俩颜色应该是一样的，大小也应该是也应该是一样的，我们来看一下。

呃，应该是一样的，所以像这个样式，其实我可以不用写在这儿，我可以直接给它提到这儿，写到这个什么呀，写到in fort啊，写到in for这以后的好处，这我可以不用写了，这个我可以不用写了，包括这也可以不用写了，因为这两个是不是就都是一样的了，哎，都是一样的啊，那这样一个效果我们整出来以后，接下来呢，它同样也应该往里去点，所以我给它也来一个marin life marin life呢，我们来一个四个像素，让它往里去一点啊，往里去一点，那这样上边两个就对齐了，字体大小本来也就都调好了，就不用调了，然后再看的话，就是我们这个行间距，它的这个行之间是有个距离的，而我这个行与行之间是不是贴的会非常近啊，哎，非常近，然后呢，还有一个就是我们这个段落跟上边是不是也有个距离啊，我们先看这个距离，呃，这个距离的话，我们大概量一下。量一下大概距离是一个23 23的话，因为是字儿嘛，字儿它有些不准的地方，所以我们就直接取个整，我们取个20，所以这个时候我们直接来一个marin top marin top是一个20像素，那这样的效果就是它会让我们整个段落往下拉，然后的话就是一个行间距，行间距我们来看它是多少行间距，从这我们量到大概这个位置吧，这个位置大概是一个六个像素，行间距是六个像素，那我们行间距应该是通过我们的line he来设置的，那我们来看一下我们的字是14个像素，那我们需要行间距是六个像素，那我们是不是正好用我们的这个这个。

哎，十十四加六就行了，哎，所以我们横间距Li应该是一个20像素，因为lih减去方size等于横间距嘛，那这样这个距离是不就出来了，哎，这样就比较的比较合适了啊，比较合适了，但是你设置完行间距以后，我们来看一下这。设置完行间距以后，它的整个距离实际上是高了，就变成24个像素了，为什么24个呢？因为行间距你是不是会哎多出这么上下多出一个距离啊，哎多出一个距离，所以导致我们这个Mar镜的距离啊，它就它就变大了啊，其实应该是多了这么334个像素的样子，所以这个时候你可以把它调小一点啊，你可以调小一点，就把这个距离稍微调小一点，当然其实差这两个像素也差不了太多，基本上你看现在效果是基本上是一致的是吧，那一两个像素也不太重要啊，不太重要，然后再往下边呢，是我们的这个星星这块对吧，星这块这一块的位置也比较简单，那首先的话，它有一个高度，这个高度你得是给它确定下来的啊，这个高度你得确定一下，这个高度是一个我们直接看一下。

呃，这个高度我们直接从这往下一拖，这一块的高度是固定的啊，一定注意，因为它的内容不会发生改变，高度是一个47 47应该是，诶正好算上边框是不是一共47啊，那么高度就是一个46，所以下边呢是设置，设置我们那个下边的一个这个内容，我们这个星星是吧，点一个我们叫做一个s tr star，一个rapper w PP呀，PP呀，我们这需要给它设置一个高度，高度刚才说了多少来着。

47加上边框47，所以这个时候高度我们就直接给它写一个这个46个像素高度给它定上了，然后整个这个结构其实就基本上就定出来了，是吧？然后我们这还需要给它设置一个边框上边框上边框我们先吸一下颜色，点这个取色器，直接一吸是一个191919CTRLC复制一下，这我们直接来一个boder top一个像素啊，你看粗细你要看一下啊，一个像素，然后是一个solid的，然后是一个井号，一个191919上边的这个边框我们就给它出来了，是不是就这样一个效果呀，哎，这样一个效果，诶，然后我们再看看啊，再看看上面的段落，段落跟它的距离是不是有点近了，哎，的确是有点近了，也就说我这个段落实际上跟它下边是不是这个边框，这它时间是不是还有这么一个距离啊，哎，这显示的是一个21个像素，但是有一个行高，所以我们不妨呢，就把这个margin啊，Bottom啊marin bottom也设置一个18啊marin bottom，我们也设置一个18个像素，那这里。

哎，我们这样式写的就有点恶心了，因为这东西是不是是不是太多了，哎太多了，所以这个时候呢，我们就直接给它设置一个我们这个margin margin的话，我们上下是一个这个18像素，哎左右呢，我就直接都给它取一个四个像素，那这样我就把它往里挤一下就完事了啊。哎，然后这我们一保存再看这个效果，诶诶看他去了啊，看我们这个这样是不是就OK了，哎这样就OK了啊，那大概就是这么一个效果啊，这一效果然后的话就是调整我们这一堆的这个这个星星，还有我们这个这这这这这这个玩意儿，对吧，星星，嗯这一块我们来看看怎么设置，哎呀，这一块其实我刚才写的有点麻烦了，因为我在这一块实际上我是不是用的这个Li去整的这块啊哎，我用的是一个Li整的，去整整设置了这这块内容，用Li的话就意味着我们整个这个呃，U Li啊Li啊，它们都是一个，这个都是一个块元素啊，都是一个块元素，所以你要让他们是位置，你需要让他们去。

浮动啊，也就说你至少span的话，浮不浮动都行，但是你ul时必须得浮动了，哎，所以这车实用，这个ul稍微有点麻烦，没关系，我们就直接写吧，那这个时候我们先让我们这个星星横过来啊，所以在这儿我们来设置，设置我们这个星星的样式，设置我们星星的一个样式，星星的样式我们先让星星浮过来，我们直接点一个这个SSPA浮过来，应该是向左浮动啊，向左浮动，同样我们这个微博那个微博那个span对吧，SPA span我们叫一个FA微博吧，FA微博我们这应该是一个点一个这个star rapper下边一个FA微博这个应该是Fla一个right向向右浮动。

Float一个这个right，哎，Right让它向右浮动，那这样的效果就是我左边右边呢，就各有一个了啊，就各有各有一个啊是这样一个效果，那这一块设置完了以后的话，其实呃问题现在麻烦就麻烦在这块这块的话，现在我们这个玩意儿，它默认它是它是靠上的对吧，靠上的那我现在要想的居中，那之前我们说一个方式，我们是不是可以直接是通过把这个Li head设置的和它一样啊，诶Li head我们直接来一个46个像素，那这样的话，其实你们发现我们这个星星是居中过的，但是我们的这个这个这这这这微博这个图标是完全完全没反应啊，哎，完全没反应，因为现在这个微博这个图标它等于是一个，呃，你虽然是也让它浮动了，但是它本身的话，就是因为浮动才产生这个问题，你看Li这块它是不是没有没有浮动了，哎，Li没有浮动，所以就没有这个事儿啊，没有这个事儿，但是我们这个span浮动了。

所以这个时候这个拉head对它呢，就不起作用啊，就不起作用了，那你要想让它垂直居中的就就就稍微的麻烦一些啊，稍微麻烦一些，那所以这块我们想一下，我们怎么让他去调整一下它的这个位置啊，调整一下它这个位置，那这里的话我们先解决一个。这个问题吧，其实也好解决，我们在这儿呢，我不用SPA了，我把它也换成一个ULUL里边呢，我也用L啊L我们叫一个class fas，那这块我们叫做一个FA的一个这个微博，哎，我都给它换成一样就完事啊，然后呢，这个呢，我们叫一个class class，我叫一个微博微博啊然后呢，这我就不写它了，我直接写它，那这样它们两个结构是不是就一样了，这应该是FAB吧，FAB这样他们两个结构一样了，都是ul里边套LY，那这样是不是都可以达到这么一个居中的一个效果了，哎，所以你可以诶改结构也可以改样式啊，当然刚才那个改样式也行，你给通过margin去给它设置一下也行，但是比较麻烦，我就不处理了啊，就不处理了，那这里边我们就把这个整个这个结构就给它整完了，对吧，但是这里边呢，我们注意一下，像我刚才说那个，我们写一个网页的时候，这个结构可能一开始我们去设计个结构的时候，一下子设计的可能会有。

有一些问题，那像这儿可能就没考虑充分，或者那么写也行，但是你操作起来就会比较麻烦，所以当遇到没有考虑充分的时候，结构上该调还是可以去调的啊没有关系啊，一定注意，我们这东西是非常灵活的，千万不要给它学死啊，学死好，然后的话就是我们这个星星的一个样式，星星的话，首先它有两个颜色，一个是黄色，一个是灰色的，我们先设置这灰色的，灰色是这个三个D，三个D的话，我们在这儿呢，给它统一设置一下颜色，我们直接来一个color，诶我们来看一下，呃，这个Facebook是不是也是灰色的呀，哎，也是灰色，那这样我们干脆一不到二不修，我们直接给它统一设置一个color了，Color我们来一个井号，一个三个D，这一保存，那这样效果就是他们三个是不是都变成灰的了，诶这几个都变成灰的了，然后在这里边我们再单独给这个来设置一下。

单独我们是不是有一个light呀，哎，点一个Li light表示的是我们那个亮的那个星星，亮的那个星星是一个黄，黄色的是这个颜色，复制一下CTRLC，然后我直接给它粘过来，然后我们来一个color井号一粘，然后这个星星是不是就亮了，哎，基本上跟那个效果是是一致的，呃，一致了以后的话，然后我们再需要做的事儿，就是需要把这个它整个也是是往里。往里缩过一块啊，哎，缩过一块这个距离大概是一个16个像素，所以我们直接给我们的这个，呃，这个rapper加一个拍Ding padding的话，就直接来一个上下，不要左右来一个16个像素，那这样的效果就是我们这块就可以给它去居中了啊，可以给居中了，好，那这一块我们就给它整完了，整个一个布局的结构就给它做出来了，呃，其实的话结构并不复杂，非常的简单，但是主要是还是我们现在是第一次尝试着去把一个设计图给它做成一个这个网页的形式，所以你需要自己去做一下，整体来说比较简单，那以后其实你遇到一些再复杂的设计图，它的整个一个逻辑，整个一个思路也是这样的，所以这个练习一定要好好的去做一下啊，好好体会之间的一些属性啊，比如说我怎么让这个东西往里去啊，哎，我怎么让它往里去啊，你看我可以用maring，也可以用什么呀，也可以用paing，到底我应该用marin。

还是应该用pading呢，哎，思考一下什么时候用marin，什么时候去用padding，哎或者你说老师不行，我不明白这事，为什么要用它，不知道为什么试试，哎老师这块我觉得用八这行，OK，你试试看看行不行，诶行行，那就确实行，那就完事了，不行不行再改，懂这意思吗？一定要去尝试啊，学习这个就是什么呀，多练啊，就是不练好这个电影卡片，这个练习我们就说完了，我们这里先停一下。