尚硅谷前端基础 (54)

好，我们讲了这么多啊，终于可以开始做一些这种实战性质的一个练习了啊，那在这里呢，我们来先新建一个文件夹，新建一个文件夹我们叫做一个练习，叫做一个a exerc叫做exercise是吧，专门放我们的练习，以后我们所有的练习呢，都放在这儿啊，都放在这儿，那这里边我们练习我们要做点什么呢？那首先呢，我们这里边既然是讲完核模型嘛，我们刚开始也说了，核模型主要是用来对网页进行这种，哎，进行这种布局的，所以接下来我们就找一些这种布局的一个练习，但是我们在找这练习的时候，你要注意，我们学习前端会有一个最大的优势，因为我们前端就是做这个网页的，而网页的话，其实如果你要是看的话，上网随便打开浏览器，随便输一个网址，是不是基本上就能看到一个网页呀，诶，所以对我们来说，我们练习满处都是，所以你可以找到一些你喜欢的网站，然后你从你喜欢的那个网站里面呢，找到那。

你觉得你能做的东西，然后尝试着去模仿就OK了，所以我们的练习非常好找，所以接下来我先，哎告诉你们怎么去找，那像现在我们要做布局练习，那对于我们目前来讲，我们能布局的是什么样的网页呢？就是竖着的啊，竖着的你看我这一个框里边所有东西都是竖着排列的东西，我们就可以去做啊，竖着排列东西我们可以做，只要稍微说，你说这有俩东西横着的，那现在我们暂时先不做不了，或者做起来很费劲，所以要求我们现在就是找找竖着的，当然我们做整个网页现在也不太现实，我们能做的可能只是整，就是一个网页的某页某一部分，比如说举例子，呃，比如说我们上京东，呃，京东，我们来看看这个网页，现在有什么东西是竖着的啊，我们来看一下哎，哪块竖着的，哎很明显一块是这个位置，对吧，这里边的所有东西是不是都是竖着。

对，哎，文字横着无所谓了，对吧，只要这个块一块一块竖出来的，那这个我们是可以做的啊，这个是们可以做的，还有一个最简单的，那像这一栏是不是也是全都是竖着的呀，哎，那这个东西我们也可以做，那这两个我们就当成一个备选，呃，再比如呢，我记得应该有一个163的一个新闻news，点163我们来看一下。还有没有，呃，往下找，往下找，往下找，诶你像这种东西啊，这种东西这个。你看这一栏，这儿有一个图，这一个文字，这有一个图片，然后这儿有几个这个超链接是可以点的，对吧？那这里边所有东西是不是都是竖着来的，哎，都是竖着来的，那么这个东西我们也可以做啊，我们也可以做，当然现在你看啊，我这鼠标移动上去以后，这个图片它会有一个放大的效果，那这个东西暂时我们还做不了是吧？我们先不用管它，所以我们要做的只是把这个整个一个结构给它搭出去，当然这一块行，你下边什么财经，这个体育什么的是不是都是一样的呀？哎，可以把这个东西尝试去做一下，所以现在我们就要做这三个练习啊，三个练习我先把三个练习创建出来啊，第一个是我们零一，我们叫做一个，这个我们先做哪个呢？我们先做这个京东这个这个这。

先做这个东西吧，哎，这个东西当然这个玩意儿移上去以后，你看移上去以后，它会出现这个小的图标，你看到了吗？哎，出现这个小图标，小图标我们暂时也先不管，这都是我们后边做的，我们要做的就是整体的一个布局，把这个整个这个局给它布出来就行了，啊，给它布置就行了，所以这是零一，我们要做的是一个我们这个图片的一个列表。这块改一个名啊，这个我们要做的是一个我们图片的一个这个列表，诶片的一个列表，这是一个点S毛，然后我们要做的是一个第二个，第二个是我们京东的这个左侧的一个导航条，来我们还是新建一个啊，新建一个文件，我们来一个零杠，做一个我们这个京东的这个左侧的一个导航条啊导航条然后呢，再做啊没写N条，我们这直接写上零条，点一个HTM，然后再来就是我们这个网易新闻的有一个这种，呃，右侧的一个这个新闻列表，对吧，网上新闻的右侧一个新闻列表来我们新建一个，我们先把我们要做都写出来啊零三我们这个是网易新闻的，诶一个这个右侧的一个这个，哎，右侧一个列表啊，还是一个点M，也就是说我们要做这个三个练习，通过这个三个练习来把我们之前的知识进行一个进行一个巩固啊。

进行一个巩固，当然这个东西我们模仿有两种方式，第一种你的模仿你就直接干嘛呢，你就直接照这网页做就行了，或者你也可以干嘛呢？哎，你也可以直接给他，哎，你也可以给他截个图啊，截个图来做一下，这种两种方式都行啊，两种方式方式都行，那这里呢，我因为你在看到这个视频的时候，可能跟我看到这个视频它不是一个时间段，对吧，不是一个时间段，所以在这儿啊，我把这几个练习啊，我给截下图，诶我留个底儿啊，我留个底儿，然后你做的时候呢，哎，你可以照着这个图案去尝试做一下啊，尝试做一下，这里边我们存储一下，我直接放到我们的桌面，这个是我的第一个练习啊，我的零一，这个是我们的这个图片的列表，京东的这个图片列表。

图片列表，然后第二一个是我们的一个这个东西啊，这个东西这个东西我们是一个京东的一个这个导航。零二啊，我们这个是一个这个京东的一个导航，左侧导航，然后呢，第三一个是我们的这个玩意儿啊，这个玩意儿我也是给他画一个圈，给它截住啊，这个我们直接保存，这叫什么呢？这个是我们零三这是。

网易的一个新闻列表啊，网易的一个新闻列表，写上一个好，那现在这三个图片呢，我直接新建一个文件夹，新建一个文件夹，我们这个是我们这个练习的一个截图，截图啊，然后啊，我直接把这三个图片全都放到这个文件夹里，那我这么做都是什么目的呢？哎，目的就是这个练习，我现在我们这节课先把这个练习给你。引出来，这个是我们接下来要做的一个三个练习啊，分别三个练习，我分别截了三个图片，你可以自己去看一下啊，分别截了三个图片，但是这个练习呢，这节课我暂时先不做，换句话说，其实我待会儿就要讲，但是我中间我先让这个东西去停一下，为什么要停一下，我希望你自己先尝试着用你自己的思路去做一下，看看你能做成什么样，然后做的过程当中遇到了哪些问题，然后做完了你再接着往下看，我会把三个练习分成三个视频，每个视频是一个练习，你做完一个练习看一个视频，做完一个练习看一个视频，这样你看的时候会更有针对性，不要一上来就看，哎呀，老师，我先看看你怎么做的，我照着你那个做，这样也能练，但是练习效果并不是很很好，所以你就把这三个图当成一个作业，我现在的要求就是你要通过你的网页。

把这个图给它实现出来，把这个图你要把它变成网页啊，变成网页好，这里我们先停一下，接下来待会儿你们自己做一下，然后再来看下边的视频啊，我们先来停一下。