93.尚硅谷_HTML&CSS基础_页面练习-logo.avi原创

继续啊，咱们呢，整个这个项目的这个架子已经搭起来了，那接下来呢，我们来完成一下我们这个页面，我们开始写一下啊，那这个呢，我先把这个改成正常啊，改成正常待会圈不了，不然那这里边我们来说一下我们去如何去写这个网页，那我们来说写网页呢，实际上我们一般呢，呃，会有两种方式啊，两种方式，哪两种方式第一种我干嘛呢？诶我先来我们来看，我们说网页这里边我们分成什么呀？叫做结构表现，还有行为是吧？诶今天我们要主要学的写的是这个结构还有表现，那我们有的时候是怎么写的呢？哎，我先把我们整个网站的结构给它干嘛呀，写完说白了干嘛呀，我一次性把我这个页面里边的所有的HTML代码全都。写完H填L，代码写完了，我再一起去设置样式，再写那个什么呀，CSS，诶分两步，先写NL，先写再，然后再写什么呀，再写CSS，但是这种呢，其实就要求会稍微的高一点，为什么呢？就是说需要你能完全的把这个结构给它干嘛了，你得写对啊，把这个结构写对，那还有一种方式干嘛呢？诶我写一部分HTMMR，我再写一点什么呀，CSS，比如说我想先写这块我就干嘛呀，我先把这一块的HL写完了，下边我先不管它啊，我就先写写这块了，写完这块H毛呢，我再写这块的一个CSS，然后把这个样式都给它干嘛呀，一步一步的写出来，说白了我就什么呀，诶一点点写啊，一点点写，而我们那种方式干嘛呀，分成两块写，先写结构，再写表现，那今天我们要用哪种方式呢？我们用后一种干嘛呢？我们会一点点写，而不是干嘛呀，而不是将整个结构写完了再写表现。为什么采用这种方式呢？那首先第一个问题就是什么呀？如果把所有结构都写完了再写表现。

呢也行，但是可能写完要写完这个NL以后呢，再写CSS，可能NL写什么了，你就给忘了是吧？诶结果上就不清楚了，所以这块咱们就诶写1.n牌写一点什么呀，CSS我们接受起来呢，可能会更容易点啊，更容易点，那现实开发中呢，两种方式都有啊，选一个你习惯就OK了，不用说局限于某一种方式啊，不用局限于某一种方式，那好，那咱们现在要写的话，首先我们来看整体的话，其实我们先说上边一栏，我们先写上边这部分，上面这部分是我们一个整个网页一个什么呀，头部是吧，诶头部，那这个整个其实我们最简单的来一个什么呀，是不是来一个div就行了，诶来一个div就行，所以这里边我们整个在这儿来创建一个我们这个头部的这个div，这儿来创建我们这个头部这个div，也就是什么呀，我们叫做一个给它起个class，叫一个hier，我直接来一个div，点一个hier he，哎，Hier，那注意啊，这里边至。

用class还是用ID，实际上对于我们这个hier来说呢，无所谓，为什么无所谓呢？因为像我们这个hier，其实我在页面里边是不是只有一个呀，所以这种东西你即使用ID呢，也没问题啊，也没问题，但是我个人更习惯用什么呀，用class，但是你也不用纠结用哪个，习惯用哪个，你就用哪个，如果这东西在页面只有一个，那你不妨就用什么呀，就用ID，无所谓啊，无所谓这块我还是都选择用class了，我们就不带我在这我就不用ID了啊，不用ID了，Class一个header header呢，这就是我们这个头部的div，头部的div写完了以后我们来看一下啊，那我们说这个头部div它有什么特点，首先我们来说这个div它是不是100%宽度的，它是不是只有这么宽啊，实际上后边整个是我们那个背景吧，哎，整个这包，而我们这个div是不是只有这这么宽啊，不仅仅只是它只有这么宽，整个从头到尾是不是都是这么宽啊，哎，都这么宽，而且它还还是在我们这个。

页面里嘛呀，是不是居中的呀？哎居中的那他们到底是多宽呢？我们来量一下，诶这个线呀，正好这辅助线已经给我们拖好了，我直接从左边这个辅助线量到右边这个是不是正好是一个宽度啊，诶来量一下，从这来往这一拖，这是一个什么呀？哎，宽度是不是一个九百四啊哎，比较经典的一个布局啊，940个像素啊，940像素，那也就是说实际上我说这一部分，这一部分包括下边的所有部分宽度是不是都是九百四呀？诶那我们来给它先固定一下这个宽度来，那这里边我来写一个我这什么呢？点一个这个hidden的，但是我来给它来什么呢？来一个这个Y外来一个940个像素，然后marin还得干嘛呀，零凹凸把且居中啊，哎，居中给我们这header设置，但是我这么写好不好呢，他有点小问题，什么小问题呢，我们说了我这块来一个hier，我是不是给它设置成这个九百四了呀，但是实际上我下边这一堆。

是不是都是940，而且是不是都是居中的呀，所以我这仅仅设置一个hi呢，其实呢并不好，那我想怎么办呢？哎，我干脆干嘛呀，我单独提出来一个来什么呢？点一个这个WW表示什么呀？Y，诶Y表示什么呀，宽度说白了我用一个class叫W来给我们这个元素给它干嘛呀。

是不是固定这个宽度啊，哎，固定宽度那写一个W什么什么好处，我以后谁想设置为九百四谁呢，谁想设置为居中我干嘛，我是不是把这class给他加上就行了呀，给谁加上谁就940，谁是不是就居中了呀？哎这样我们写起来更省事一点啊，更省事一点，所以这个W的作用就是什么呢？固定我们什么呀？哎，固定我们这个元素的一个这个宽度和这个居中啊，固定元素的宽度和居中，你想上谁这么宽你就干嘛呀，你就给谁设置，想让谁居中就给谁设置啊这是我们说那个W，所以现在我们这个div是不是就已经是并宽的，并且是居中的呀，哎，居中的好，那这块设置完了，然后再看，再看我们发现什么呢？我们整个这个元素，实际上整个这个hier呢，分成两部分，一部分是我们左边这个什么呀，Logo，诶还有我们是右边这个一个什么呀，诶导航条啊，导航条一个是logo，一个是导航条，那我们一个一个来写一下，我们先写左边这什么呢？Logo。

Logo比较简单，那这里边呢，我就直接省点事了，我直接来什么呢？来一个div div我给它来一个class叫什么呢？叫做一个logo，这表示什么呀？这个表示这个div里边放的是我们什么呀？Logo，诶在我们这个div中，诶来设置我们这个logo啊，在div中我们来设置logo，但是以前我用的是一个这个H1也可以，H1表示什么呀，表示它是一个，这个是不是主要内容啊，诶页面一个主要内容，但是这里边呢，其实用he还是用div呢，其实这块对于logo来说实际上无所谓啊，用哪个都行，我这块采用一个div div这设置完了，然后再往里边看，Div整完了，然后我们来看div里边，我这是得放一个。图片吧，诶图片，但是注意了，这logo一般是干嘛的呀，是不是超链接可以点的呀，诶我1.logo一般会跳到我这个页面的一个主页吧，所以不仅仅是个图片，还得是个什么呀，诶还得是个长链接，来一个AA，来一个井号A里边放一个什么呀，诶放一个MMG是我那个logo这个图片啊哎logo这个图片，那这写一个网站的一个这个logo，诶网站的那个logo写他一个描述啊，写一个描述，好，那这写完了，那我们这个整个结构上都写完了，差个谁呀，是不是差我们这个图片啊，哎，你得把图片给它整进来，那我们就需要干嘛了，是不是抠切一下图了，哎切下图了，那我要切图，我是不是要把这个。

切的是这个logo啊，哎，切的这个logo，那我要切之前呢，我先在这样，我先在干嘛呢？用我们这个辅助线把这个logo给它圈出来啊，给它圈出来怎么来圈这个logo啊，怎么来圈这个logo，我来直接这块，我拖辅助线干嘛呢？我来把这个log的边界，Log的边界是不是跟跟这儿呢呀，诶我在这儿拖一根线出来，诶给它卡在这，这是不是正好是我这个logo一个边界呀，但是我发现实际上我这个线呢也还行是吧，但是那个拖着线的时候，你会发现很痛苦，为什么很痛苦呢。

我拖线的时候，我到这儿它会不会自己停啊，不会自己停，我还得自己拿眼睛去瞄，看它是不是到了边上吧，所以这种方式呢，拖着一个线的时候呢，拖的不是特别的一个准确，那我们说了我希望什么呀，我希望我这个线到达这个图片的边界，你可以自自己干嘛呀，吸附过来啊，吸附过来，而不是让我去，诶一点点去描啊，一点点描，那我们怎么让它吸附呢？来把这东西先拖回去，那注意了，我们这个整个一个网页设计图，包括我们这个PID，它是一个什么呀，分层的这么一个图，换句话说，我这网页它干嘛呀，这个图片它干嘛呀，是不是有很多层啊，哎，很多层，比如说我这随便找一个找一个这块我一点是不是整个都没了呀，哎，那也就说什么，我点着眼睛代表什么呢？将这个图层整个给它干嘛了，隐藏起来了，那我们希望什么呢？我希望当我拖辅助线的时候可以干嘛呀，可以自动给我吸附，那我就需要先干嘛呢？先选中那个图层啊，选中那个图层，那也就说我这要选中什么呀，选中我这个logo。

外面个什么样图层，诶，那我们来看我这个logo，我那怎么去选，注意选中我们这个什么呀，诶选择工具移动工具，然后呢，这有一个自动选择，给它打上勾啊，自动选择打上勾，然后后边有一个什么呀选项，你选什么呀，选图层啊选图层，那这样以后有什么效果，当你点一个图片的时候，你看这边啊看这边我一点走你。是不是自动选中了他那个图腾啊，哎，你点谁就选中谁的那个图腾，我点他是不是就选中他的那个图腾啊，哎，所以你干嘛呢？你要拖先选中你要干嘛呀，你要点的那个元素的一个图层，我一选它这就是什么呀，它所在图层那点到它以后，我们来看什么效果啊，这回你再拖辅助线啊，这个再拖来。看什么效果了吗？当我一靠近这个边缘以后，它就是自己就吸过来了，哎，就不用我再去一点一点的去瞄那个边缘了，它自己就干嘛了，就吸过来了，但是前提是你一定要选中它这个图层啊，然后再拖上面的。

是不是也是啊，哎，这样我们拖起来就非常的什么了，是不是非常容易了，哎也非常的这个准确了，包括这边这边我们选中这个字的一个图层来在这儿呢，直接一点是不是就没了呀，哎，这个字的图层还是一拖这个线。哎，是不是正好到这个边界呀，你看哎，非常准确的一个位置啊，所以注意你要拖这个辅助线的时候，先选中你要量那个元素的一个图层，好，那这一块整个我现在用辅助线是不是把这个框就给框起来了，哎，然后接着来用我们这个矩形框。选中这块整个一个logo，我们就用这个矩形框给它圈起来了，现在整个是一个288，一个76，实际上这一块呢，是不是多了一个像素啊，多了一个像素没关系给他。切掉整个是不是就OK了呀？诶然后我们来看一下这个大小，大小F8来看是一个287，宽度是287，高度是一个这个76，那这就OK了，然后我们干啥呢？我直接来一个这个图像是不是裁剪就行了呀，但是注意这时候裁剪时候有一个问题，什么问题呢？现在你注意我这一裁剪，现在我一裁剪它这个后边这个白色背景是不是一块就给裁下来了，诶那当然说我们说这个白色背景裁下来行不行啊，也行，为什么也行啊，因为我这页面本来这是不是就白的呀，所以你背景是白的呢，也没问题，俩人一重叠其实也是什么呀，也是看不出来的，但是这有一个小问题，如果我直接把这个白色背景给裁下来吧，会导致一个什么问题啊，那以后假如说我背景变了，变成一红色背景了，那我这白在一块是不是很难看呀，我希望什么呀，如果我网页的背景是白色，Logo的背景也是白色，如果网页的背景是红色，是不是logo的背景也是红色呀，说白了就是什么呀，是不是logo没有背景啊，哎，Logo的背景是透明的，那所以。

在切这个图之前，我需要将我们这个logo的背景先给它去掉，那怎么去掉啊，诶那我们来说logo的这块背景，实际上它也是一个什么呀，也是一个这个图层，所以我要想把背景去掉，只需要将我们这个logo这个图层给它背景这个图层给它干嘛呀，隐藏起来是不是OK了呀？哎，所以还是先选中我们这个图移动工具，然后选中我们这个背景这块白色一选中，你看是不是出来一个BG啊，诶一点这小眼睛走，你背景是不是没了呀？诶你看这出来这个小点，小点点就表示什么呀，是一个透明的背景，这回我再点击图像裁剪，诶，那这样一个logo就是一什么呀，透明背景啊，就没有我们说的那个什么了背景啊，然后文件存储为web所用格式，那像这种格式我就没得选了，肯定得用什么了，PG24了，它这个透明相对来说比较复杂一点，而且也不大是一个什么呀，6.143，然后直接点击。

住还是存到这个地方，改一个名叫一个这个logo，然后保存，保存完了以后来这儿来设置，直接来一个我们这个logo，点一个PNG保存，这一刷新走，你图片是不是就过来了，诶非常简单是吧？诶截这个图截完了以后呢，图片过来以后呢，我们来看这儿有没有什么问题啊，来看看测试这有没有什么问题，你觉得。

哎，火狐里也挺好，Chome里也挺好，他说注意了，如果到IE6里会不会有什么问题，IE8先看看没问题对吧，IE6里边呢，我这一刷新走你，哎是不是咱们费了半天劲截透明到他这是不是又不透明了呀，为什么呀？哎是不是不支持我们这个透明的这个背景啊，诶所以这里边我们还要引入一个我们的这个什么呀，是不是GS文件呀，诶我来我直接把它给粘过来，CTRLC粘到我们这个JS里，然后呢，把我们这个代码给它直接复制。CTRLC原封不动，给它粘到我们这个包的什么呀，最下边来这一保存，咱们再来看效果。

刷新是不是就OK了呀，哎，就OK了啊，这里边选择器我们已经写好了，写了一个div一个什么呀，IG啊IG来那这个代码我们说一下再给它补个注释啊，这是处理我们这个E6的图片都明问题，处理我们这个IE6的一个这个诶频率问题啊，频率问题保存好，那现在这一块就没问题了，好那这里边整个都处理完了，然后再看位置也还好，但是呢，但是呢，它和我们这个图里边是不太一样啊，咱们把图啊往回走一个走到我们这个，回到这儿，把这个背景呢，先给它调出来，调整一下大小来看这儿，现在我们来看啊，现在我们这个图你现在看啊，咱们这样，咱们这块呢看不明显，这样我给谁呢？我给这个hier设置一个这个背景颜色，这样我们看的会清楚一点，设置我们这个header，直接来一个什么呢？点一个header，先来一个background。

看呢，Color来个井号BFA注意了，这个背景颜色并不是我们样式需要的，我只是想看什么呀，我这hi点到底有多大个啊，到底有多大个，这一刷新走，你hier是不是跟这儿呢呀？诶hier现在宽度是940，高度是被我们这个div给它撑开的吧，哎，撑开的，那你现在看我这个div现在是不是紧紧的和我这hier是不是挨到一起了呀，但是你来看我这个图例，图例是这样干嘛，它是不是有一段距离啊，包括上边是不是也有一段距离呀？哎，你现在看我这个是干嘛的，我这个是不是紧紧的贴到头的呀，而实际上他们是有一个距离的，诶那这块我要怎么办？咱们先看垂直的吧，咱们水平到再说，我们先看上下的，上下这个我们要怎么处理，上下我们要怎么处理，诶，那上下我一想我可以干嘛呀，我可以给这个div是不是设置一个上外边距啊，但是其实垂直方向外边距我们说有个问题什么问题啊哎。

是不是重叠问题啊，哎重叠问题，那所以这种有问题的我们就尽量避免用，那既然外边距不行，我能不能我来一个上内边距行不行啊哎，那整个那边距加大以后，是不是整个把我们元素往下往下挤了呀，哎往下一挤这个距离是不是出来了呀？哎，所以我来给它设置一个上那边距，直接我们来量一下这段距离是多少，也就是说从这到哪啊，是不是到我们条线的距离啊，高度是一什么呀，37个像素啊37个像素，所以这里边我们给他设置一个拍丁top，诶设置一个这个上哎内编距，直接来个这个拍丁top来什么呢？诶三是七个像素保存，现在我这一看一刷新走，你是不是整个就下来了，哎整个都下来了，并且我们整个元素高度是不是也增加了呀，诶增加了，但是高度增加其实无所谓，因为这块它的高度其实还挺还富裕，空间是还挺大的呢，还还挺大的啊，那接着再来看我们仅仅设置了一个上内边距，诶那我们先说说从位置角度讲，实际上。

呃，还有没有必要再设置下面面距了，没有了，因为这个位置是不是也OK了呀？诶，那我们来看看啊，我这需不需要再指定一个下面面距来看，这现在我们整个这个div实际上是不是到到这个位置啊，哎，那我们想想，那现在等于这块是不是还留有一块空白的呀？哎，留一条留有一块空白呢？那我想想那这段空白我们说用不用给下边那个元素。用不用你下边元素下边是谁啊？下边是不是这么一个图片啊，哎，它的位置在这儿呢？所以我们下边元素是不是只需要从这个位置开始啊，上边这个位置对于下边元素是不是都没有，都没有意义啊，哎，都没有意义，所以那既然对下边元素没有意义，那我们不妨干嘛呀，我让上边元素是不是把这块距离是不是都给占了呀？那问题来了，我是站到这儿好呢，还是站到这好，是高一点好还是矮一点好？诶是这个红线这好，还是这蓝线这好哪个好？哎，其实哪个都行是吧，哪个都行，但是我们来说一下啊，如果你站到红线这了，你要考虑下边一个元素了，你现在站到这个位置的时候，如果你下边再写这个div的时候，那你注意了，再写的时候它会在哪，它是不会贴在这啊，但是它的实际位置是不是应该靠下呀，所以你在下边这个div的时候，我还需要给下边那个div是不是设置这个外边距啊。

哎，所以很麻烦，那我一想干脆干嘛呀，我把这一块距离我是不是都给上边啊，那这样下边元素过来以后，我是不是自然而然就给它挤下去了，哎，就不用再设置下边那个啊，所以这块怎么设计都行，那我采用这种方式，我把这段距离干嘛呢？给上面那个元素啊，给上面的元素，那这段距离是多少，我们来量一下啊，还是我先给它拖一条线，把这个边界给它定出来。这块还没选中这个图片，我们来选中一下，它这个应该是有一个这个。

这还是。哦，这它背面啊，还有这么一个图层，选中它，然后我们来拖一下。还是没戏，来，咱们放大一点，没戏咱们就人眼戏了。走你是不是正好是大概是这个位置对吧？诶咱们是这个位置啊，所以现在呢，我需要给它设置一个内边距，那边距多大呢？从这个位置一直量是不是应该是这么大个啊，是一个46像素啊46像素，所以这里边呢，我再给它设置一个这个pading bottom pading这个bottom来什么呢？46像素保存，现在我这一刷新走你是不是就拱下来了，拱下来以后的好处是待会我再写那个div的时候，那个div是不是直接就在这个位置了，我就不用再去调整它的这个位置了啊，调整它这个位置，好，这个位置呢，我们就算给它定下来了，当然这两个样式我可以干嘛呀，是不是写一起啊，那我们可以用我们这个简写属性啊简写属性，但是我这就先不简写。这么写吧，其实也。

也无所谓啊，这是设置一个这个下内边距下那边距保存啊，好这一块两个内边距设置完了，现在我们这个整个这个logo的一个垂直位置已经干嘛了，是不是定下来了，哎，垂直位置定下来了，然后接下来再看还有什么东西我们需要设置啊，是不是水平位置啊，水平它离我们这是不是还有这么一段距离呢？哎，那这个位置我们给谁合适？那么先说给我们这个大div给它设置一个内边距行不行，行不行，诶行不行，注意了，大div我们的宽度是多少？940，如果你给它水，也就是说水平方向的宽度是不是已经定了呀？好，那你现在给大div加一个水平方向一个内边距，什么情况是不是给撑开了呀？哎，撑开了你还得去调整那个宽度吧，哎，所以这块如果水平方向你还设置那边距呢，稍微有点什么了，有点麻。

哼，那我可以干嘛，哎，我是不是可以设置成我们这个div的这个这个logo的什么呀，是不是左外边距啊，哎左边距，那这个距离是多少，我们来看看。是不是就这两个线的距离啊，这是一个15个像素啊，15个像素，所以这里边我们来一个点一个什么呢？点一个叫做一个logo啊logo这来一个什么呀？Maring一个left left来一什么呢？来一个15个像素啊15像素这是设置我们什么呀？设置我们这个logo。设置我们这个logo的一个，诶位置来这一保存这一刷新走，你是不是整个就进来了，哎整个进来了啊，那这块我们就给它整OK了，那下边呢，我们先把这个背景颜色给它去掉，再看看效果一保存这一刷新走，你是不是整体跟我们这个设计图效果就一致了呀，哎，整体上跟我们这个设计图效果就一致了，好，那这一块完成了，简单看一下这个兼容性一刷新，诶里边没有问题啊，然后最后看我们这个IE6全部刷新，IE6没有问题，IE8呢，是不是也OK啊，诶这个位置我们就给它都整OK了，然后呢，这里边最好我在干嘛呢？再给我们这个，诶超链接这我最好再给他加一什么呢？加一个这个title，加个title干嘛呀？诶来描述我们这个链接的一个什么呀，一个内容啊，一个内容啊，一个诶一个非常非常好的网站，然后一保存这什么效果呀，我这一刷新当我一点。

陈秘书。是不是会有一个提示文字呀，他会有一个提示文字啊，设这么一个小的这么一个标题啊，小的这么标题好，那咱们这个呢，Logo就算是给它完成了，其实整个做起来呢，其实并不是特别难，唯一的一个注意的地方就是我们再去抠这个图的时候，你要稍微的什么呀，细致一点，哎，这个图层的操作你也要第一次去尝试去熟悉一下啊，熟悉一下好，那我们先完成这一部分停一下。