尚硅谷前端基础 (57)

好，做完了这个京东这个两个练习啊，一个是我们这个图片列表，还有一个是我们这个左侧的一个导航啊导航，当然刚才我把这个鞋盖我稍微的改了一下是吧，给它加了一个死SPA，到时候你自己处理的时候，你给它处理一下，加完死SPA以后呢，你再给那个死SPA设置一个左右的一个。那编剧啊，这个距离会拉开一点，相对来说会，呃，能好看一点吧，啊能好看一点，那接下来呢，我们来进入我们下一个练习，下一个练习我们做的是我们这个网页的一个这个新闻的一个新闻一个栏，那我们还是先把这个网页呢。收拾一下啊，写一个这个基本的一个结构，然后呢，改一下标题，这个是我们这个网易的一个新闻列表。网易的一个这个新闻的一个列表，列表呢，还是来先引入我们的重置样式表，另一个我们这直接是一个点斜盖，我们CSS下边一个re.css然后呢，把我们的样式表给它放在这儿，哎，当然还不需要写，然后呢，我把它关掉，还是我们先来设计我们的一个结构啊，先来设计我们的结构啊，把这个图片打开。

设计我们结构，那这一块我们的结构要怎么写，首先看整个。啊，整个它这儿是不是还是需要一个这个，哎，一个大的一个外围的一个容器呀，哎，外围一个容器，这是毫无疑问的，对吧，外围容器，那这个容器呢，我们这个其实也是一样的，你可以用诶div可以用什么，呃，Section都可以啊，我们在这省点事，我们直接来个div div给它起个class，我们叫做一个这个news list啊新闻的一个列表，所以在这儿我写个注释，这是来创建，哎创建我们新闻列表的一个外层的一个容器啊，外层一个容器，外层的容器整完了以后再看里边，里边的话啊，还是先看结构啊，看结构这儿呢，首先一上来这儿是有一个这个，这有一个标题啊标题那这就是体育是吧，诶你放的是什么新闻，这就写什么标题，那所以既然是标题的话，我们就直接创建一个什么呢？哎，创建一个标题标签啊，专门用来显示标题的，我们就直接来一个H。

这创节员标题的话，这有个问题，这东西它能不能点啊，不能点它是只是一个标题，还是能解点进去，我们看看网页里能不能点，随边找一个啊新专题它是不是还能点呀，哎，还能点，所以很明显这里边我们除了放H2的话，H2里边还应该放一个这个超链接，因为它是能点的嘛，啊能点的写字我们叫做一个体育啊，叫体育体育，然后呢，HR我们给它来一个class啊，Class我们叫做一个news，一个title啊，Tle新闻的一个标题啊标题，然后再往下呢，它这是放了一个这个图片啊，放了一个图片，我们的imgmg标签啊MG标签，那这里的话图片的话，你直接放个img也行，但是我建议啊，我们布局的时候，你像H20个块最好呢，你把这个图片也放到一个块里，我们这儿诶稍微的省事一点啊，这稍微的好好一点啊，好一点，所以在这儿我们来创建一个这个，诶图片的一个这个容器啊，专门。

放我们那个图片的，所以我们直接放一个div div给他一个class，我们叫做一个IM，这叫做一个news的一个MG啊MG新闻的一个这个图片啊MG，然后呢，里边我们放一个M标签，这是我们图片的一个内容啊，图片一个内容，内容的话我们来看一下，这个是一个这个图片，图片我直接给它整一下吧，呃，咱们既然是它的话，我选中一下，呃，图片另存为直接保存到我的桌面。在这，呃，图片是是这个图片对吧，这个图片他这图片就省事了，因为我们那个京东开始我们整这个图片，你会发现他这个图片比我们实际需要那个图片要要大要大，可能我需要的图片只是只是这么小的，但是京东的图片要大一些，他为什么做的大，他为什么不弄一个正合适的，因为它要确保你这个图片在一些高清屏下也可以清晰访问啊，也可以清晰显示，所以一般它这种图片都是一个二倍图，也就是说它比你真实的需要要大两倍啊，大两倍，但是像网易的话，它这块主要就是一个PC端，所以它这个图片就是，诶，就是跟我们这个需要是一边大的啊，所以我们直接拿过来可以用，嗯，在我们的这里边，我找一下我的练习的图片的文件夹叫img，我新建一个文件夹，我们叫做一个0202就表示诶不是零二了，这应该是零三了，表示的是我们第三个练习需要的一个图片啊，通过这文件夹来区分一下，然后我把这图片呢，直接给它拖进来到这个零三，这改个名。

改个名啊，我们叫一个1.gpeg，所以在这儿我们直接来引入这个图片，我就直接引入一个叫做1.gpg啊，点一个img下边的零二的一个1.g下的零三的1.gpg，呃，这个名呢，你可以写out，写不写都行啊，写不写都行啊费德勒啊，比如说写一个啊，写上以后呢，再往下img下边是不是还有一个这个这个标题啊，哎，也是一个这么一个小标题，这个标题呢，你写到呃图片里边也行，写到图片外边也行，我们在这儿写吧，嗯，写里边吧，写到里边，因为它是一组的嘛，对吧，这我们来创建我们图片的一个标题，哎，图片。

标题图片的一个标题呢，我也可以直接用这个H2这个能不能点我们看看。诶，这个这应该就是跟我们这个图片是是一体的，对吧，跟这个图片是一体的，所以他能不能点的就就无所谓了啊，就无所谓了，所以直接写个字儿就完事了啊，直接写写个字完事了，写个字儿呢，它这里边还比较特殊，它有一个这个这俩点儿是吧，我们先写上那个字儿吧，叫做一个这个，呃费费德勒手富。

首先哎付哎首付抵米抵米啊，然后什么呢？哎服。浮额头啊，布满发灰啊，不满发灰是这么一句话啊，这么一句话，然后这里边呢，我们给他这个HR上边还有一个，它有这么一玩意儿，这是啥玩意儿啊，我看看。我们直接选中看一下这什么东西。呃，他用的这是一个H3啊，咱们这无所谓了，你只要不用这个H1就OK啊background。

都可以用啊，它这个用的是一个这个这个图片啊，用的是一个图片，那这里边我们就不处理了，所以这块因为背景图我们还没讲嘛，对吧，雪碧图我们还都没讲，所以前边这个这个两个点呢，我们就不处理了啊，我们不处理了，然后再往下，我们注意，首先这整个完了以后，很明显这图片整个是不是它都需要可以去可以点呀，哎，它都是可以点的，所以呢，最简单的，因为这东西你也你也能点它，点完它是一块儿的，所以我们直接把他们外边的整个一个东西呢，给它放到一个超链接里，那这样就可以确保什么呢，这些东西都在这个超链接里，确保你点哪个都会触发这个超链接啊，发这个超链接，好，这个是我们图片的一个容器，我们就给它整完了啊，整完了然后下边呢，这个是我们一个正常的一个新闻的一个列表啊，新闻列表那这块我们直接写一个，诶，我们就直接写一个这个新闻的一个列表。

新闻列表的话，那我们突然就考虑到，那我这个叫它就不太合适了，因为这个它是一个整个一个新闻的容器，对吧，而我们这时候才是真正的新闻列表啊，所以我不叫list，我改个名，我们叫做一个WIP呀，叫做news的一个rapper啊，一个容器，然后呢，这个我们就创建一个ULUL我们给它起一个class，这个我们叫什么呢？叫做一个news的一个list啊，News一个list，然后里面我们放的是Li Li里边呢，很明显新闻你得能点对吧，放我们这个超链接啊，超链接，超链接是什么玩意儿啊，还挺多是吧，挺多我直接我上这儿复制一下。乔治，对我爱LA是吧？复制一下一共是四，还是格式化一下all shift加F，然后呢，这个叫。

叫什么玩意儿，哎，格林什么什么LBJ什么玩意。是。是詹姆斯的意思，来，这个也粘过来，CTRLC，乔丹被震惊。哎。来这也粘过来啊，你们看到这个这个新闻，哎，特别的无聊是吧？哎特别的无聊，好整个我们这个结构我们就给它搭起来了啊，整个结构给它搭起来以后，然后我们来看一下这个样式，我们来怎么写。嗯，还是先看一下啊，你们写的时候还是慢慢写啊，一点写，尽量能把这个结构一次性给他写对，写不对没关系，我们好好改也很正常，因为我们第一次毕竟是初学嘛，对吧，有些问题是很正常的，好，那这写完了，我们来看一下它的样式，呃，直接给它运行起来啊，运行。

诶，好，那这个就是我们现在写的样子，当然跟那个原版那个差距还是还是挺大的，对吧？诶除了图片一模一样，剩下其他的都不一样啊，我们慢慢的去给它完善一下，那首先看一下我们先来从外边写，我们整个外边是不是有整个是一个容器呀，哎，容器之前我们去做那个京东那个东西的时候，我们做那个京东的时候，我们那个像我们那个导航菜单啊，还有我们那个图片啊，我们宽度和高度都是确定的啊，宽度和高度都是确定的，那这个东西呢，你要在这儿说，如果单独你就它来讲的话，你把宽度高度都写死也没啥问题啊，都写死写的一模一样也没啥问题，但是这里边你注意了，呃，我这个新闻如果写死了好不好，好不好，你看这儿，其实你会发现什么呢？哎，你看我这个东西和我这个东西，他们两个长得是不是基本上都是一模一样的，哎，基本上都是一模一样的，没有任何的区别。

啊，都是一模一样的啊，都是一模一样，所以他们的样式其实都是共享的，只是可能我这里边换个字儿，换个图片，这儿换个字儿，可能是这样的，其他地方是不是都一样啊，所以像这个东西，你的高度要不要宽度，很明显宽度就是什么，宽度就是固定的，这没得说，那高度要不要写死，要不要写死，就是看里面的内容的数量会不会发生，会不会发生变化，如果比如说我的新闻有可能是四条，有可能是三条，还有可能是七条，那这个时候这个高度你就一定不能写死，但是如果说我的新闻固定就是每一个标签都是四条新闻，那么OK，写死了也没问题，懂这意思吧，所以这东西你要灵活掌握一下，我们来大概搂一眼，我们看看新闻条固不固定，你看这个是一个四个，嗯，这个跟那个不太一样，我不管它了，这也是四个，这也是四个，这也是四个，诶诶诶。

那省事了，所有的新闻都是四条，那都是四条，就意味着我们的每一个这个每一个这个玩意儿的高度是是固定的对吧，是固定的，那我就可以给它写死了就完事了啊，高度固定，宽度固定，那还省事了，我们直接还是我在这个图上我粗略的量一下吧。来从哪量呢？我们从这个边开始量，往下量，量到下一个边，这注意啊，量的位置往上量一点。这是一个。300乘以358，宽度是300，高度是一个358，那我们就直接给它写死了就完事了啊来写一下这个是谁呢？这个是我们整个容器，我们叫做一个点，一个news的一个rapper wap rapper是容器的意思啊，Wise是一个300 hi是一个358啊直接给它写死，然后呢，这里面我们来说一下，这是来设置设置我们容器的一个样式啊，容器的一个样式，然后呢，这个外是设置我们宽度。

设置宽度，这个是设置高度，设置度啊，那这块设置完了，你设置完当然你看不出什么区别来，因为现在容器比较比较大，内容比较少，所以我们，嗯，为了看见它吧，我给它设置一个background color background color，我们来一个井号BFV，哎，就是为了看见它，那这个东西待会儿我们肯定给它去掉，现在看见啊，然后再来的话，为了还是看的清晰一点，我们来一个margin，我们来一个零，来一个凹凸啊，让它往中间去一点，来一个50吧，往下走一点啊50像素这个呢，是用来设置居中的。

设置我们这个居中，而我们的这个background color主要是设置一个什么呢？设置背景颜色，设置我们这个背景颜色。设置背景颜色用来干嘛呢？显示我们这个轮廓，当然你如果觉得这样写的有点跟那个不太一样，你可以给它设置一个白色，设置完白色呢，你给bodyy啊，设置一个背景bodyy background color，给他设置一个这个井号，一个bic啊，总之都是为了看得清楚一点，你要是有习惯写法，你按照你习惯这个写法写就行啊也行好，那这块整个这个结构就出来了，那中间这个是我们的这个这个新闻这个条，对吧，我们来给它接着往下来设置这个样式，那接着来往下再看啊看我们这个图，那这图上边呢，我们量的区域啊，实际上是整个是这个区域都给量下来了，对吧，整个这个区域，然后看上边，上边首先第一个部分我们这儿会有一个边框啊，有一个边框，它是不是只有一个这个上边块啊，哎，只有一个上边块，我们先不管这红色的啊，我们就管这灰色的，那这个很明显，这应该就是一个，诶一个像素的啊，应该就是一个像素啊一。

一个像素的一个上边框颜色呢，我们可以给它，可以给它吸一下，就不去里边找了，里边找一下不会觉得麻烦一些。哎，我们直接去吸一下这个边框的一个颜色啊，屏幕取色器，我们直接吸一下这个边框的颜色，一吸它是一个。Ddd对吧，三个D，所以这个时候我们直接给我们的这个rapper，我直接给它设置一个上边框，因为只有一个上边框嘛，对吧？诶设置我们这个上边框，上边块呢，我们直接来一个这个borderder top啊border top一个像素，诶solid，然后井号ddd这么一个上边框，然后这个边框是不是就就出来了，哎就出来了啊在这儿了，是一个上边框设置出来了，设置出来以后你要注意有个问题，我加了一个上边块以后，实际上边块会影响我们整个盒子大小，所以我加上一个上边块以后，我整个盒子现在高度就变成了350 359了啊359了，所以如果你要确保高度还是358，如果是定高的话，你就给它减一个，变成357，那这样高度还是跟之前是一样的，哎，我发现设置完这个背景你看起来倒是。

不清晰了啊，那这样吧，我把这改成B试试。也不清晰，那我就不设置这个背景了吧，但是你不设置背景的话，先写着吧，待会我们写完我们再给它撤掉啊，这上面设置一个边框，然后这个设置完了以后，接着看我们这个图片，接下来呢，就是我们的这个标题了，对吧，标题我们这个体育首先呢，这个体育的话，它是我们现在这个体育啊，它是等于跟我们这个边儿啊，是紧紧贴到一起的，但是实际的效果呢，在这儿显示的话，我们来看呢。

在这儿显示的话，实际上整个我们刚才这设置的是一个HR这个H2，它现在是相对来说会比较比较大呀，哎，比较大，所以这个时候我们需要给H2指定一个高度啊，需要给我们HR指定一个高度，那高度是。诶，这图片。只要是100高度设成多少合适，还是我们简单量一下啊，直接从像边块的底边量到这个图片的边上，这应该是一个40，所以我们直接给这个HR的指定一个40H2，也就是这个news title。

来。设置我们这个news title啊，我们直接来一个点一个news title，刚才叫做一个title tle title的高度是一个40像素啊，四像素指定完高度就往下走了，往下走了以后呢，然后我们再看啊，再看的话就是这个就是这个超链接这个事儿，超链接的话，现在我们来看这整个的话，其实如果你单从这个图，单从这上面来讲的话，其实这倒无所谓，但是我们现在来看啊，什么问题，现在呢，如果说没有这个红色边框，那这个东西你就设置起来比较简单了，但是问题是现在它上边会有一个红色的一个边框，这个边框怎么设置，我们先不说，我们先不说怎么让这个边框把它给压住，这个我们先不管，那现在假如说我现在就给它整一个红色边框，这个边框很明显应该是谁的，是不是应该是下边这部分的体育上面的，对吧，它属于这个体育的一个。

的边框，那这个边框的问题是这个边框我要给谁？首先说我把它整个给这个HR，也就是这个news title行不行？诶比如说我给它加一个border top border top，我们来一个一个像素red，我们来一个solid solid给他行不行？诶给它很明显不行，为什么呢？因为这个H2它整个是一个块元素啊，整个是一个块元素，所以如果你给它设置了一个一个像素的边块以后，由于它的宽度是什么，它的宽度是不是跟副元素一边宽，副元素多宽它有多宽，所以它的边块一定是全屏的啊，一定是一边宽百分百的，所以你给H2不行，或者说我还想给H2。但是我希望这个边框多宽呢，这个边框应该跟字一边宽，字多宽边框就多宽，那要怎么办呢？诶，那这个时候其实很简单，我可以直接来一个迪斯play，我把我的H2变成一个in one blog变成一个行内块，行内块的特点就是它既会读，诶既有块元素点，又有行内元素点，但是这个时候它的宽度就不是百分百了，所以这个时候它的特点就是什么呢？就是字多宽，这个边框就多宽，那这样的效果是不是会好一些，哎，所以注意啊，这样设置的时候为了什么呢？

为了我们这个边框和什么呢？和我们文字宽度一致，我们需要将我们这个HR转换，为什么呢？转换为我们的行内块元素啊，为什么转，就是为了这个边块的问题，然后在这儿是设置什么呢？设置我们这个高度，设置我们这个高度，然后呢，这里面就是设置我们这个上面块。上这块这么写的好处是现在我们的H这个news title，这个H2，它的宽度它是被内容撑开的，也就是说你里边有多少字它就多宽，而你有多宽，它这个边框是不是就多宽呀，哎，是这样一个效果啊好，那这里边我们整个的写完了，但是实际上跟我们原图那个效果还是有点差距，我怎么觉得我这个边框有点。

有点细啊，你们看这原图的边框啊。这个div我们来看一下它的一个边块，妈这边块不是它的啊，边框它也是一个，也是个一，那我们就不管了，既然都是一呢，我们就不调了，那可能就是视觉上现在有点差距，这个边框我们指定完了，但是现在呢，它还会有一个问题，这个边框虽然指定完了，但是现在这个边框它是压在在我们下上边这个边框的下边，也就说这两个边框它有没有重叠到一起，诶没有重叠到一起，他们是互相独立的，然而在我们图里边什么效果呢？哎，这两个边框是叠到了。

一起的对吧，是叠力一起的，那这里边我们要怎么实现，诶其实呢，也方式有很多种，但是现在对我们来说，我们的方式就是干嘛呢？哎，我需要让我的这个红色边框压住那个什么呢？黑色边框，所以对于我们来说，我们的方式是把我整个这个元素往上移一个像素啊把元素往上移，那我们要做的方式是只能是用一个什么呀，Marin，哎，我们通过我们这个margin Mar j margin top来将什么呢？将我们这个HR上移，HR上移哎然后什么呢？哎，盖住我们这个上边框，哎盖住们这个上面块，所以这个时候我们来说一下啊上面块，所以这个时候我们就直接设置一个margin top margin top，我们说了margin top设置完了是移动自己的，如果是正值是往下走，那我如果是负值，是不是就往往反方向走了，所以我直接来一个负一，那么它的效果是让我们H2整个往上移一个像素。

这个像素是不是正好把这个边框就给盖住了，哎，所以这个边块就达到了这样一个效果，看懂这意思了吧？哎，那这个边框我们就给它设置完了，怎么盖的，我们是通过了一个副marin去压住上面这个边块，达到这么一个效果，然后接着再看，再看的话其实也就没啥了，然后再看的话就是我们这个。体育这两个字儿，体育这两个字的话，它是一个超链接，超链接的话，我们直接来给这个超链接来设置，老师来设置我们这个设置我们这个title中这个超链接的一个样式，我们直接来点一个这个news title里边来一个AA的话，我们给它来一个首先text肯定得要去啊tax，那把这个下划线给它去掉，然后颜色的话，我们来看一下颜色也是一个什么颜色，我们简单的吸一下子吧。

我就不去看原网页看了啊，原网页看比较麻烦。许多记。颜色呢，是一个是这么一个颜色，这个系的应该也不是特别准啊，我们直接写了color，直接写上它啊，是这么一个颜色啊，颜色给它设置完了，然后字儿的话，大小应该也稍微大一些啊，我们先写上这个是去除我们这个下划线啊下划线，然后这个是我们这个设置我们颜色设置我们这个颜色啊，我就直接来个黑色吧，黑色可能还觉得好看一点，先先写着这再改啊，然后再往下看，这个字儿的话呢，稍微的它是一个，它实际上这个字儿在这儿有一个这个加粗的效果是吧，字体大小应该是跟这一边儿啊，它有个加粗的效果，加粗我们怎么设置，我们有一个样式叫做front white front white front white呢，我们直接来一个这个bold啊，Bold表示是一个加粗啊加粗，然后呢，这来设置我们这个文字的一个加粗，设置我们文字一个加。

粗效果加粗效果是设置完了，然后就是我们这个字整体来说它现在是靠上了，而我们实际效果的话，这个字它是靠靠下的，就跟上边是有个距离的，这也简单，直接给它设置一个上上上外边距是不是就行了，哎上外边距，所以这个距离咱们简单量一下。取整吧，十个像素啊，十个像素，所以直接给A设置一个marin top来个十，这也不需要担心外边去重叠的问题啊，哎，这样我们来看效果，这我们直接来，这是我们来设置我们这个上外链距，但是其实你会发现我们设置完了，他们没有没有用，没有用，为什么呢？因为超链接是一个行内元素，垂直方向外边距是不是不好使啊，所以要不然你把它超链接变成块也行，但是这儿的话，那我就不这么设置了，那既然是想让超链接往下移，而你又没有办法给它设置marin，那怎么办呢？你可以给这个news title设置一个什么呢？设置一个拍ing，直接设置一个拍ing top来个十个像素，那这个时候是不是就往下挤了，哎，往下挤是往下挤了，但是实际上把整个元素的高度就给拉高了，拉高了以后呢，我把这高度再减去十个像素变成30，那这样是不是就跟刚才那个一模一样了，哎，就是这样一个效果，那基本上就一模一样，但是你看着可能不太一样，因为我们做的是中间这部分，边上我没有处理啊，边上没处理中间这部。

所以你应该看的是这个区域边那个白边，我们不用管它啊，白边不用管它，好，那现在就是这样一个效果啊，这样一个效果处理完了，接下来呢，就是我们这个图片了，呃，图片的话，其实图片根本就不用处理，你这现在能点了对吧，根本就不用处理，所以接下来要处理就是图片下边这个这个文字啊，这个文字我们要处理一下，这个文字呢，首先字体稍微的大一点，然后有点白色的对吧，然后要加粗一点，所以呢，在这儿我们往下写来，我们来设置什么呢？设置我们图片的一个文字效果，那这里面其实我也想到，确实我这用一个H2啊不合适，因为用H2的话等于跟它一个级别了，对吧，所以我应该仿照一下，我们把它改成一个这个。

H3吧，H3H3呢，我们给一个class，我们叫做一个这个img的一个这个title啊title，这是我们MG的一个描述，然后我们直接来设置一下，设置图片的文字一个效果，那这个是我们的一个点，一个news。Img下的点一个这个img的一个title IG title PI l title，我们设置一下它的效果，首先呢，也是text text，我们是不是要去除这个文字下划线呀，哎，你看我这也去了，这也去了挺麻烦的，我干嘛呢？我在上边统一写一下，我们直接来一个A，我直接来一个text textration，我们直接来一个来个，那也就说我在这儿写完了以后，等于我把所有的下划线都给去掉了，这你写不写就都行了，你看写不写效果都一样了啊，所以在这我们这统一去除什么的，去除我们这个下划线，好，然后接下来我们接着来看啊，下划线没了，然后我们这个字体大小啊，我们先来一个color color它应该是一个是一个井号FF是应该一个白色，白色啊，我们这设置一个字体颜色，字体颜色，字体颜色的话，然后呢，整个这个字是。

这样它是应该出现在我图片的一个上方的，所以毫无疑问我们在这儿也是直接来干嘛呢，哎，来。向上移动，我们这个文字，我们直接来一个margin margin top marin top，我就不聊了，我来一个负20，我们先看效果啊，先看效果，先给它移上去啊，先给它移上去，那现在它是不是出现在这个位置，哎，这个位置，然后我们接着来调啊，来调我们来一个fo we found white，给它加粗，应该来一个这个Bo啊给它加粗，这是设置我们这个加粗，诶设置加粗诶我们看这个位置，我这20是不是。

正合适啊，来看一下。诶不是看他看我们这图片20哦，20有点有点矮了，对吧，有点矮了，所以这时候我们还需要把它往上去调一点，比如说我调一个二十来一个30呢，30。哎，30这样的效果是不是还好啊，哎，30这样的效果还好，但是问题是啊，你调整完它以后，等于下边这些元素也挤上来了，我们来看一下啊，是不是结构上的问题，嗯，下边的元素是一个H，我们H3在这儿，然后呢，等于是我们的news list，它跟着它一起挤上了，我们来看一下。

News IG news I啊，因为什么呀，因为我们的这个newsg啊，我们没有给它指定高度，没有指定高度的话，它的高度被内容撑开，而我们这个H2，我给它设置一个这个复位原距等于这高度是不是没撑开啊，哎，没撑开下边元素就等于就等于就就就就跑上去了啊就跑上去了，嗯，那这里边我们要设置的话，那我就直接给这个news mg啊，我也给它定一个高度就完事，点一个这个news IG，我们给它指定一个高度，高度的话，它应该跟这个图片的高度是一样的，我们来看一下这个图片的高度，呃，图片图片在我们这图片的高是一个。300乘以150，高是150，所以这哥们的高度呢，我们也给他来一个150个像素，你把它的高度定死了，下边就不会上来了啊，定死了就完事了，然后这个高度啊，这是设置，诶，这不叫img，这叫做news。

哦，就叫MG，哎，那这是啊，设置设置我们这个图片容器的一个高度啊，你把它的高度定完了，然后避免下边元素给它拱上来，好，那这块写完了以后呢，我们再看这个字的话，实际上它还有一个就是它需要往往里边去一点，对吧，往里边去一点，往里边去的话，我们。嗯，处理方式也很多，你可以给他设置个pading，设置Mar都行，我们来个pading吧，给这个东西来一个pading left padding left，我们来一个20像。20有点儿小，来个30吧。30元度啊，大概这么一个效果，这是设置我们这个拍。呃，设置我们拍的，但是这个位置其实你用margin行，这块无所谓，所以其实你在去写的时候，尤其是我们第一次去写这种东西啊，很多时候你想不起来用什么属性，你可以试试啊，你可以估计大概，诶这好像用拍on也行，用marin也行，你自己去尝试一下，没那么难啊，没那么难，多写，写的多了自然就有思路了，现在你没有思住，写不出来，很多情况下是因为那些属性你不熟，记不住，记不住就慢慢写写就行了啊，坚持啊，千万不要觉得说哎呀好难呀，放弃了啊，一定要多写写，再或者你说老师我实在不会写，实在不会写，照着我这个写两遍，照着我这个视频啊，我怎么写的你就怎么写，我怎么改的你就怎么改，我犯的错误你也犯，我改的错误你也改，就完事了，多写几遍自然就会了。开始的学习是没有捷径的，就是什么呀，就是最单纯的模仿就OK了啊，模仿。

然后接下来我们再看整个，我们来给这个ul来设置样式，Ul设置样式的话，首先我们来看整个这一块，我们用的是一个ul，我叫一个I list，那这I list跟图片上面会有一个距离，我们把这个距离呢给它整出来简单量一下。

距离呢，就取一个整吧，取个20啊取个20，所以这个时候我们来设置我们这个设置我们这个新闻的一个列表，直接点一个img list img的一个list，我们给它来一个这个margin top，一个20像素，把它整个往下移。诶。呃，不是IG list叫做news list啊，News list新列表整个往下移，移完了以后呢，它的工作就完成了，那接下来我们是设置什么呢？设置我们这个Li，设置我们这个Li啊Li，因为我们那个玩意儿用的是一个u Li写的嘛，对吧，Ul里边有Li嘛，所以就直接点一个这个news，点一个news list下边的Li Li的话，我们这写的时候它应该会有一个距离，那实际上你看每一个lyi之间是不是都有一个距离啊，哎，简单直接给它指定一个。

外边距就行了啊，直接给他指定外边距，我们来看一下外边距是多少。外边距是一个17啊，是一个17，诶是二，我看看啊。头就是17，所以我直接给我的每一个LY直接来一个margin bottom来一个17个像素啊十像素，那这样他们之间的距离是不是就给它拉开了啊，给它拉开了好拉开了距离以后呢，接下来就是设置什么呢？设置我们这个文字，设置我们Li中的一个文字，文字的话我们直接点一个这个news list下边的Li，然后下边的一个超链接，超链接我们来看看吧，是一个。字首先比较小方，Size应该最小的话，我们就是一个12个小组啊，这是我们最小的字体就是12 12有点有点小了，14呢。哎，14差不多啊，在这儿我们来设置这个字体大小，设置这字体大小，然后是我们这个字体颜色，这个颜色呢，我们来吸一下吧，但是有时候你在这个这种上面吸的话，有时候还是不准啊，我们就参考一下就完事。

666啊，666我们直接写了啊，直接写一个这个color color我们直接来一个井号，一个666啊，这个是我们设置一个背景颜色，设置一个字体的一个颜色，那现在就是这样一个效果，那这个效果设置完了以后呢，还是看我们这个图，设置完了以后，其实我们会发现我们整个这个，嗯，这个字啊，这个字它跟这个外边是有一个这个。有一个这个距离的，对吧，有一个距离的，那实际上效果就在这儿，它之间边上会有一个这个距离，也就说它是是不是多出一个项目符号啊，哎，项目符号，所以这个时候我们还需要整个把lil往里去给它挤一下，往里挤的话也简单，我们直接给这个ul加一个pading，它是不是就进去了，哎给它加一个拍顶就进去了，那拍ing的话，我们来看看这个多少合适。

PA定从我们的这个边上量应该是。嗯，这应该是一个十十四啊14，呃，所以给ul设置一个拍定life的是一个这个14个像素啊，14个像素，哎，那这样它是不是就整个就往里往里去挤了，哎，那整个一个效果其实就出来了啊，这个是设置我们这个设置上外边距啊然后这个呢，是设置我们这个左侧的拍点左侧的一个拍顶，哎，然后呢，这个是设置我们这个margin bottom。下啊，然后呢，这整个就设置完了，其实大体上就这样，其实也就没问题了，然后它还有一个呃，Ho上以后是变成一个红色，我们直接给它来一个ho就完事儿，直接来一个A，我们这直接冒号一个po po我们来一个color color就直接来个red就OK了，它这个应该我们看一下啊，只移到字上，所以这个是车链机的。

是不是这样的效果就了，哎，这样效果就OK了啊，然后我们需要再进一步完善的话，就是它前面还会有一个这个项目符号，项目符号的话，它的处理方式有有很多种啊，有很多种，但是现在的话，我们没有什么太完美的处理方式啊，没有什么太完美的方式，所以我们要处理的话，只能是用一些比较没那么完美的，没那么完美，因为我们默认情况下，我们把这个项目方给它去掉了，我们在这儿我还可以通过list style来给它干嘛呢？指定一个项目符号，那在这儿我们就有一个叫做一个square啊，Square就指定一个这个方形的一个项目符号，当然它的颜色呢，我们在这儿啊，我统一在这儿设置，那这个项目符号颜色也会被我去修改，但是这个项目符号跟它这个原版这个项目符号其实也是不太，呃，怎么说呢，它它不太一样对吧，它不太一样，它有点这个有点颜色的更浅一些，我们这样吧，我们把这个给它改回来。

改回来啊，它的颜色更浅一些，然后大小也会更更小一些啊，也会更小一些，所以这个时候呢，我们把这个字体啊，我们单独给这个他设置一个字体，我们这儿来说一下设置我们这个项目框，但是这种方式不是特别好的方式啊，因为这个东西设置完了以后，肯定在不同的浏览器里显示效果是不一样的啊，肯定是不一样的，所以这里边我们只是一个临时的一个使用设置方式，以后我们还需要有别的方式去修改啊，别的方式去修改，那这里边呢，我们来整出来一个这个，哎呀，这玩意儿瞅着太别眼扭了，对吧，太难看了啊，太难看了，不用这个了啊，不用这个了，我们来看看我的这个输入法里有没有项目块，输入法里我们来看看V1有没有方块。

哎，这个搜狗输入法啊，V1是特殊符号，看有没有方形的，这样其实可能效果会更统一一点，方的H是这个，这个是一个方形的吧，那我如果是在我的每一个这个，我拿一个做实验啊，我在LY前面加一个这个。这个呢，我就先给它去掉了。哎，加完了是是这个效果，哎，这个效果整体来说咱们还还凑合可以接受，对吧，还凑合可以接受，那咱们就这样吧，我们给它前面手动加一个这个小方块啊，加一个小方块，但是这个时候加的时候，其实啊，你一定注意，我们现在怎么做都不太容易达到我们这个目的，所以我们只是临时先想一个东西去去给他代替，甚至说这个项目块，其实我都不建议现在我们做啊，不建议我们现在做，因为可能达到完全达到不了一个效果，那这个时候我们是通过一个特殊符号给它加上一个项目模块，那这样的话，也就意味着我需要干嘛呢？我的每一个Li前面我是不是都要加这么一个小方块啊，哎，这么做呀，太麻烦了啊，太麻烦了，所以这里边我们就希望什么呢？我通过一种方式，我可以统一为这些Li全都加上这个项目符号，那这要怎么做？哎，非常简单，我们之前说过一个这个叫做伪元素的一个东西啊，伪元素的东西我们直接写一下啊。

啊，你先思考你我写完了，你自己看一下啊，News list我们直接Li下边，我们有一个尾，哎，叫做一个伪元素，我们叫做一个before before是干嘛的？Before是不是选择了我们Li最开始的那个部分，哎，最开始那个部分，然后在这儿呢，我给它加一个这个content content我加什么呢？加一个小方块，那这样的效果就是它会自动为我的每一个LY前边是不是加这么一个小方块，哎，那这时候我就不用每一个都写了，统一写一个是不是就全有了，哎，就全有了，并且加上这个元素以后，我还可以为这个元素来设置我们的这个设置样式啊设置样式，那这个样式我们来看看，我们怎么来怎么来设置，呃，这个样式呢，我来看看首先的颜色，颜色我们要改一下啊，直接来一个color color来一个井号，来一个666666，这个颜色就这样，但是这个颜色还稍微的有点深，实际上这浅一点，我们选中一下，哎，这个调的时候往上调往上。

条就会浅一点。它这个颜色呢，还是有点深。哎，这个颜色差不多啊，我们把它调的这个颜色给它稍微的去浅一些，然后大小的话也可以稍微小一点，防size，防size，比如说来个12个像素啊，这个点可以让它小一些，那这样就基本上比较接近那个效果了啊，基本上比较接近那个效果了，然后我们要再调的话呢，就是我们需要去调调什么呢？调调这个位置，我们看需不需要调一下。

哦，位置啊，还有个问题，这玩意儿啊，它是跟图片一边齐的，图片一边齐的，我们这是不是等于跟后边一边齐了，还得调调的话呢，我就得把我们之前设置那个pading life的，我给它去了，拍顶就去了，这样的话他就正好就贴着这个图片了，然后我们这个看这个诶诶诶。那基本上就可以了，我要做的话，我可以再给这个东西加一个margin right，把这堆东西往这边再挤挤，对吧，再挤一下，所以我直接再给这个before啊，加一个marin marin left，我们来一个十个像素，我们看效果。诶。Marin left，应该是margin right，因为你要级别的嘛，是有点大有点大，埋个六。四吧，哎，那这个距离就差不多了，是不是整个就给它挤出去了，哎，挤出去了啊，那这样我们就通过比before来为每一个Li前边都加上了一个小方块，Before忘了找到前面那个伪元素的视频，你再看一下啊，这里边我们来说一下啊，把这个注释补一下，这个是啊，通过我们be for before这个伪元素来干嘛呢？来为每一个Li，诶，每一个Li添加什么呢？添加项目符号它有什么好处？首先比这种方式的好处是这个符号加完了基本上是一个样，它不会出现两种项目符，这是第一个好处，第二个好处我通过before加的好处，Before加的话，那所有Li都有了，如果不用缝，我还得一个一个去加啊，一个个加，你甚至还得给他去套什么SPA呀，还给他设置样式，而这儿的话，我直接通过笔就设置了啊省事啊省事，然后呢。

这个是我们把它放。

我把这个放上边吧，因为它属于LY下边的嘛，紧接着LY的放下边，然后在这儿，这个是我们这儿是设置我们这个超链接的一个鼠标移入的一个样式啊好，然后呢，我们把这个body的背景颜色去了，我们这东西就完成了啊去了，那这个做完了就是这么一个效果，基本上跟我们那个呃，网易呢基本上是一致的，除了一个项目符二差别有点大以外，其他的都是一样的效果啊样，当然有些动画效果没做，但是整个这布局你能做出来就已经非常的不错了啊，非常不错了。那我们这儿做的这个三个练习，这个网易这个新闻的话，这个稍微的会麻烦一点，尤其是涉及到结构比较复杂，样式也比较比较多，但是还是那句话，你需要。慢慢的写，细心点写啊，一定要把这个效果给它做出来，尽量的去接近我们这个原网站，但是由于现在我们记住有一些局限性，不可能一模一样，但是你做的时候尽量的要达到一个什么呢？尽善尽美的程度啊，尽善尽美的程度，那像这三个练习啊，像这三个练习写的时候一定不要说啊，我写一遍就完事了啊，我老师我照着你写一遍就完了，一定要自己多写几遍，尽量尽量写个三五遍的，然后达到一个能独立完成的程度，这三个东西能写出来，那证明之前的知识问题都不大了，尤其是第三个练习，网易这个新闻列表一定一定要。

好好写啊，一定一定好好写好，关于这个我们看看还有没有需要补充的啊，嗯，基本上就这么多内容，对吧，这个练习自己来写一下，我们先听一下。