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

哎，做啊，刚才呢，我们这个是把我们这个整个这个班凳给它写完了，接下来呢，我们该做是不是这个部分了，诶这个部分我们说了整个其实可以理解成什么呀，是整个我们网页的一个主要主要内容的一个部分吧，哎，主要内容部分首先那还是它整个是不是一个div啊，哎，整个是一个div，并且它的宽度也应该是一个940，并且居中码，哎且居中啊，所以这里边我们来先创建一个这个div，嗯，先创建一个div div第二一个什么呢？叫做一个con，叫一什么呀，Content，我们这个主要这个内容这部分啊，那我们这写一个注释叫什么呢？这是我们这个呃，Content的一个开始，然后下边是我们这个content一个结束啊，这是我们content一个结束啊content content是我们这个主要的一个内容的部分。

然后呢，它同样也是宽940，然后得是什么呀，居中，所以给它加这么一个W啊，我们这个Y那个class，然后这里边我们这个div就整完了，然后div整完了，我们来看DIV1上来第一个这就是什么呀，是不是一个标题啊，哎，一个标题，那既然是个标题，我们上面还没用过标题呢，其实这个标题我们最简单直接来个什么呀，诶来个H1是不行了呀，诶来个H型的，因为我们整个页面里还没有用过标题标签对吧，而且这个标题明显也是我页面里最大的一个标题啊，所以直接给它放一个这个H1，复制一下这文字，然后呢，我们这来一个这个H1，然后把这个文字给它放进去啊，这就是我们这么一个一级标题，标题整完了，我们来把它就直接横过来吧，不给它换行了，保存我们来看效果，这一刷新走，你这个字是不是就就过来了，诶，但是由于我们这个样式被我们这个重置了，所以这个大小也也没了啊，由于样式被我们重置了，所以接下来我们来设置一下他们的样式，那首先我们来看这个标题这里。

这边下边是设置我们这个content的部分，Content这个部分，诶然后呢，我们先先来干嘛呢？先来设置我们count中的这个标题，点一个这个count，然后里边是一个H1啊H1首先我们来看这标题，首先这标题它得是居中啊，诶居中简单直接来一个这个text啊来我们来一个这个center，哎，Center这是设置我们这个文字居中，设置我们这个文本居中保存这儿来一刷新走，你是居中过去了，居中还不行，我们还有字体的要求啊，字体我们来看是这个字体，它有一个什么呀，加粗的效果还是加粗，我们不用复制，直接复制到这个字体，然后加粗的时候我们通过样式来设置就OK了，选中这个字体，然后大小是一个24个像素，颜色就是一个什么呀，黑色啊，就是一个黑色，所以这里边颜色我们就先不用写了，直接来这么一个这个found found刚才是二。

啊四个像素，还有一个别别忘了叫做一个诶加速豹子，然后还有一个这个字体，然后一保存是不是就OK了呀？诶这是我们说设置我们这个字体，保存这来看一下效果，诶这个字是不是就OK了，哎字给大家设置完了，然后我们这来看吧，那这一块呢，我们这个字吧，它实际上会和什么呀，和我们上边这个div，它之间会有这么一个是不是距离啊哎距离那这样啊，我们来把这div啊给它显示出来，我们上边有一个叫做一个斑ner给它加一个背景颜色，来一个这个井号烟维加一个背景颜色，我们来看它到哪啊一刷新诶是不是跟这啊，哎，这个div跟这，而我们现在这个字呢，离div它有这么一段距离，我们来看下它这个图里边这个距离基本上。

差不多是吧，哎，12个像素，那这一块呢，我们简单去看一下，这块应该小一点是吧。说只有五个像素啊，哎，五个像素啊，五六个像素的样子是吧，所以这个距离得比我们小一点，那其实这一块呢，你要不想调的话，其实也行是吧，哎，两条也行，那这样咱们给他加一个吧，给他设置一个这个marin marin top设置一个上外边距，设置一个这个上，哎外边距，上外边距呢，设置上外边距也可以，但是这块设置上外边距有一个小问题，我们来看一下啊，我这个H1现在是在我这个div里对吧，而我这个div是没有什么呀。没有高，没有什么边框，没有什么内边距的吧，所以我这设置一个外边距以后它会干嘛呀，是不是传递啊，哎，会重我们这个垂直边的一个重叠会传给我们这个div，当是传了也没事，但是我们尽量去避免这个问题，所以这里边呢，我不选择设置什么呀，我不选择设置这个，诶上外边距设置一个什么呢？上内边距，诶内边距也可以往下来，但是不会影响我们整个的一个什么呀，诶这个重叠啊，不会导致重叠拍定一个top，刚才量了大概是六，那我这也来一个六，然后一刷新走，你是不是整个下来一截，哎整个下来一截啊好，然后呢，我们把这个背景给它去掉。

保存现在呢，这哥们已经下来了，下来以后我们再来看还有什么呀，这是不是还有一条线呀，哎，一条，这还不是下线，这是一个什么呀？是不是一个阴影，是的一个东西啊，哎，阴影是一个东西，那既然是阴影了，那就没得说了，截个图就完了对吧？哎，截图就完了，还是选中这条阴影阴影那就你选上这选选选背景去了啊选背景去了，这个阴影跟这儿呢，它叫一个break是吧，诶这么一个摁out一点，就是它一个啊，就用它一个，然后这里边图像我们来一个台阶确定诶。是不是条线就出来了，然后文件存储为web所用，格式还是PD24直接存储，这里边来一个名叫什么，就叫烂，它就是一条线嘛，对吧，诶就叫烂，然后给它给它撤回去啊好回来以后呢，我们来设置这条线，这条线我们说了还是设置一个背景对吧，那给H设置合适啊，是不是就给这个给H1设置就行了，哎给H1给H1设置就行啊，所以这里边我们来找到我们这个H1，给H1呢，设置一个这个背景。

设置一个这个背景，直接来一个叫做一个background，诶background，诶background background来一个URLURL是我们这个line，同样它重不重复呀，诶no repeat，然后也是bottom，然后center底部居中的这么一条线啊，然后一保存，我这一刷新走你这条线是不是出来了呀，但是还是这问题，这条线现在这位置是不对啊，太靠太靠上了，我们是不是需要把这线往下往下挪一点啊，往下挪怎么办呀？哎，给这个H1是不是加一个下边的一个拍定就行了呀，哎，下外边距不行，得加一下内边距啊加一个拍定，那拍镜加多少合适，我们来量一下啊来我们来选中这个，给他这拖一条线出来，这个边呢，应该是在这个位置啊，应该是在这个位置，然后呢，我们大概量一下这个距离啊，量一下这个距离，从这开始量吧，这是一个。

21个像素是吧，哎，21个，像咱们取个纸来一个20足够了啊，20足够了。P呀P咱就不管了，你看我们现在这个线，我这线是不是就在P上面呢？看见了吧，那你只要相对这个距离去调整行了啊，你看这个位置调行了，所以我这来一个20个就行了啊，你不用去量最底边那个，其实啊拍定top是一个6PX，然后我们来写一下，右边不要，下边是一个20个像素，左边不要是不是就行了呀，诶这样一刷新走，你是不是整个就下来了，哎，整个下来啊，你要按P这个量呢，可能会稍微的有点有点大啊有点大，好我们这个线呢，就给它整出来了，然后呢，我们来看一下效果，这个距离呢。

应该就是这样是吧，哎，看着还是差不多的是吧？好，那咱们这一块整完了，整完了以后，我们整个这个标题就给它整完了，然后下边这块就稍微有点麻烦了，我们发现什么呢？下边这块整个我们实际上给我们分了什么呀，是分了三栏啊哎分了三栏，哎，这是一个栏，这是一栏，这是一栏，那三栏就其实也就省事了，三栏其实就是什么呀，三个div是不是行了呀，哎，三个div啊，所以在我们H1下边，我们来放置三个div，来放我们这个内容的这个三个div，三个div我们给它起个名吧，第一个div我们来看啊，根据内容来起吧，Div第一个叫什么perfect，什么logic，咱们叫一个简写了，叫一个PL啊，这PL直接来一个div，点一个L，然后再来整下边一个是我们这个，呃，CS啊，Complete什么solution是吧，诶CS直接来一个div，点一个CS啊，然后下边最后一个。

是我们这个，诶什么Uber什么乱七八糟是吧，UUC了是吧，UUC了，直接来一个div，点一个UC，好三个div，我们给它定义完了啊，就是这三个div，那待会儿我们要往这个三个div里去填填东西，但是在填东西之前呢，我们这个div呢，你注意了我这三个div我的宽度。是不是得定一下啊，而且这三个div啊，我们现在都出来啊，现在显示出来直接来一个，来一个什么呢？点一个count，诶直接写吧，点一个我们叫做一个叫做一个PL是吧？诶PL，然后逗号点一个这个CS，逗号点一个这个UC，这三个div我们这里边给他来写一个，写一个什么呢？先给他设置一个这个高度，不然它没有高度啊，高度来什么呢？100个像素，然后来一个background color，来一个井号，一个得来个yellow吧，黄色保存，现在一刷新走你，哎我给三楼放哪了。

是不是都放到我们这个count这个div里边了，哎都放到我们这个H1下边了，你没发现什么了，这块你可能看不出来，你感觉还横过来了是吧？现在其实什么效果呀，三个div竖着放着呢，哎来我们这给它指定宽度啊，给他指定宽度，这里边给他来一个这个Y外，我举来一什么来一个100个像素吧，也来一个100个像素，一刷新走你这个看见了，哎现在我这个三个div还是干嘛的呀，是不是还是一竖条摆着呢？哎一竖条摆着呢，但是实际效果我三个div应干嘛呀，是不是应该浮动啊，哎应该横着摆放，所以我应该让三个div干嘛呀？哎，是不是直接都向左啊浮动啊，哎都向左浮动，先让它横过来，所以这个div呢，我们先来设置一个叫做什么向左浮动，向左浮动，那这个呢，我们最好啊，为了确定一下，因为这个类怕以后还会用到，我最好把什么呀，把它这个祖先元素给它加上啊，给它加一个这个约束啊祖先元素，然后向左浮动，直接来一个这个float，来一个这个left。

保存我这一刷新走，你是不是就横过来了，诶这一块就横过来了啊，但是虽然横过来这里边其实就不好整了，因为什么呀，因为我这图我这现在是跟我的整个的最里边，所以现在我这是不是看的时候不方便看呀，哎不方便看，所以这里边我们为了方便看一点，我干嘛呢？我在包底上边加一个这个高度啊，我给包Y加一个高度。高地来一个这个hit来一个什么呢？来一个这个，诶3000个像素加了一个高度以后呢，我们这出来一个这么个什么滚动条，这样我就可以把它放在往上面的位置放一点了，我们调试的时候方便一点啊，方便点，但是注意这高度有没有用啊，没用，待会我们就给它去掉啊，待会我给它去掉啊好，这一块整完了，然后我们来看，虽然横过来了，但是这个宽度我们是不是不对呀，哎，宽度不对，这宽度实在是太窄了，所以我们需要调整一下它这个宽度，宽度我们来看看是多少合适宽度实际上他已经给我们是不是拉出一条线来了，我们大概去量一下啊，当然这宽度应该是不对的啊，宽度应该是不对的，它这宽度是一个303是吧，哎，303，那这303我们这块可能多量了，多量了三个箱子，我感觉得。

给它切掉啊，给它切掉，切掉以后呢，我们再来看这一块F8，你看诶这是302是吧，切半天就切了一个是吧？诶居然切了一个啊，那我们这块是量完了是一个302个像素，但是这个像素其实这像素好不好啊，302这倒霉数吧，太倒霉了，我们这块整的时候吧，你这都302，我们这个算的时候是不是其实不好算呀，哎，三的时其实不好算，那我们这块呢，最好就来什么呀，这个数我们直接给它取个整就完了，来什么呀，来300，为什么来300呢？我们这整个宽度多少，整个是不是九百四啊哎，我一个给它设置成这个300，然后中间是不是还有一个距离啊，正好给一边是不是20正合适啊，诶一边20正合适啊，所以这个300应该是一个正合适的啊，所以宽度呢，我们就不按照他这个图里边来了，我们直接给他指定一个来什么呢？宽度来一个这个300个像素高度要不要，高度其实应该是不要的，为什么呀，高度当然我们需要干嘛呀，被这个内容是不是给它撑开呀，诶被内容给它撑开高度是不要的，但是这里。

但我为了看得清楚一点，把高度也给它写上，不然没有高度我们待会没法看了啊，没法看了就看不见东西了啊一刷新现在是不是正好占满了呀？哎，正好占满了，然后再来看，那实际上我们说了两个这个什么呀，我们这三个电源之间是不是还有这么一个距离啊，哎，人个距离，那这距离我怎么办呀？哎，我可以干嘛呀，我可以给其实最简单的，我是不是给中间左右各指定一个距离啊哎，左边一个外边距，右边一个外弯距，这个距离是不是撑开了呀？诶中间是谁呀？是不是这CS呀？诶CS所以这里边直接来一个content的一个这个CS，直接来一个这个marin，上下不要左右各多少啊？哎，各20个像素加一块正好是九百四啊，正好九百四这一刷新走你这距离是不是出来了，哎，好，我们这三个div的位置就算给它定下来了啊，位置就算给它定下来了，好，那这一块呢，是我们说整个这一块啊，我们来写一下注释啊，这也是我们说的这个，诶中间。

在这个三个，诶div这是干嘛呢？给我们这个div添加一个左右边距，诶给我们这个div添加我们这个左右边距，这个距离就出来了，但是这里边啊，还是要看它有的，它这个问题什么问题呢？我们来看啊，嗯，第一个我们要看到的问题就是什么呢？来看我们这图，还有我们这个网页，这个现在是我们这三个div对吧？在图里边是不是相当于这部分啊，哎，相当于这部分你会发现什么呢。

它和我们这个H1他们之间是不是有这么一个距离啊，哎，它是有这么一个这个距离的，而现在我们这个距离是不是比较小啊，所以这个距离我应该给它干嘛呀，是不是设置出来呀，那这距离我们应该设置给谁好呢？其实给谁都行，其实最简单的干嘛呀，给H1指定一个下外边距是不是行了呀？哎，给H1指定一个下边距行了，但是千万别指定内边距，你指定内边距是不是这个阴影给挤下来了，哎，阴影给挤下来啊，指定一个这个下外边距，那我们来看这距离是多少啊，咱们直接把这拖条线放在就这个位置吧，这里边我们来量一下。40，但是呢，多两个像素是吧，多两个像素咱们就给他来一个什么呀，38啊38就完事了，待会咱们再调整啊，所以给我们H1呃，还得指定一个下外边距38个行设置一个这个下外边距直接来一个marin bottom来一个38个像素保存这一刷新总体是不是整体就给给挤下来了，哎，挤下来了啊好，那这一块我们这三个div就给它整完了，那接下来我们来看看其他浏览器啊，一刷新我们的这个G，再一刷新我们这个IE8 ie8呢也没问题，再一刷新这是我们这个IE。

I6是不是都OK啊，诶，但是这个阴影就变得非常可爱了是吧？阴影是不是还是那个问题啊，哎，还是那个问题，这阴影我给谁设置，给H1设置的是吧？所以这里边我还得加一个逗号H1，所以其实最省号还是来个星号是吧？诶最彻底来这意刷新这时候就没问题了啊，这就没问题了啊，但是注意说是没问题了，但是有一个问题咱们一直忽视了什么问题啊，来咱们看看啊，你们你们想想有没有什么问题，有没有什么没问题是吧，很很完美是吧？诶很完美就得这样，自己就是自己看自己的项目总这么完美的是吧，但是你们看别人做项目也看的这么完美，很难得啊。

很难得证明你们对我还是比较认可的是吧？但是这里边我们来看个问题啊，我们来设置一下content content，我给他来一个这个background，看设置一个背景颜色，来个这个红色吧，保存看什么效果啊，一刷新，哎呦，康跑哪去了？Count是不是跟这儿了呀？哎，Count竟然跑这来了，而我们这个div它在哪里边啊，是不是在count里边啊，但是在我们显示效果上，Div竟然跑到哪了，是不是跑到content的外边了？哎，这是为啥？哎，是不是高度塌陷了呀？哎，我们这三个DIV1浮动是不是导致不能撑开复元素啊，于是就导致我们这个康的高度干嘛了，塌陷了，现在你还看不出来，待会儿底边有其他元素了，自然而然是不是就上去了？哎，上去了啊，所以高度塌陷这个问题一定要记住了，一旦涉及到浮动，你要你要考虑有没有高度塌陷的问题啊，有没有度塌陷。

你明显我们这是干啥的，这是不是有啊，哎，这有来看看其他链，其他链就不用看了，A6看一眼I61刷新呢。A6是不是很争气啊，为啥呀，为啥呀？哎，我是不是给他W设置宽度了，哎宽度默认就开启它那个什么了，诶has layout啊has layout，所以咱们这呢，还得多一步来一个高度塌陷问题，给它加一什么呀，加一个clear，诶，Fix，诶但是有同学干嘛了，有同学就直接加一可fix就完事了，你这加完了有没有用啊，诶你看你还不如不加了是吧，一点用也没有，为什么呀，样式表里你是不是没写呀？诶所以咱们把它给添加上，我这样吧，我就写到这个最上边，在这写一个，诶叫做解决我们这个诶高度塌陷问题的这个，诶一样，诶clear fix。

Clear fix，我们想想怎么写，我们写完整了，点一个clear fix冒号一个before逗号，点一个clear fix冒号一个after，然后这来一个content，来一个空的就行了，这再来什么呀，第一次play什么呀，诶table，最后再来一个我们的这个clear，哎，Bos是不就完事了，哎，就完事了，如果说为了坚容我们I16的话，再来一个哎clear fix来一个这个ZOOM1，诶同学说了，老师这IE6不是没有问题吗？我们避免这样写是不是更保险一点啊，万一没有设置宽度，它是不是也能起作用啊，诶能起作用，这回一保存一刷新是不是就没事了？诶这回这个就OK了啊，这个就OK了，好，那这一块我们设置完了，然后呢，我这个背景颜色你别忘了给它去掉啊，所以这里边注意啊，背景颜色是我们很常用的一个招，可以看到我们元素一个这个范围啊，一个范围背景颜色在这儿呢，给它去掉，然那counter其实都没啥用了啊，但我们看看没用，给它删掉。

好，那这一块设置完了，那接下来我们要写我们这个具体的内容了吧，哎，其实这三个呢，也比较好写，为什么叫好写呢？其实发现这三个结构是不是都一样的呀，换句话说，其实我写一个是不是都能出来呀，哎，都能出来啊，所以我们先一个一个来写吧，现在写第一个，第一个呢，上边这是一个这么一个perfect什么捞这个的，这应该是一个什么呀，标题吧，诶标题那我们这用的是一个H1，那我这个不妨就直接来一个什么呀，HL不就OK了呀，诶HL就OK了啊来，我来选中这块内容，选中文字吧，CTRLC找到我们这个div PL来一个这个HHR标题给它粘过来，然后呢，应该是每一个是不是都有这个标题啊，诶每一个都有，但是它的内容其实呢，不太不太一样，标题有了，我来复制一下这个文字啊。Controlit。CTRLV，咱们就把这个标题设置上，然后呢，其他我们再设置的话，我们就设置一个了，然后待会我们再改，因为你如果不写内容的话，我们那个宽，我们那个高度就就没了，写这个标题就是为了让他撑起这个高度啊，撑起高度好保存，现在来看标题是不是过来了，诶标题已经有了，那实际上我们这个高度就不用。

高度是不是可以给它去了呀，哎，高度我们让它背这个内容撑开一刷新，现在是这么一个效果啊，只剩一个标题了，标题然后再来看啊，我们执政第一个了，这两个我们先给它空着啊，先给它空着执整第一个，第一个除了一个大标题，下边是不是还有这么一个嘘标题啊，嘘标题我们最简单的直接来一个，诶来一个P标签是不行了呀，或者你来个H3也行，但是这块其实必要性不是那么大，直接来一个P标签完事了，这个诶不是这最上面这吧，诶所以这块啊，你给它区分开啊，这三个给它离远点，离导论好这一块设置完了这个小标题，然后呢，我们写一点设置一点吧，来设置一下我们这个标题的一个文字啊，文字，标题的文字，我们这里边回过头来，我把这个颜色也给它去掉，这里边我们来设置标题的一个文字，那我们来看这三个文字，实际上每个里边是不是都是一样的呀？诶都是一样的，那我直接来在这写吧，嗯，在这写。

在它们这个三个的样式下边写啊，设置我们这个标题，设置我们这个div中的这个标题，直接来一个点一个content，注意啊，我能不能写点一个PL。然后来一个HR，这样我写完什么效果，这样我写完了是不是只对这个生效啊，而其他这些HR是不是也是一样的效果呀？诶所以注意啊，你写的时候不要这么写，我们怎么写呀，们直接找他那个最大的谁呀，点一个content，那这样我们这个content里边HR是不是都变了呀？诶HR设置一下它字体，字体来看一下，是诶又是这个字体没有加粗，就是一个正常的效果复制一下，然后大小是21像素，颜色是一个11719E啊11719E，直接来设置一下，来一个color井号11719E，然后字体刚才是21个像素没有加速，然后格式是这个，呃多个幺是吧，诶来我这一保存，一刷新走，你是不是这个字己就出来了，哎自就出来了啊好，字体出来以后呢，我们这来写个注，这个是我们这个颜色字体，我们就不再写注释了啊，直接写到这了，然后再往下看下边是不是我们这个。

P标签啊，P标签是这个字体同样没有加粗，就是一个正常的复制一下12个像素颜色是一个8C8C8C，这里边还是直接选中直接来什么的，点一个count来一个这个P标签，然后color是一个这个井号8C8C8C放刚才是多少呢？12个像素字体是是它保存一刷新是不是就OK了，哎，就OK了啊好，这一块我自己就给它设置完了，但是注意啊，我这设的可能会有一些小小问题，设置的什么小问题呢？诶那我们来看我这里边直接content的空格，P表示的是设置我content里边的所有的P元素啊，但家注意了，这是一个P元素，这个我是不是也得是一个P元素啊，那所以那你来看这俩的样式一不一样啊，哎，明显不一样，而你这么设置是不是对它也起作用了，哎，所以这样写这个P元素呢，不还好诶。

那你或者可以给他改一个什么呀，H3是吧，诶改个H3或者呢，我给他加一个什么呀，加个class区分一下第一个P吗？来一个P，你们都知道我要起啥名了，是不复制一下，直接来一个这个点一个哎P1，这样对我们下边那个就嘛了，就不起作用了啊，就起作用了来易刷新，哎是这么一个效果啊这么一个效果好，那这个小标题也整完了，再往下边整吧，下边是一个谁呀？诶下边是一个图片，诶图片呢，其实比较简单，我直接是不是放一个div div里边放一个图片行了呀，但是注意了，这图片还不仅仅是一个图片，图片后边是不是还有一个背景啊啊，有一个背景把这图片点没了，你发现后边是不是一个这么一个白色的一个框，这么一个背景啊，哎，所以你在设置图片之前，你需要先设置这个背景啊，设置这个背景，那来我们需要把这个背景给截下来吧，但是背景截的时候你要注意啊，这背景呢，也不简单，看见了吗？后边还有两坨这个。

黑色东西是吧？哎，这黑色就是我们背景，那后边是不是有一个阴影啊，哎，你截的时候把这个阴影也得干嘛呀，一块儿给它整下来啊，一块给它整下来，来背景跟这儿呢，然后找这阴影，阴影呢在这儿呢，离得还不是很远是吧？来我们先选中这个阴影，然后选中这个背景，这两块是不是都下来了，然后图像我们来一个这个裁切确定，诶抠下这么一个东西了，然后文件存储为web所用格式，诶直接。

存储存储这个咱们叫一个名叫一个img的一个这个BD，诶图片的一个背景直接保存，保存完了以后呢，我们来让他给他整回去，整回去我们来让他这个让他都给它都出来，还不出来是吧？完了这字又没了是吧。在这儿呢，啊好，那这一块我们这个截图已经截下来了，接下来我们来设置一个背景，那现在我们要设置图片之前，其实我应该是不是先给它设置一个背景啊，那既然要设置背景，我就得先需要找一个，找一个div，是不是专门给他设置背景啊，诶那个div说白了就是放我们图片的一个容器啊，一个容器，所以这里边我们来这儿创建这么一个div在这啊创建一个这个图片的div，创建我们一个图片的一个div，直接来一个div，点一个img，一个div，有了div里边应该放的是一个img标签吧，图片我们还没有呢，我先给它空着啊，先给它空着，然后接下来我们先给我们这个div去设置一个背景啊，设置一个背景，这来设置我们这个图片，这个div直接来一个什么呢？点一个content，下边这个img div，我们需要给它设置背景，但是注意设置背景之前实诶我们先看个背景吧，设置背景之前实际上我们应该先干一件事，先要干嘛。

啊呀，是不是应该先给我们这div设置一个大小啊，那这个大小知道多少合适啊，暂时来看其实什么呀，背景多大，是不是div率多大呀？诶所以我们先按这个背景来，背景是一个299乘以204，所以D的Y是一个299个像素，高度是一个20202的像素啊202像素好然后呢，这个背景同样不需要什么呀，诶不需要重复啊，不需要重复，然后我们一保存再来看，一刷新走你诶这个背景是不是出来了，诶背景出来了，那接下来的工作实际上就像这个背景里边是不是放一个图片啊，诶但是放图片之前呢，我们先来调整一下这个背景的一个位置啊，位置来咱们看一下这块，诶位置也好调。

他这是不是有一段儿。距离呀，哎，有这么一个距离，上边有一个距离，下边有一个距离，给它来个什么呀，上下外边距是不是行了呀？哎，上下外边距，但是注意啊，你量的时候从哪量，要从这个这个可爱的这个阴影这量啊，先跟着阴影这拖一条线，在这呢，上下阴影拖一条线，哎，那是不是就到这段距离啊，来我这来量一下啊，应该是同这。16个像素啊，16个像素下边呢，最好也16是吧，事与愿违是吧，下边给他来个十，呃十或者11都行是吧？哎，来咱们就估摸着来吧，直接给他设置一个上下外边距，设置我们这个上下外边距，直接来一个Mar丁，上边是六个像素，右右边不要诶右边0PS，然后呢，下边是一个十个像素吧，左边来一个0PX保存，然后这一刷新走，你是不是整个位置就下来了，诶下来以后呢，接下来我们要往里边去放这个图片，图片来截吧，我们这个这哥们给它整下来。

一点，诶一个一个来呗，这来一个图像，这个裁切确定是不是一个呀，文件存储为web所用格式，这个呢，就不用PG24了，因为它没有什么呀，没有透明是吧？诶看看那像这种图片我们最好用什么呀？哎，这是不是照片啊，其实最好用这个GPD是吧？诶我们来看看效果吧，这GPG啊来GIF是一个30.77GPG呢，13.51，刚才没看这个PD24。

66那也是用谁呀，GBD它是不是最小的呀，诶最小的直接，而且效果其实都是什么呀，一样的啊，都是一样的，来我这直接存储，那像这种图片其实也是有可能会发生变化吧，哎，所以这里边儿呢，我在这新建一个。文件夹叫一个pic picture，因为有可能变的啊，直接在这存一下，叫一个什么呢？这个起个名叫做一个PIC1啊PS1这是一个，然后回退。是不是接着弄他们呀，来一个一个来图像裁切，确定文件存储为。哎，也是DBG存储为这来一个PIC2，然后回退回退点着它走，你图像切确定文件。诶存储为web存格式是吧，然后我们这来点击这个存储，这来一个PIC3好三个图片都整下来了，好回到我们刚才那个界面啊回过来以后呢，然后接下来我们来调整一下这个，这里边我们来调整的时候呢，直接给它设置一个图片，这个图片我直接这是一个叫做一个pic p1，诶给他来个描述，这个描述是一个，诶小男孩保存，然后我这一刷新走，你是不是出来了，哎这小男孩还挺恶心是吧，吃吃吃耗子呢是吧，反正甭管吃啥的是吧，不管它了啊但是这个图片整完了，发现这图片的位置是是不太对啊哎，位置么下去我们需要调整一下，首先我需要它水平方向是不是得居中啊哎，水平方向居中简单，它是个图片，是个这个什么呀，内链元素直接来什么呀，来一个这个text LA text line，来一个这个center，哎，保。

嗯，一刷新是不是水平方向居中了呀？哎，水平方向居中了啊，这是我们这个设置水平居中，呃，设置我们这个水平居中，水平方向是居中了，然后我们来看，但是垂直方向干嘛了，是不是居中了，垂直方向其实也给也很简单，我直接给它来个什么呀，横高可不行是吧，这块横高可不灵了，这块我们干嘛啊，我们拿那个拍进给它往下挤啊，给它设置拍进给它往下去挤一下啊，给它往下去挤一下，所以这里边我们直接来一个什么呢？给它加一个这个上边的一个拍顶，设置一个这个上内边距，诶我是不是用这个内边距的形式给它往下挤啊，距离是多少呢？我试试啊，来一个八像素，咱们不行再调一刷新走，你稍微有点小是吧？来咱们调整到合适为止，选中我们这个div div在这儿呢，现在这个pading呢，咱们把它往下挪挪啊，现在我们来看看pading是一个八，咱们这距离需要。

加大吧，哎加加哎，12个像素是不是差不多呀，哎，那直接咱们就设置我们这A感觉有点行了，就是它了啊12个像素直接来一个这个12个像素保存，现在一刷新是不是正好集中了呀，但是注意我这么写有没有问题。

有没有问题啊。麻了，是不是整个往下挤了呀？哎，我们说了修改PA定是不是又导致我们整个可见宽变大了呀？诶所以你这拍定加了以后，我们这个害应该干嘛呀，是不是减去呀？诶那我这加了12我应该干嘛呀，减12应该变成什么呀？诶一百九啊一百九这回一刷新走，你是不是太合适啊，哎，太合适啊好，这块阴这块绿的是因为我那个阴影是透明的啊，阴影透明的好，那这个呢，我们把这个背景给它颜色给它去掉保存，那现在我这个图片就已经是不是就OK了呀？哎，OK了啊，然后再往下接着整吧，哎呀，还挺多是吧，写了半天了，诶七二边就没啥东西了啊，下边就一个P标签是吧？诶直接来一个P标签，直接往下，我们这儿呢，来整一个这个P标签，然后这个我们来一个这个P2啊P2P标签里边呢，我们来把这个文字给它整进来，文字直接给它全选中，然后CTRLL给它粘。

过来，诶就是它了啊，保存现在这个文字也过来了，那接下来的工作实际上距离已经设置好了，接下来我们只需要去调整一下这个文字的一个样式啊，文字的一个样式，那注意了，实际上这个PP标签呢，我们会发现其实它们的高度都是什么呀，是不是都是一样的呀，所以像这个PP标签其实最好我们把高度给它定下来，为什么把高度给它定下来，因为我们这个内容是不是可多可少啊，有的时候文字多，有的时候文字少，我们希望什么呀，我这个布局不会因为你这个文字多少而改变吧，哎，不会因为你这个文字多少而改变，所以这里边我们需要把这个高度给它定下来，那高度我们来看看定多少合适啊，这这块我们来量一下，就从这量吧。这是一个93，咱们取个整吧，来一个这个92个像素，哎，所以咱们把这个P元素的高度给它定下来好了，92步整啊，取个刷是吧，诶取个刷来这是设置我们这个诶class片第二个段落啊，几个双数啊，双数多多好是吧，来一个点一个count点一个这个P2 p2高度我们来一个什么呀，来一个这个92个像素，这样高度就给它定了，哎，就不会有什么变化了，高度定完了以后，我们再设置这个字体，字体我们来看看它是一个什么玩意。

选中这个字体，字体是一个这个没有加粗，大小是一个13个像素，颜色是一个三亿三亿三亿来整吧，Color井号三亿三亿三亿，然后放的是一个是一个13个像素，字体是一个，它保存我们一刷新走，你是不是就OK了呀，诶这块文字我们就给它整的就OK了啊文字这块OK了，然后最后还有一个可算做到这儿了是吧，哎可算做到这儿了，最后一个了，我们还有一个这个可爱的这个按钮，按钮要做呢，就比较简单了，按钮我们直接是不是给它整个button天也行，其实这也可以整一什么呀，整个超链接是不是也行啊，诶最省事的其实还是整一个超链接啊，整个超链接，所以在最下边这我们来创建一个超链接，来一个A标签，直接来一个井号超链接，里面有个文字叫什么呀，叫做一个是不是乐月末啊诶。

乐末，我把这个文字呢，给它复制过来，乐末诶粘过来，然后给他来一个class，来一个这个LM吧，这么一个超链接啊来这一刷新走，你超链接是不是过来了，但是超链接的样式呢，不对，我们需要把这个东西是不是设置为我们这个超链接的一个背景啊，诶所以我们需要截一下这个图，那注意啊，截图的时候我们这个什么呀，文字我要不要截呀，文字我要，因为文字我有可能干嘛呀，有可能换啊，有可能换诶所以这个文字呢，我给它去掉，直接找它这个按钮，但是这箭头我们得要是吧，箭头你就不用打了，箭头得要着这一点呢，完了这还仨是吧，诶这是一个，然后呢，这个阴影，诶阴影挺近是吧，跟这儿呢，然后呢，这箭头也是一个。

在这儿呢是吧，应该是。不是，他是这三个吧，诶来一个个点，先留一个箭头，然后来一个阴影，诶不是这个阴影的，这是阴影，这是阴影吧，好好，现在我们这哥仨就凑齐了，然后直接来一个图像裁切确定啊，这个万恶的美工是吧，哎，来一个文件，我们来一个图存储为web存用格式，这个没得选了，透明有就得用PNG24 PNG24直接来一个存储，往上存一个，这是一个按钮，咱们叫一个B填B填一吧，第一个按钮，因为以后可能有其他的按钮，好按钮有了往回走一个。

哎呀，可算做到这了是吧？这图现在暂时就不用切了是吧？暂时不用切了，来给A设置我们这个背景，设置我们这个最后的一个什么呀？诶，设置我们这个按钮的一个样式啊，按钮的一个样式直接来一个点一个content的，我们下边的一个叫做一个勒目啊LM这边直接给它来一个background，直接就background来一个URLURL，我们这是B填一大小163乘以40，这个应该正好是谁，是不是正好是我们这个A的大小啊Y一个163个像素宽度一个什么呀，40个像素又带来这个问题，我得干嘛？哎，是不是把它转换成这个快元素哎，Displaylo这个背景同样no repeat，诶不需要去重复一保存，现在来看一刷新，这按钮是不是出来了，按钮出来了，但是这个文字的样式还不对，首先呢，我们来设置下样式最明显的，我们先来一个text direction。

对，是不是把下线给它去掉啊，下文线去掉，我们再看这个文字的一个样式，选中这个文字看看吧，是这么一个字体，没有加粗，像素是12，颜色是一个0163个九啊，0163个九，直接我这来设置一个这个color color井号0163个九，然后字体是一个12个像素，然后是这个格式保存再一刷新走，你是不是OK啊，但是位置呢，还不太对，我们需要把它往下往下挪吧，哎，往下挪那是不是让他在这按钮里边居中啊，哎，那怎么居中啊，是不是航高啊，航高是不是设置跟那个元素高一样啊？哎，那我直接在这来一个40个像素，这还记得吧，在自己这可以斜盖后边跟着一个航高啊，跟着一行高一保存一刷新是不是垂直居中了呀？诶，然后水平呢。

水平还不能居中是吧？哎，水平它是往里缩进了一点啊，哎缩进了一点用的用了个什么呀？哎，我们叫做太的一个in嫩的是不是手行缩进啊，这里边来一个E，诶是不是缩缩进一个字是吧？诶缩进一个字，我们来看效果一刷新。正合适是吧，正合适你们比我还凑合是吧，好啊好，那现在呢，我们整个这个东西就给它整个都做完了啊，然后这里边我们再看看它还有没有什么，有没有什么问题啊，有什么问题来，那我们给这个content啊，还是把这个背景颜色，我还是给它设置回来，我们看看count现在是多大个保存，现在我这一刷新，诶现在整个content是不是这么大个呀，你就说content整个到地是不是结束了呀，但是注意了，你来看我这图里边是不是康的下边这是不是应该还有一段距离啊，但是这段距离在我们这块是不是没有。

是不是没有去体现出来啊，哎，没有体现出来啊，这段距离并没有出来啊，并没有出来，那我现在希望这距离给他整出来怎么办？哎，是不是可以给我们这个，哎是不是可以给他加一个外边距啊，哎加一个外边距，那比如说给谁加，咱们看看，哎其实给我这个按钮加是不是行啊，哎给按钮加下边加一块玩具，那我们来看看这块加多少合适啊，来找到这个边界是不是阴影边上啊，哎找到这哥们，这哥们。走走走不着了，点错了是吧？走你是不是这条线呀？诶，然后拖一条辅助线出来，这是它的一个边缘，那我们来量一下这个距离，这个距离应该是从这儿到这应该是一个35个像素，所以这里边我们给这个按钮加一个这个margin bottom啊margin bottom margin bottom来一个35个像素保存，这一刷新走你是不是整个就冲开了呀？哎，那现在待会我们下边再写那个栏的时候，就不用再去考虑这段距离，我是不是直接考虑下边距离行了呀？哎，这边距离行了啊好，可算是写完了是吧？来，我把这个背景颜色给它去掉，这就没用了啊，这就没用保存，现在一刷新是不是就OK了呀？诶，OK了啊，你们挺累的是吧？来啊，这里边我把这个注释啊补一下，刚才没写注释啊，这是我们这个设置我们这个块元素啊，设置块元素，这是设置我们这个宽和高，设置我们这个宽和高啊，注意啊这一块现在我们就是讲课。

这么写注释，你开发的时候呢，不用这么写啊，开发始不用这么写，这么写人家可能会以为你有病是吧？哎，不用这么写，太细致了也不好啊，太细致吧，这是设置我们这个背景，这儿呢是设置我们的一个什么呀，诶下划线看这呢，我们这个文字啊，设置我们的文字，最后呢是我们这个，这是一个什么呀，手环缩紧啊，设置我们这个文字一个缩紧，然后呢，最后这个是设置我们一个下外边距啊设置我们一个下外边距，保存好可算是整完了是吧？整个这个呢，就给它整完了，那接下来工作就简单了，我只写了什么呀？我是不是只写了一个呀，刚才我们说了，其实那两个是不是都是一模样的，哎，待会复制一下，是不是改个内容就行了，哎，所以这个事呢，这个事没什么技术含量是吧，来我从这复制了，因为标题刚才咱们已经写上了，直接从这个批。

开始复制，直接走走保存，这一刷新，诶，是不是都出来了，诶接下来我们来去调整这个内容，内容呢，首先我们来整这个小标题啊，小标题找找吧。第二个。给他，所以这可别粘错了是吧，瞅着点，所以你们写的时候也是这样，自己跟自己聊会天是吧？诶时刻提醒自己啊，你要你是最棒的是吧，你是最棒的好，这写完了啊，然后再往下边写啊，来保存啊，已刷新文字就改完了啊，然后来设置这个图片，图片呢我们来看这有两个，还有两个图片，一个是我们的PS2，还有一个我们PSIC3，这来一个这个pic在这PIC2 pic2是个小姑娘，你还不说花姑娘是吧，嗯，小女孩，然后呢，我们这来一个这个PS sa3 PS3是个是个是个大绿球，大绿球。

保存现在我这一刷新走你，诶图片是不是都过来了，哎，都过来，然后还有我们下边这个段落这文字也给它整上啊，也整过来，下边那个段落文字呢，直接给它选中，然后呢。

给它粘过来，再往下边还有一个CTRLC。给它粘过来保存好，一刷新是不是就就都OK了呀，诶就都OK了啊，但是这一块呢，你会发现这段文字呢，明显比我们这个图里是不是少了一行是吧，这里边是五行，我这是什么呀，四行是吧？哎四行，但是你这么写其实也行，没关系，因为我们高度给他干嘛了，给他定了，哎如果你非要跟那个一样，但是这里边注意啊，没必要跟他一样，因为这个文字，其实你看它这文字乱七八糟，这这这是英语吗？这都不是英语啊，这都不是英语，这是干嘛的，你看都是奇奇奇怪怪的，什么大写字母，各种各样的字母都有，这是专门测试什么呀，我们一个打印效果的这么一个东西啊，所有这种什呀，一报纸的排版一般都用这种文字啊，用这种文字，所以这东西呢，我们都不用管它，但是如果你非得要管的话，你希望让它干嘛呀，它没有那么紧，你是不是需要它松一点啊，那怎么办呀？哎，是不是我们这个单词间的一个距离啊，叫做一什么呀？哎是是word space啊，哎，Word space是吧？哎，Word一个space，哎比如说来什么来一个。

两个像素让它大一点，你刷新投你是这样能好一点啊，但是这个东西调不调都无所谓啊，调不调都无所谓，你写上也OK，因为我们高度已经给他写死了啊，高度已经写死了，好，那整个呢，这一块我们就给它写完了，来咱们看看这个兼容的问题啊，易刷新走你。是不就OK了呀，啊OK了啊来这一块218218呢，没问题，来看我们这216是不是也OK，哎呦呵，没问题啊看差哎没问题啊好，咱们就给它洗完了啊，先停一下吧。