92.尚硅谷_HTML&CSS基础_页面练习-项目创建.avi原创

啊，那咱们呢，现在我们这个HTMLCSS这种基础的知识呢，我们就给他说说完了啊都给说完了，那接下来呢，我们来通过一个练习来对我们这个知识进行一个这个呃巩固吧，就算是是吧，那这个练习呢，也是一个比较简单的一个页面啊，我们这个POLO360这么一个非常简单的这么一个这个商业网站啊，点开它以后呢，我们这个页面是这么一个东西啊，以后我们工作以后也是啊你拿到的设计图呢，基本上都是这么一个PID设计图，我们需要将这个设计图转换成一个什么呀？诶转换成到一个这个网页的这么一个状态，诶那我们现在来看，那我们要想做这么一个网页，那第一件事我们先来干嘛呢？诶，我们先来创建一个项目啊，新建一个外部项目来一个，这个叫一个polo，诶POLO360啊POLO360，也就是说你要写这个项目，你不是说一上来就写了，我们先要完成一些什么呀，准备工作，那实际上当我们创建完这个项目呢，很多准备工作就已经完成了。

啊，比如说我这有个CS的文件夹，放我们这个CSSMG，放我们这个图片的GS，放我们这个GS文件的index，表示我们这个什么呀，首页，诶我们就直接在我们这个index里边去写，这边给它标题叫一个什么呀，诶POLO360，哎，我们这么一个练习啊，怎么一个练习好，那这个页面我们准备完了，那么想想我们这块需要先干点什么东西，诶现在干什么呀，截图呢，都是挺晚的事了是吧？截图其实是最最后干的事了是吧？嗯嗯，我们是不是要先清除它的一个默认的一个样式啊，哎，包括那些pading啊，包括那些maring啊，包括我们的行高啊，包括我们自己这些东西，实际上我们都需要需要给它清除一下，那我们是怎么写的呀？哎，可以这么写，Style来什么呀，来一个这个星号，然来什么呀？哎，Mar丁零，然后来一个这个PA丁零，我是不是可以这么写啊，哎，可以这么写，但是我们说了星号这个性能实际上是比较比较差的，实际上这个东西我们不推荐你去。

使用，而且并不是我每一个元素都需要清这玩意儿，对吧？诶那我们需要干嘛呀？诶那你不这么写怎么写呀，我就需要把我需要清除的这些元素给它干嘛呀列出来，那怎么列呢？哎，比如说我需要给body清，哎，比如说需要给P百2清，比如需要给什么呀？诶ul清等等等等，你把你所有需要清的干嘛呀，一个一个给它列出来，但是问题就来了，那需要清的其实还还不少呢，是吧？哎一个一个列呢，还挺麻烦的，所以这个东西一般我们都不需要干嘛呀，不需要自己去写啊，不需要自己写，所以给它去掉，不写它，哎，那这里边呢，我有一个文件叫什么呢？有一个外部的一个CS文件，叫做一个reset reet什么意思呀？重置啊，reset.css这个作用专门用来清除我们这个浏览器的一个什么呀，默认默认样式这个呢，也不是我写的，也是一个一老外写的是吧，诶在我们这里边会用的比较多啊，在我们整个这个前端开发里，这个是比较经典的一个重置的一个，呃，模板啊，重了一个模。

然后呢，我们直接点开它，我们来看它是怎么写的啊，其实写的比较简单，首先呢，你看上边一堆标签，什么A啊，Body啊，Div啊，SP啊，什么OB apply啊，H1到A6乱七八糟是不是都给你列出来了，然后在这儿统一给你设置了一个样式，诶这实际上是用的一个选择器，这个分组吧，哎，他把星号换成了这些具体的标签，然后什么MARIN0 PA定0BORDERER0FO size100%，什么字体从这个复函素式继承，什么这个垂直居中baseline等等一系列，它是不是都给你去指定好了呀，哎，都给你指定好了，所以这东西我们就不用一个一个去写了，包括下边还有这些呀，它是为了兼容我们这个诶H5的一些诶特点的，然后往下什么这个Li head呀，什么这个oll的这个list style是不是都给你设置成浪了呀，哎，包括这个block q的，还有这个Q它的什么呀，哎，他的什么这这这啥玩意，我还真不知道，这是这属于啥意思是吧？反正一个东西给你给你去了是吧，诶给你去了，然后往下边这个是个嘛呀，这是。

去掉他那个双引号了，还记得吧，我们那Q前后是不是给你加一个双引号了，哎，他来什么呀？哎，比before还有after，他都给你来了一个什么呀，空的，说白了给你什么都没有了啊，什么都没有了，然后包括我们这个table的这个什么呀，Borderwing还有那个border clas是不是都给你设置好了呀？诶所以它这里边所有的东西呢，哎，基本上都不用，我们自己写了一些基本的这个样式，他都已经给我们清除好了，那我们直接干嘛呀，我们是不是直接拿回去用就行了呀？哎，那这玩意怎么用啊？哎，另了，但是我们现在干嘛呀，CTRLC把它粘到我们这个项目里来，诶，然后在这我们来干一件事叫什么呢？引入我们这个外部的这容么呀，诶引入我们这个reet reet，诶点CSS用来干嘛呢？诶用来清除我们这个浏览器的一个什么呀，默认样式啊，轻度浏览器的默认样式，直接来一个这个link，直接来一个CSS reet点。

CSS这时候引入了，诶引入它以后，我们所有的默认样式都给我们清除好了，那以后你到了公司工作以后，那有的公司它会有什么呀，公司专门用的这么一个文件拿过来用也可以，如果没有的话，你就可以用这个，这个还是比较比较靠谱的一个版本啊，靠谱的一个版本好，那这一块写完了，然后我们还需要整什么呀，这块写完了，然后我们自己是不是还需要写一个自己的一个CS文件呀，或者说白了，我们这个页面里边，我是不是也要也要写一个样式表啊，那我么说了，样式表我可以写什么呀，我可以写内部样式表，我还可以写外部的样式表，那我们用哪个好？哎，是不是最好也用一个外部的呀？哎，我们要结构表现是不是完全给它分离开呀，诶分离开，所以这里边我们来创建一个新的一个CS文件，叫一什么呢？叫做一个配置，配置什么意思呀？页面啊页面，然后配置来一个杠，一个inex啊配置杠index表示什么呀？我这个4S文件是给我这个页面来用的，哪个页面呢？Index这个页面啊是index的页面，所以这个ind。

Ne表示我当前页面的一个什么呀，名字啊名字这样我在维护起来的时候，我是不是知道我这个CSS是对谁去起作用了，哎，起作用，然后一完成OK就创建好了一个这个CF文件，我们来说在这里干嘛呢？诶编辑我们这个什么呀，编辑我们这个主页的，诶样式表啊，编辑我们主页样式表好，那这个准备工作基本上就可以说给它完成了，但是注意这我还得干嘛呀，引入啊引入玻是不是没用啊，来引入我们这个哎配置index，直接也是来一个link，来一个配置index，好，那现在我们就引入两个样式表，一个是我们这个重置样式表，还有一个是我们这个配置index，我们首页这个样式准备工作准备完成了，那接下来呢，我们再来说一点其他东西啊，其他东西这里边呢，补充一个东西啊，补充一个东西，我们叫什么呢？叫做一个我们这个一个命名的一个什么呀，命名的一个规范。

命名规范，那我们这块什么叫命名规范呢？也就是说我们起名字要遵循的一个什么呀规范，那我们主要给谁起名字呀，汽车们主要起名就这么两个东西，一个什么呀，ID class，诶和什么呀，和我们这个文件啊，和我们这个文件的一个命名规范，那这个是不是就是文件名啊，诶ID class我的时候是要自己去取啊，诶我们要说一下它这个命名的一个规范，我们先说第一个叫什么呢？命名时诶叫什么呀？诶尽量使用什么呀，使用诶别使用中文啊，使用我们这个英文啊，命名时尽量使用英文，如果不会可以使用拼音啊，可以使用拼音，但是不要什么呀，但是不要英文和这个拼音混用，诶这能理解吧，要不然你就英文，要不然你就什么呀，哎，要不然你就这个拼音啊，要不然你就拼音，哎，你别说你写，你想写一个什么呀，你想写一个。

蛋兔碎，你发现这个万你不会写，你来什么呀，来个一，然后诶兔又会写了，兔诶子瑞也不会写了，来个三，诶一兔三这不就疯了呀，那就封了啊，所以注意你要不然就全用英文，要不然就全用什么呀拼音，哎，但是尽量用什么呀，尽量用英文，而且你要尽量保证你那英文是什么呀，是对的啊，你要写错了，你还不用，还不如用拼音的是吧？诶一定要尽量保证你那东西写对啊，写对写实在不会的查查去，这个有道查一下啊查一下，然后接着来说，然后还有一个就是我们这个命名格式，命名格式呢，我们有这么几种，第一种我们才最常用的叫一个，什么叫驼峰命名法，什么叫驼峰命法，驼峰见过吧，哎，低一下来，然后高，然后高，是不是这么一个形状啊，哎，什么叫一个驼峰，什么叫驼峰用法呢？叫做什么呀？首字母，首字母小写，首字母小写，然后什么呢？每个单词的这个开头。

字母干嘛呀？大写啊，首字母小写，每个单词开头字母小写什么意子？举个例子，首字母小写，我来一个什么呢？AA，假设AA就是一个单词AA小写，然后呢，下一个单词bbb，然后CCCA，哎，表示什么呀？表示我这个B还有C都是一个单词的一个什么呀，开头啊，是这么一个格式叫什么呀？驼峰用法，什么叫驼峰啊，前面低是不是，中间是高起来，然后又高起来了，哎，叫做一个驼峰用法，或者简单举个例子，比如说什么呀，我们来一个hello word，哎，Hello word是不是这个效果呀？H是小写的，首字母小写或者说什么呀？所有的字母都是什么呀，都是小写的，唯独什么呀，每个单词开头那个字母是大写的，你看word这个W是不是开头字母啊，所以它是什么呀？它是大写的啊，它是大写，这个是我们经常采用的一种方式啊，还采用一种方式，还有一种呢，还有一种叫什么呢，还有一种也可以什么呢？诶也可以使用，也可以所有的什么呀，有的。

字母都小写，然后什么呢？单词之间使用我们这个什么呀？哎，使用我们这个下划线或什么呢？或减号连接啊，使用下划线或减号连接，举个例子，像我这种AABBBCC怎么写，我可以写成什么呀，AA_bbb_CCCC或者要怎么写呢？AA减号bbb减号CCCC能理解吧？哎，说白了，我为什么要这么写，为什么要用驼分名法，为什么要使用这种命文方式，是不是就能区分出我这个不同的这个单词啊，哎，我一下就能看出来这是不是就是两单词啊，一下能看出来这是不是三个单词呀，这样我们阅读起来比较什么呀，比较方便啊，比较方便，那这个两我主要用什么呀？我会主要用驼峰命法，还有我们这这种方式啊，用减号的这种方式，这两种方式我会主要用一点，这个方式呢用也行，但是差别呢不是这么大，用哪种啊都行，选一种你习惯，或者到了公司以后，根公。

做的什么呀，要求去来啊，根据要公司的要求来啊，但是注意啊，你千万干嘛呀，你你你千万别逆着你公司干是吧，诶公司怎么写你就干嘛呀，你就怎么写啊，公司怎么写你就怎么写好，这是我们说简单说一下这个命名的，诶规范啊，命名的规范，然后呢，接下来我们就可以来去做一些工作了，页面整个已经处理完了，然后我们来看我们整个一个页面的一个结构，整个页面呢，我们先不去做了，页面先不做，待会再说，我们先看什么呀，我们发现我们这个页面实际上它整体是有一个，它实际上整体来说是分成两部分，首先呢。整个中间是不是一个部分啊，然后呢，它整个的背面是不是等于是我这个网页整个的一个这个底色，或者说整个一个大的背景吧，哎，大的背景，所以我们在做中间这部分的时候呢，我可以干嘛呢？我是不是可以先把这个背景给它做出来啊，哎，那这背景我们先说这背景。给谁设置合适诶是不是给body设置合适啊，哎，给body设置合适，那我给body设置合适，我们来看这背景我怎么弄啊，是不是跟我们那天讲那个背景那个重复那是一样的呀，哎，我截一个像素，然后一平一水平方向重复是不就行了，哎水平方向重复，但是这里边你要看有一个问题，我这背景我可以这么截，只截到这儿对吧，我也可以这么截呢，从头截到尾，诶哪种方式好一点诶从头到尾。

省事是吧，我这一截整个页面背景是不是都出来了呀，但是注意我一旦从头集到尾意味着什么，我这高度是不是就就固定了呀？哎，我从头到尾由于我这个背景大小是固定的，我这高度就固定了，也就是说如果我这个背景图片假设高度是一个1000像素，我这个网页我能不能超过1000像素了，超过1000像素这是会出现一块白啊，我能不能小于1000像素啊，小于千像素我这背景是不是是不是会少一块啊，诶，少一块，所以如果我从头到尾会导致我这个页面开发起来非常的费劲，为什么费劲啊，你只能和我们这个图干嘛呀，高度完全一致，稍微差一点是不是都不好看呀？诶，而且你要注意的是注意的是什么，你看下边这部分，它这是不是就一个纯色的呀，诶这是不是就一个。

相当于是一个边框啊，哎，相当于一个边框，所以这部分呢，我就没有必要截图了，我设置一个背景颜色，然后设置一个上边框是不是就OK了呀？哎，就OK了啊，所以注意这种背景千万不要从头到尾，你要从头接到尾，诶有你后尾的时候是吧？哎，有你后悔的时候啊，所以这一块我们只需要干嘛呀，把这一部分一截，然后设置给body底水平一重复是不是就OK了呀？哎，那这个我们要截多少啊？哎，高度是不是就从头到从头到这啊，哎，然后宽度一个像素是不是足以啊，哎，一个像足以，我们来看看怎么去截来我这画一个圈，画出来是不是到这就OK了呀，诶然后咱们把它调整到一个像素，但是你调整到一个像素的时候，你发现什么呢。他总是不那么给面是吧，费了半天劲是不是还调整两个像素啊？哎，费了半天劲才调整成两个像素，所以这里边呢，当然你截两个像素行不行啊，也行啊，没什么问题，差距不是很大，那这里边我们来看看，我要想截一个像素怎么截，我可以干嘛呢？诶你选中这儿的时候，选中这个矩形选择框的时候，你注意它有个样式，现在显示是什么呀？正常啊，正常往下我这一选有一个什么呀，它是不是有一个固定大小啊，哎，规定大小我这一选，然后你看我这是不是可以指定这个高度，还有宽度，诶当然这宽度我这已经指定过了，哎，我指定什么呀，宽度就要什么一个像素，而高度呢？诶高度刚才量的是四百四百七十一是吧，我们来看看它差不差啊。

上边对下边呢，差一个像素是吧？诶差一像素，所以高度应该正好什么呀，472，那这样以后什么效果呢？这样当我再一点这个矩形选择框时候，就不用我拖了，它会默认就给我生成了一个什么呀，宽度是一，宽度是一，高度是472这么一个框，然后我这一点来走，你是不是出来了，诶咱们可以往上挪挪，诶那这样我是不是出来一个高度，宽度是一，高度是一个什么呀，472，当然这位置不对啊，我们可以看到啊，给它往上挪到摁着你那方向键往上挪一下，是不是这回就OK了呀，来看看诶还挪俩哎，这样就OK了啊，咱们再看看底边。

是不是也OK啊，哎，正好是一个像素啊，正好一个像素截完了以后，直接点击我们这个图像裁剪，然后来看我这图片是不是就就切出来了，哎，好，文件我们来存储为web所用格式来看它的格式，PGF4，这是一个249，然后看看其他的吧，GIF是一个409，然后GPG呢是一个415，那就不用选了，PG24啊PG24选完了以后我们要存储，那问题又来了，把它往哪存呀？诶我们说最好是存到我这个项目的这个img这个文件夹下啊，诶那接下来我要看看我这文件夹跟哪，直接选中打开文件所在的这个目录，我一看呢，在我的什么呀？诶，我的这个文档下边这个1013 polo30下边对吧？诶，那我们来找一下我的这个，在这儿保存的时候找一下我的这个，诶酷，我们这个文档1013，我们这个POLO360。

MG是不是跟这儿呢呀，改一个名，我叫一个这个body的一个BD包body的一个这个BD啊，我们这个body的一个背景图片，然后我这儿一保存，然后再看这块，你看图片是不是过来了，一打开我们来看这个背景一个像素是不是就已经在这儿了，哎在这以后，接下来我们来给我们这个body来设置一下这个背景，打开我们这个CSS文件来在这儿设置我们这个CS背，设置我们这个body的一个背景，直接来一个，那我说就是元素显示器啊，哎，Body，然后背景呢，我们是一个background啊background background我们直接来一个这个，哎，一个这个URL设置一个body，这个BD是不是设置一个背景图片啊，颜色我们就不用设置，让他默认这个白色就就OK了，设置完了我们来看效果，诶光这么写行不行，诶光这么写有什么问题，我是不是没有设置它那个重复方式啊，没有设置重复方式它什么呀，是不是平铺。

啊，平铺说白了就什么呀，双方向重复吧，哎，我们来看什么效果一运行看什么了，不仅这一块有下边是不是还多出一块来，诶我们这块它干嘛了，它不仅水平方向重复了，垂直方向是不是也重复了，而我们这个东西我用不用垂直方向重复呀，我是不是只需要水平方向啊哎，那我还需要设置一个什么？嗯，是不是一个叫做，诶我还用写那个repeat battle round的repeat么？哎，我这简写属性我是不是直接写了来一个P的X水平方向重复来一刷新走，你是不是就OK了，哎，就OK了啊好，那这一块叫什么呢？叫设置我们这个背景叫什么呀？水平方向重复设置我们这个body的这个，诶背景图片干嘛呢？诶水平方向重复啊，水平方向重复保存，那这里边我们来看看其他浏览器啊，咱们都看一眼，看一下我们这个pro没有问题是吧，那没有问题，那这种东西一般都不会有啥大问题的是吧。

再来看看我们这个IE，那这回呢，我们写的时候呢，我们去兼容一下这个I叶IE6以后呢，兼容机会就不是很多了，是吧，我们来兼容一下IE6，来IE6可以再看一眼A8啊A8我们兼容一下打开是不是都没问题啊，哎，都没问题啊好，那这个呢，是我们说的整个一个项目的结构，我们就算是给它搭建完了，那待会儿我们在写的时候就可以干嘛了，来完成我们这个页面了，但是这块呢，我可以给它往回返一下，诶，那现在呢，这是我们这个整个的一个页面，待会儿呢，我们来尝试着把这个页面给它完成啊，给它完成来我们这儿来停一下。