99.尚硅谷_HTML&CSS基础_页面练习-联系栏右侧.avi原创

刚才我们这写这页面的时候，其实我会发现一个问题，就是我发现这个东西怎么对，是不是都对不齐啊，诶creamome对齐了，火狐不齐，火狐对齐了，其他都不齐了，对吧？诶那我们来说这个问题在哪呢？那其实呢，这东西属于就是我属于自己给自己挖了一个坑，然后自己往里跳的是吧？为什么呢？因为开始一上来我们就说了问题在哪啊，行高对吧？行高，可是我是不是都统一行高了呀，为什么还出现这问题呀，那原因就是什么呀？哎落一个没统一，哎落一个没统一，刚才我统一的时候，我记着什么呀，我记着我把段落的已经干嘛了呀，已经统一了，哎但是实际上段落干嘛呀，我压根就没设置啊，压根儿就没设置，所以我们这个P标签里的这航高在不同浏览器干嘛呀还是不一样的，所以会导致什么呀，我在火狐里对齐了，在里干嘛呀没对齐，而我刚才干嘛呀，刚才我一直想着我这行高我已经处理了，干嘛我就不去看这问题了，我一直想着我已经改行高，我已经改行高了就不去考这问题了，结果干嘛了，这问题总是解决不了。所以注意啊，你再。

考虑一个问题的时候干嘛呀，等你把所有的可能性都排除了，那剩下的就是什么呀，剩下的就是，那你觉得不可能那个哎，我觉得不可能是行高问题，但是恰恰我就落了一个行高，哪个行高呢来看。横高我设置了吗？哎，没有设置，所以这一块又导致它用的是一个默认横高，于是才导致出了一个样式的一个差异，所以这一块来个斜杠一我这一保存，咱们再来看一刷新走，你整个火狐是不是上去了，诶上去了再看我们CH1刷新是不是也上去了，诶再看我们这IE全部刷新，哎，是不是都上去了，诶这回上去我们就高兴了是吧？上去以后接下来我们就可以去调整了，诶所以注意啊，行高诶。来，我们把这个呢拍掉，还是往下给他调啊，还是往下给调，现在是22来调一点。调到一个这是一个这个，诶我是不是不应该调这个拍顶可以调拍ing是吧，调一个29个像素，这是不就OK了呀？哎，29像素啊，30不就出去了吗？30啊，听你们的30就30是吧，保存刷新哎这块是不是OK了呀，然后再看我们这个chome是不是一刷新是不是也齐了呀，哎，也齐了啊，再看我们这个IEIE6，咱们先不理他，现在我们IE8IE8是不是也OK了呀？哎，唯独有一个不齐的是谁呀？哎，是我们这个艾叶艾叶六艾叶六我们来看，我感觉这段距离好像稍微的有点，这段距离是不点大呀。

有点远呀，就是距离我是不是改成了19了，开始我量的是15吧，虽然这这是距离，实际上是有点有点大，咱们调小一点，给它减去四，然后给它加上一个四，这个位置应该是什么呀？一样的对吧，一样的这样距离小一点能好看一点，那好，那这块我们调整完了，然后还是看我们IE6的问题，IE6的问题还是IE6是不是有点偏，偏上了呀，诶偏上了，那我可以干嘛呀，我是不是可以让他这个marin大一点啊，Margin我这设置的本来是一个15，来我这复制一个慢成top，我来什么呢？来一个，呃，我想想啊，20吧，20我试试，我这一刷新走你。

20呢有点大，来一个19这块IE6啊，只能这么玩了，IE6只能这么一点点测了啊这一刷新。可以是吧，哎，可以啊，你们要觉得18好，那就18他们好商量啊，来一刷新走，你有齐了是吧，让人注意啊，人眼睛是有些什么呀，有些人错觉了是吧，有些错觉了，你觉得齐了他就齐了啊，你觉得齐了就齐了，又上去了是吧，你们自己上去是吧，我们就用18了啊，咱们就18了，好但是注意了，这个18我们对于谁设置了，是不是只对于I6设置的呀，而对于其他浏览器我需不需要不需要，所以干嘛？诶加上一个下划线啊，这个是设我们这个设置我们这个上，哎外边距这个呢，是设置我们那什么呀，哎，为我们这个艾叶六设置我们这个上位边距啊，这一保存，现在一看一刷新火狐cru，那来看我们这个IE全部刷新走，你IE6IE8是不是都没问题了。

诶这一块就都OK了啊，这按钮呢，基本上也是什么呀，就齐了，按钮现在不用管了，按钮如果待会儿再不齐，我们还有别的招啊，还有别的招，现在呢，这个整个这个左边的栏就给它整完了啊，左边的就整完了，左边呢整完了，接下来我们再对付谁呢？对付我们这个。右边啊，一口气我给他写完就完事了，右边其实比较简单，右边什么玩意儿啊。标题对吧？诶一个标题，一个标题下边是不是有三段文字呀，三段文字用什么呀？哎，是不是有三个PR就完了，然后最后就是放一个按钮啊，诶最后放一个按钮，所以就是三一个标题，然后三个P标签，最后放一个按钮啊放一个按钮，所以呢，来我们先来设置一下这个结构，我把这个标题呢复制一下，找到我们最后一栏nu这栏，复制一个H2 h2，然后呢，我们来选中这个文字，文字叫做一个new，一个updates ctrl c，然后呢，CTRLV给它粘过来保存文字，这时候过来了，诶这个标题就过来了，标题过来以后呢，下边是三个段落，三个段落呢，还不仅仅是文字，我这个三个段落里边是不是还有这个图片啊，诶图片，所以这里边呢，每一个段落里我给它放一个省点式了，直接放一个img标签啊，M标MG标签，把这个几个图片呢，也是已经切好了，诶这么1233个图片，CTRLC我给它。

放到我这个pic里边吧，因为他也可能会变的直接，第一个是我们这个11.1个这个GF火狐这个图标对吧，然后我这复制一下啊复制一下。走走，第二个是一个2.gif，第三个是一个3.gif保存这一刷新三个图片是不是过来了，诶图片虽然过来了，然后我们还要需要整谁啊，哎，整我们这个文字来把这文字都给它复制过来，咱们这样先把我这个按钮给它按上按钮呢，最后来一个这个表达也不用写了，直接在最后放一个button完事，这一刷新模拟按钮是不是也过来了，哎，待会咱们调整位置啊，来复刚才咱们的文字，咱们再说吧，把这个文字呢复制一下啊，CTRLC按钮上的文字刚才我好像一直没改是吧，好像文字它是它是不一样的。这是我们说的这一段文字，给它粘过来，然后呢，再来看我们这个这段文字，CTRLC你给它粘过来。

保存现在呢，我们这一刷新走你诶是文字都过来了，诶当然这个效果呢。效果很很很好看是吧，很好看，咱们来一点点设置啊，一点点设置首先来看第一个问题，我这文字，你看我这文字跟我这图片什么关系，是是并列去了是吧？哎，这换行去了对吧？那我们希望的是什么呀？我们希望的是这个文字是不是能环绕这个图片啊哎，我希望文字能环绕图片，那怎么办？哎，我说让这个图片浮动啊，诶让我们这个图片浮动，所以这里边我们来设置我们这个右侧这个设我们这个联系栏的一个右侧，右侧直接来一个门点一个这个叫做一个叫啥来着，Nu是吧？诶nu下边的这个什么呀？Img，诶nu下边的MG我让它干嘛呀？Float来一个哎，Left向左浮动啊，那我们说了文字是不是会自动围绕这个浮动元素啊，诶，所以设置它一个什么呢？设置我们这个，诶向左浮动，然后这一保存，再来一刷新走你。

是不是就过去了啊，就过去了，现在的效果不一样，是因为我们这个文字的什么呀，大小不对啊，文字大小不对，所以这里边我们来设置一下我们这个文字的一个设置，我们这个段落一个大小，直接点一个nu下边这个P元素，P元素来看一下这字体是这个字体没有加粗，大小是12个像素，颜色是三个四啊颜色是三个四，直接来一个这个color，来一个井号三个四，然后来一个这个放没有加粗，刚才是12个像素，还是把这个横高给他写上，然后我们这个字体，然后一保存走你不就OK了呀，OK了，但是很恶心是吧？哎，还是那个问题，还是因为什么呀，我们这里边我有没有给这个P元素固定高度啊，没有固定高度，而我们这个浮动元素在我们这个文档里是不是不不不占位置啊，所以下边元素是不是自动就上来了，哎上来了，所以我们还应该给我们这个P元素整个是不是定一个高度啊，哎，那高度设置多少合适啊，哎是不是应该和我们图片。

一边高形了呀，哎，你看我整个P元素实际上是不是相当于这么大个啊，哎，所以图片多高我们让什么呀，P元素就多高形了，图片多高呢，我们来看看。打开左在目录1.gf图片是一个58，诶58，所以咱们干嘛呢？我让我这个P元素也来什么呀，高度来一个这个五十二八个像素一保存这儿一刷新走，你是不是就下来了，哎，就下来了啊好，那这一块我们给它设置完了，然后再看我们还需要动什么，其实要动的东西还挺多呢，首先呢边块吧，哎这边块给谁合适啊，是不是给我们这个P标签设置一个这个下边框行了呀，哎设置一个下边框，所以这里边呢，来一个这个咱们上边给那个H h2是不是设置过一样的呀，叫做一个这个border bottom来CTRLC直接复制了一粘，诶不是MG，是我们这个P标签一保存这一刷新走，你是不是边框就有了呀？诶下边框有了，然后再看这边框有点离的是不是太近了呀，哎，太近了，那我们来看我们这个元素之间，它们是不是有这么。

一个距离啊，哎，有这个距离，那我们来说这个距离呢，怎么来指定它，其实它有两个距离，你要注你要注意啊，这有一个距离，是不是这有一个距离啊，那这两个距离又怎么指定，上面这是什么？上面这是什么，上面是不是外边距啊，哎，这段距离啊，这段距离。是外边距啊，哎，是不是给我们这个上边的元素，给它P元素指定一个这个下的外边距是不是下来了，哎，下外边距啊，所以我们来看看这外面距是多少，是一个14个像素啊，14像素，所以这里边呢，我们来一个这个Mar bottom Mar bottom来个14个像素，然后一保存一刷新走，你是不是往下挤了呀，哎，往下挤了，但是你发现什么呀，我这边框和我这图片是不是贴的比较紧呀，还差一个什么呀？哎，是不是一个下内边距啊哎，内边距我们来看设置多少内边距呢？量的是图片和这个边框之间一个距离，这边距离呢，多一个像素是吧。

这是一个九个像素是吧？诶九个像素我们先设置上，待我们调啊这来一个这个下，诶内面具来一个这个拍定bottom，刚才是九个像素啊，九个像素保存这一刷新走你。哎。好像正合适是吧，诶正合适我们来看效果啊，这里边我们来看看其他浏览器，我这一刷新诶是不是也齐了呀，诶咱人都齐了是吧？来我这一刷新一就一不小心这个什么呀，成功来的太突然了是吧？诶完了就说得有一个给你扯后腿的是吧？哎来218呢，I8也急了对吧，但是216呢。

诶又不齐了，也就是说我们这个整个这个高度，实际上可能对于I16来说是不是有点有点小啊，哎，就是说谁的高度是我们这个P元素的高度啊，我们现在是58，我们来看看I16多少合适啊，我来一个这个59同意啊，你这加一个像一个像素，由于我是什么呀，三个P元素，所以加一个相加三个呀，诶加三个啊，我这一保存，咱们来一刷新走你。差不多是吧，大再大一有点大了是吧，60。诶60也差不多是吧，那你们也没什么，你们也没什么这个底线是吧，那咱们就60吧，我觉得60也好是吧，当然这个样式还是单独给谁设置啊，哎，给艾E6设置加一个下划线，所以这里边单独单独为我们这个艾叶六干嘛呢？设置一个这个高度啊，单独为我们这个艾叶六设这么一个高度，好那这一块我们就给它设置完了，但是这个按钮呢，这个距离稍微的还有点是不点远呀，有点远啊，我们来调整一下，诶等会的还有一个问题，这图片是不是离这个字是不是有点近啊，诶图片离这个字有点近，那所以这里边我们需要让这个图片和这个字的距离干嘛呀，是是远一点啊哎，图片和字的距离远一点，那实际上就是什么呀，它们之间是不是有这么一个距离呀，哎，距离诶可以给给他干嘛呀，给他来一个这个图片，来一个右右边距是不是行了呀？哎过边距应该是一个八个像素啊，八个像素所以给我们。

这图片来一个这个in right，诶来一个这个marin right来一个这个八个像素保存，这回一刷新走你是不是就OK了呀？诶接下来我们来调整一下这按钮的位置按钮我们来选中这个按钮，按钮呢，现在我们来看它的位置，按钮的位置呢，现在是一个marin，是一个11个像素是吧？我要把它调成一边齐给他。

我这一调还是不是都调了呀，所以我单独得给它什么呀，我是不是单独的给给给这个去设置啊，哎，单独给这个设置啊，来我们来找到这个元素，这个是一个我们叫做一个按钮，找到我们这按钮啊，直接来一个nu下边的一个点一个什么呀，点一个这个BTBTN，然后我这来一个margin top，我来一个零的像素，我们来调整一下它的大小，这一刷新。丑不要脸间正好是吧，大家正好呢，我们来看看啊，我这个我是不是给他指定一个下个半距啊，稍微的还有点有点低啊有点低，那咱们这样那这样我可以我想想啊，那咱们其实我不用给B填指令，我把上边那个给它，实际上我最后一个P标签有没有有没有必要加这个下巴边距了，因为我们按钮是不是有一个边距了呀，所以最后一个标签就没有必要这个边距了，所以我干脆干嘛呀，我把最后一个这个外边距给它去掉是不是行了呀，哎，给它去掉行了啊，所以这里边我们来给它去掉，那但是呢，最后一个还得给它来一个class，诶class来一个no marin ctrl c，我们这来一个叫做一个这个点一个nu，下边一个这个no marin，我们直接来一个这个marin，一个bottom，来一个零的像素，然后一刷新走。

你。齐了是吧，哎，来这一刷新是不是齐了，怎么看怎么不齐是吧？来量一下啊量一下这这咱这这这量的它也是一个。太齐了是吧？哎，太齐了啊，来这一刷新这基没问题了，这这很完美是吧，全部刷新，哎一六都齐了，这个是不是这也齐了呀，哎，都齐了啊，都齐了就OK了啊，这个东西咱们说一下啊，要是这么整完了还不齐怎么办？定位啊，最后要还不齐，我们只能给它开启一个什么呀定位，定位肯定是齐的了啊，定位就没问题了，相对于什么呀，用让我们这个按钮相对于我们当前这个div去定位，定到那个指定位置，那这样一定是什么，一定是齐的，因为我们这三个div是一边大的啊，三个div我们给它整成一边大就OK了啊。

好，那这一块我们这个东西中间这个底部这个联系栏给弄完了，然后再看有什么问题我们需要处理一下啊，首先呢，刚才有一个问题，我们一直忽略了按钮上的文字，实际上这三按钮的文字呢，它说不一样啊，哎，它不一样，所以我们这块需要先调整一下我们这个按钮一个文字，第一个是我们这个叫做一个subscript来给它粘过来。这个，然后最后一个是叫做一个visited visit our blog ctrl c。CTRLV保存可以刷新，诶这是不是就没问题了呀，诶文字效果也也就给它统一了啊，文字效果就给它统一了，好，那这一块是我们说的这个里边这个联系栏就算给它完成了啊完成了来我们这来停一下。