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

来呢，我们把我们联系栏这个中间这部分完成了，那接下来呢，我们来做这个左边这部分啊，左边这部分当然做之前呢，我们先看一个问题啊，先看一下问题，那现在刚才我们测试这个文本框的时候，实际上我们去输入这个在火狐里，其实这是好使的是吧？哎，好使的，但是我们发我们来看看啊，其实在IE6里边，刚才我发现一个问题，我这一刷新啊，看我们这个先看看IE8有没有这个问题吧，IE8我这书IE8没有问题，挺好的，对吧，但是我们来看看216啊I16，我这一刷新还有。哎，这很有意思是吧，这背景我这框是不是跑了呀，那按理说我应该无论我怎么输，我这个框是不是应该还在这啊，哎，现在你看它是很有意思的一个，诶升国旗一样是吧，这框是一直一直往上跑呢呀，哎，一直往上跑的啊，这个效果是我们不需要要的，但是在其他浏览器里实际上都没有问题，只有在我们这个IE6里，那我们来说这个问题我们要怎么去解决呀，那这个问题。

怎么去解决这个问题啊，我们先想想为什么会出现这个问题啊，哎，那出现这个问题的其实原因比较简单，那你看这IE6是不是让我们这个背景图片随着我们这个元素一起滚动了呀，诶随着我们元素一起滚动了，而其他元，而其他浏览器嘛呀，它没有这个它干嘛呀，它是不是自然而然就不动了，哎，不动，而在我们IE6里，它这什么呀，背景图片随着我们这个元素一块滚动了，那么说我们让不让它滚啊，不让他滚那怎么办？哎，是不是设了一个那个background，那个attachment的呀？哎，Attachment比如说我们拿这个T子attachment应该设成设置成什么呀，设成一个叫做一个是不是fix的呀，哎，Fixed我直接在这一写是不是就固定了，哎，不随它去滚动了，但是这个设置完了，我先看行不行啊，我这一刷新，这是我们IE6我这一输。

完美是吧，诶完美，但是呢，来看其他浏览器，我这一刷新走你呦，没了是不是，哎没了，那我们说什么呀，我们说当你设置了这个fix以后，我们的这个元素它默认干嘛了，默认是不是相对于这个浏览器窗口进行定位了呀，而我们这个默认值是不是一个top left呀，所以这个框应该默这背景应该跑哪去了，是不是应该跑这儿去呀，啊应该跑这，但是由于这块盖住了它，现在我们这是看不着啊，出来我们元素，所以这块是看不着的啊，所以这里边注意，那这个费我们发现一个问题，在IE6里是好使的，但是其他浏览器里能不能这么设置，其他这么浏览器这么设置不是出问题了，诶那我给你提出来，我怎么设置呢？来一个background，一个他这么的来一个fix，这跟刚才那么写是不是一样的呀，哎，一样的来看效果216。I6是不是好使啊，诶I6是好使的，但是注意了，那我这么写其实还没区别，在其他浏览器里边还没有啊，那怎么办？哎，我是不是希望这个样式只有IE6认识啊，哎，就说这个样式我是单独给IE6设置的，也就是说我希望只有IE6能识别，所以来什么呀，我们那个就那个hi呀，哎hi，所以这里边单独为我们这个I6设置一个，哎设置一个什么呢？哎，背景不随我们这个滚动，哎不随元素滚动啊，不随元素滚动保存这块一刷新，看我们IE61刷新。

没有问题吧，哎没有问题，IE8呢，诶IE8本来就没有问题，而且那钥匙对它部位起任何作用，哎是不是也没有影响啊，哎没有影响啊，哎，那这是一个还有谁啊，是不是还有我们这个T瑞也也整这么一个，哎所以这里边呢，最后也给它加这么一个啊跟这放在一块，这样就OK了啊这样OK了啊所以这个问题我们单独设置一个，通过这么一个hi啊来解决这个问题，好，那这块我们说完了，然后接下来来看我们这个左边，左边这部分呢，哎是我们说，哎是怎们呦呵，这是是是我们这个这一块这部分啊，是我们整个这块部分这一块，我们先来看上边整个是一个什么呀，是一个这个标题，其实和我这个格式是什么呀，是不是一模一样的呀，哎，这会直接来一个H h2是不是行了呀，诶H2行了啊，来我们来先写我们这个结构，直接来这么一个这个H2在这写一个。

H2H2，然后把文字给它复制过来，文字叫做一个，它复制一下。CTRLC，然后我们粘贴过来保存这一刷新走你诶这个文字是不是过来了，诶我们强制刷新一下啊好，文字过来以后呢，再往下走，这个HR标题我们设置好了，再往下边呢，是我们说的这么一个，诶这么一段文字，诶什么乱七八糟，这应该是一个什么呀，是不是直接整一个PR就行了呀，而且我们这里边注意它这个玩意是不是有两个呀，诶那我们来看这两个干嘛的，是不是一样的呀，那既然是一样的，那我们干脆给他是不是统一设置就行了呀，诶设置就行了啊，所以这里边我们来一个P标签，这是设置我们第一个设置我们这个段落，来设置我们这个段落，直接来一个P标签，给它来一个class们叫一个这个P1啊C p1，然后我们来选中这个文字，CTRLC，选中这个文字保存这一刷新这个在这儿呢，一刷新这个段落是就过来了，诶段落过来了，但是明显这个格式其实还还不对。

啊，格式还不对，我们来看一下这个字体，字体是一个这个字体。12个像素颜色呢，是一个，诶又是这个，诶三个四啊三个四来我们这儿来设置一下我们这个样式，咱们在呢，下边来设置吧，我们这个是一个这个注意了，这个P标签其实是不是只有我们左侧有了呀，所以我们没没必要再通过contact选择了，直接什么呀，通过我们那个SC是不是选择呀，诶通过我们SC啊，所以这里边这是设置我们那个左侧设置我们这个联系栏左侧直接来一个点一个SC下边的一个P1啊P1我们来一个color color是一个井号三个四，然后放刚才看了是一个。

12个像素啊，12个像素，然后是这个字体没有一个没有加粗啊，没有加粗，然后我们这来看一刷新走，你这时候就过来了，诶这一块过来以后呢，然后再看它这个距离应该也是正合式的，但是实际上它跟我们这图里边的它有点不太一样，我们这个图里边这个文字吧，其实你如果仔细看的话，它有点什么呀，它比这边是不是要高一点啊，诶它稍微有点往上提了一点啊，提了一点，但是差距呢不是很大，所以这个距离呢，我们就先不管它了啊，不管它，待会我们在下边给它找一下啊，给它弄一调整一下啊，这块我们先给它放着啊好，那这一块是我们说的这一个段落，段落我们就设置完了，然后再往段落下边是一组什么呀，是一组小图标吧，诶小图标，那这组小图标呢，都是一些什么呀，一些社交的一些工具是吧？这什么Facebook呀，什么诶YouTube啊，什么Twitter是吧，还有一个RSS这些订阅一些小图标，那这些小图标实际上都应该是，是不是都应该是超链接呀，哎，都应该是超链接，所以呢，那。

实际上最简单的方式干嘛呀，我直接在这整个放一个这个div啊，放这么一个div，然后在div里放几个什么呀，五个超链接，然后呢，每个超链接里实际上最简单的放一个图片是不是OK了呀？诶放一个图片就OK了啊，所以这里边我们来一个来直接在下边我们来放置我们这个小图标，这个div，哎，设我们这个小图，诶小图标的一个div，直接来一个div，点一个icon啊我们这个小图标，然后这里边我们需要放五个五个超链接吧，哎，五个超链接，然后井号，然后这里边来什么呢？IG标签，我们需要放置这么一个图片啊，在我们超链接里需要直接放置这么一个图片，来一个s RC out们先不管它了，那图片就来问题了，我是不是得需要去切这个图片啊，哎，切这个图片啊，那这图片呢，同样我已经给它切好了123。

四五是五张图片啊，诶五张图片CTRLC我直接给它粘过来，但是这个图片我们切的时候我们要注意一点啊，注意什么问题，注意了，那这个图片可能同学一想，这图片切的还不简单嘛，我直接一选中它，然后out一点是不是剩它一个了，然后我们来一个哎图像我们来一个裁切，然后确定文件是不是存储为就行了呀，诶这是一什么呀，57乘以57吧，哎，注意啊，我们主要看大小，这是一个57乘以57的，我不保存啊，我回过去第二个就不一样了吧，第二我们来看一下啊，第二个我们来一个图像，来一个这个裁切，然后确定文件存储为we部存格式，我们来看一下第二变成多少了，56是不是乘以56呀，所以这个小图片你注意你这么截的时候，你会发现什么呀，截完了以后，这五个图片大小都不一样，那大小不一样就给你带来一个问题，你这页面里直接引出。

图片的时候你大小不一样，你这布局是不是有可能有高有低啊，有高低就变得很很难看，所以这个图呢，我们就不要这么切了啊，不要这么切了，怎么切呀，还是我们传统方式套圈啊，套圈干嘛呀，你就拿一个统一拿一个大小的一个像素给他干嘛呀，套起来，这样你可以干嘛呀，你可以确保每一个都是一样大的，你可以取往每一个都是一样大的，所以这个就不要用那种方式了，还是用我们这个矩形选择框啊去切啊去切，那所以这里边我切的这个图呢，实际上都是一边大的，都是以什么呀？哎，54乘以54，我们来看看，这是一个54乘以54。是不是都是54乘以54，哎，这样我们整的时候就好整一点了啊好整一点好，那这个是小图标，然后我们就来引入图片，我们来看一下顺序啊，第一个是我们这个这个图片，这个是一个我们这个RSS订阅这个图片啊，所以直直接来一个诶2SS，然后呢，我们需要2345个片啊，五个图片一刷新是这么一个效果呀，哎，这么一个效果，但是呢，这里边这五个图片肯定是不对的啊，肯定是不对的，我们需要把这些调整一下五个图片呢。

来这里边我们来看看第二个图片应该是谁呀，第二个图片是不是应该是我们这个Facebook呀，诶Facebook我们这个是一个这个FFB，第三个图片是一个叫做in啊，In就叫in，然后第四个是一个YouTube b啊应该叫YT，第四第五个是一个这个Twitter叫一个TTW保存，现在我们来看一下这图片，诶五个图片是不是都过来了，哎，图片显示挺好诶这距离好像也也还合适是吧？哎，也还合适，我们来看一下效果啊，看一下我们这个chome，哎呦，CH这个距离数有点有点大了，哎，有点大了啊来看一下我们这个IEIE6IE8全部刷新，诶他们这个距离呢，还行，其实唯独有一个这个CH，这个距离是是比较大一点啊，诶那为什么距离比较大呀，还是因为我们显示的字体的一个什么呀，区别，诶显示自己的区别，现在我们这一块A是个内链素吧。

所以它之间这个距离是哪来的呀，是不是之间这个空格出来的呀，哎空格出来的，我这一保存，现在来看这两个距离是不是就没了呀？哎，看我们的CH这两个距离是不是也没了呀，而我们说什么呢？不同的浏览器对这个空格的设置效果不一样，所以导致了我们这个什么呀，显示的大小不一呀，所以这里边我们最好还是什么呀，是不是通过我们这个统一的一个外边距来设置啊，诶，那我要通过统一的外边距来设置，就意味着我需需要先得干嘛呀，我是不是先得把这个空格给它去掉啊，哎，空格给它去掉，那这空格怎么去啊？你可以让我们这个五个A元素都干嘛，是不是都动啊？哎，让五个A元素都浮动，一浮动以后，他们变成快元素，然后它们会干嘛呀，会紧紧的是不是贴到一起啊，中间这空格就自动给它忽略了，那或者还可以怎么办，那现在实际上这空格实际上就相当于什么呀，相当于我们这个div里边的一个什么呀，文字一个空格的大小就相当于我div里边一个什么呀。

哎，一个文字大小，那我这一想，我要不想要这个空格怎么办？哎，来我们来点一个这个什么呀，我们有一个这个div叫一个icon，我直接来什么呢？来一个这个放size，放size我来什么呢？来一个这个零我干嘛了，我是不是让这个div大小变成零啊，诶大字体变成零了，我们来看一刷新。空格是不是也没了呀？哎，空格也没了啊，我这一刷新是不是空格也没了呀？哎，空格这样就都没了啊，也就是说让它字体变成零以后，空格自然大小也就没了，哎当然你也可以干嘛呀，你也可以让它浮动，但是浮动以后呢，你还要想着给什么呀，给这个div去清除浮动啊，清除浮动我就采用这么一种方式啊，给它自己设置成零，好，这是设置我们这个字体为大小，设置字体大小为零，可以去除什么的，去除我们这个空格，空格去除完了，然后呢，这是我们这个SC下边这son啊，空格去除完了，然后这距离是不是有点太近了呀？诶所以接下来我们要调整他们之间一个距离吧，诶那调整怎么办？我是不是给他们设置一个margin啊？诶给谁设置。

是不是A设置，哎，我给A设置一个marin right是不行了，哎给每一个A都设置一个marin right来这里边来设置叫做点一个这个下边这个，点这个icon下边这个，诶我们这来一个marin right marin right来什么呢？来一个四个像素吧，我们试试。哎，设置我们这个小图标，设置我们这个小图，小图标保存啊，放在这儿吧，这两个都是啊，属于设置小图标的保存，我们来看效果一刷新，诶，这距离是不是还可以是吧？哎，还可以啊，来看看我们这个CHOME1刷新也没啥问题，然后看我们这个IEIE6全部刷新，IE6没问题，IE8呢也OK，距离可以吗？感觉我们看看能不能调大一点吧，这个距离我感觉。

我感觉还可以是吧，来咱们看看咱们可不可以稍微给它调整调整一下，现在我们这个样式呢，找找我们这个超链接margin是一个这个margin right margin right。是一个四个像素对吧，四个像素我们来给它尝试调整大一点，大大大，诶你看七个像素，六七个像素的时候都没问题啊，诶那我们就来一个六像素啊，六个像素是保存我这一刷新走你这个距离是不是稍微的比刚才要宽一点是吧？诶宽一点来看我们这个chome，诶也没啥问题，来再看我们这个艾叶六，还有八一刷新呢，也没问题，这块八呢也没问题，那咱就直接采用这么一个六个像素就OK了啊，六像素OK了，好，那这个东西呢，我们给它设置完了，接下来我们来接着往下去设置啊，往下去设置接下来其实这个位置呢，感觉还还挺好的是吧，你看我这小图标跟我这个是不是基本上一边起的，哎，包括我们这个I16这个小图标是不是I6稍微的高一点是吧？哎，来看看我们这个火狐，火狐呢。

基本上一边骑是吧，诶基本上一边骑，然后我们这呢，它也基本上什么样一边骑的，但是这里边虽然一边骑了有一个有一个小问题，什么小问题呢？你来看啊，我这小图标和这个文字他们之间是不是有一个距离啊，那现在我有没有设置这个距离啊，没有设这个距离是不是才导致一边齐的呀，那如果我给它设置上这个距离还起不起了，是不是该会整个往下往下挤了呀，哎，往下挤了，所以这里边呢，我设置完了东西肯定会稍微的会会偏下一点啊，稍微的会偏下一点，那这边咱们就先给它来调整一下这个距离吧，待会儿咱们再也就是说这一块可能跟我们的图里就不是完全一样了，我们来设置一下，然后最后我们底部对齐了就OK了，所以这里边呢，我们还需要把这个小图标整体往下是不是一样，诶移多少呢？我们来自己试一下，这个距离我就不量了，因为社交文字它量的也不是特别准确，那我们这里边小图标整体往下移，我们是不是就给我们整个那个大的div设置一个什么呀，上设置我们这个上外外边距吧。

啊，直接来一个这个marin top marin top我们这来多少呢？来一个两个像素，我们先看看吧，两个像素应该是有点小的啊。来我这块呢，一刷新瞅你是往下走了呀，有点小了，但是你会发现这虽然小了，这两个距离是不是就拉开挺大的了，哎，拉开挺大了，我们再调整一下看看怎么着好看一点，这块距离呢，给它来大一点。

这样还差不多是吧，哎，咱们就来一个四个像素啊，四个像素，但是这没有齐没关系，我们最后对齐了就行了啊，最后对齐了行了，这来一个这个四个像素保存来看一下效果，这里边再看一下效果，一刷新这小图标是不是就都OK了呀，都OK了啊，效果基本上还还可以啊，但是位置呢。没看见是吧，浏览器有点小问题是正常的是吧？诶来这一刷新啊，好，那这一块是我们说的这么一个，呃，这个东西当然你会发现IE6呢，就明显比我们其他浏览器啊，是要靠上一点啊哎，没关系啊，这个问题我们待会再调，问题在哪？待会咱们来说一下啊，问题到底在哪，为什么导致他们这块有区别，好接下来小图标这块整完了再往下呢，是不是这么一个东西啊，哎，首先呢，这又是一个这个标题啊，这有一个标题，那这个标题呢，我们发现实际上这个标题和它的效果呢，这就是大体上一样是吧，但是字体是不是不太一样啊，诶字体还有这儿是不是还有一个加速效果呀，所以这个标题呢，我干脆我也用一个什么呀，我也用一个HR，然后我再单独给他设置一些什么呀样式啊，我也用一个HR来直接呢，我把这HR呢复制一下，然后我来复制一下这个文字，文字呢，选中这个文字叫做一个newsletter啊newsletter。

给它加一个什么呀？诶class叫一个NL啊，保存这一刷新这文字是出来呀，诶下划线不是我们这个下边这边框其实样式都是一样的，主要是什么呀？文字效果是不是不一样啊，诶文字效果是不一样的，所以这里边我们来设置一下这个文字，直接来一个点一个SC，点一个这个NL，这里边我们来设置我们这个第二个标题，设置我们这个左侧的这个第二个一个标题，标题我们这设置一什么呢？看看它的字体吧，字体呢是诶这么一个玩意儿，直接从这复制豹子我们不用了它干嘛呀，它是一个加粗的，然后像素是一个18个像素，颜色是一个三个四啊颜色是三个四，颜色其实不用变是吧？诶颜色不用变，直接来个我们这个放的是一个18个小C，忘了一个加粗啊Bo加粗，然后这有一个这个字体，诶是诶是这么一个字体保存，然后呢，我们来。

哎，一刷新走，你这字体是不是过来了，哎，自己就过来了啊，但是这一块虽然调整好了，但是你会发现我们这个好像感觉不太一样，这距离好像有点有点大是吧？诶咱们这个距离实际上比我们这个图里边距离好像稍微的有一点有点大，也就是说它的这些外边距呀，内边距呀，和我们这个它是不是应该是不太一样啊，哎，不太一样，那这边我们来看一下，这里边我们给他设置，设置多少合适呢？咱们这样吧，咱们先不设置，我先干嘛呢？我先把它我们来看一下啊，选中它，选中这个标题，我们来看这标题个儿是还不小啊，因为有一个上内边距，还有一个下内边距啊，导致整个其实挺大的，那这样我们不妨干嘛呢？我们来把它这个上边这个内边距干嘛呀，都给它去掉啊，把这个内边距都给它去掉，待会我们再单独的去给它设置来一个这什么呢？设置一下我们这个内边距直接来一。

这个拍进来一个这个零保存，现在一刷新走，你是不是整个贴上去了，诶整个贴上去了，然后看我们这个CHROME1刷新是不是也贴上去了，诶再看我们这个IE6还有八全部刷新，IE6呢也贴上去了，咱看IE8是不是也过去了，诶那但是咱们要看一下这个问题了，虽然都上去了，但是好像我们看看。火狐啊，火狐呢，大概是在这个位置是吧，诶这个位置看我们这个chome。

CH是不是稍微比我们的这个火狐要高一点啊，哎，火狐要高一点，然后看我们这个IEIE6 ie6ie6跟CH差不多是吧？哎，苦差不多，然后看我们这个IE8呢，IE8也是差不多，但是你会发现什么呀，那这里边咱们就拿这个火狐还有苦来举例子啊，你会发现它这高度是不是是不一样啊，哎，那这高度不一样了，就会导致待会我们去对齐的时候，下边是不是整个都会错一些呀？哎，这会都会错一，那问题来了，我上边包括中间这堆样式，我设计的实际上都是什么呀，一模一样的吧，那为什么这儿还要差出一些来呢？为什么这还要差出一些来呢？诶，那我们来说一下，其实有一个属性，我们一直都是忽略的，什么属性呢？你来看啊，我们这块是不是涉及到文字了，涉及到文字就有一个东西叫什么呀，叫行高，包括我这是不是有一个H3呀，它也有一个什么呀，有一个行高的问题，在我们不同浏览器里边的默认行高实际上它是不同的，那可能什么呀，我苦肉我们边的默认行高要干嘛呀，要小一些，是不是导致它的高度就短了呀，是不导致元素整个往上挤了呀，而我们这个火狐的呢，它的默认梵高可能干嘛呀，要大一些，是不是导致我整个元素是往下挤了呀，所以你会发现我们来看它们两个字啊，你看它们两个字。

是不是他这横高是不是比他这个要稍微的要大一点啊，诶所以这个问题就在哪呢？就在这个行高这呢，所以注意你设置这个段落的时候，我们为了解决这个行高不统一的问题，干嘛呢？我们在这儿要指定一下行高哪指定我们这个行高是哪的。这是什么，是不是P标签的呀，还有哪有行高啊，这个是不是也有啊，哎，这个也有啊，这个是不是也有行高，哎，所以这里边我们要统一我们这个P标签，还有我们个H3的一个行高，P标签的行高跟这呢18个像素，我直接后边斜杠来什么呀，来个一表示什么呀？诶是不是一倍行高啊，哎，一倍行高，然后找到我们那个H h2h2行高，我也没给他统一来什么呀，一是不是表示一倍行高啊，这回我们再看一刷新走你诶是不是整个往上移了，哎整个往上移了，再看我们这个CHOME1刷新是不是也上来了，这回你看这两个浏览器位置是不是就。

就一样了，哎，就一样了啊，所以注意一定要不要忽略这个行高的问题啊，一定不要忽略这个行高的问题，再来看看我们这个IE6还有八一刷新是不是位置都上一辆呀，哎，但是I16呢，还是稍微的有点有点高是吧？有点高，但是I16还挺齐是吧？还挺齐啊，有点高，但是咱们的一点点调好横高设置完了，接下来的工作我们就简单了，接下来我们是要调整一下我们整个这个HR的一个位置啊，需要把它往下去，不是去挪呀，哎，我们来看一下它的位置啊，首先我们来看这个图，H2呢和上边我们这个小图标，它们之间是不是有一段距离啊，我来测量一下这个距离是多少。

大概量一下吧，这一块距离是一个38个像素，但是我感觉这个距离可能会有一点大啊，有一点大，然后这是一个上位边距，是一个下位边距啊，下位边距我来看多少是一个十个像素，诶，上边38，下边十，左边呢左右我先不要来诶内边距啊，内边距上边是一个38个像素，左右呢零个像素，下边来一什么呀，十个像素，我们来看一下这个距离一刷新走你。整体的位置呢，和我们这个。图里呢，有点偏下稍微是吧，诶稍微有点偏下，这个应该是在什么呀？在这个文本块的中线稍微的是不是靠上一点啊，哎，靠上一点啊来看这我这一刷新这个呢。俩位置一样是吧？诶感觉还差不多是吧？哎，感觉差不多啊来咱们来看一下我们这个I16 i16呢，嗯，位置感觉还还可以是吧，这个位置，哎这个位置还可以，咱们先给他放这啊，先给他放这，等待会有对比的时候咱们再去调整啊这个位置我们先给它放，待会再调整好，这个呢，是我们说的这么一个嘘标题，我们这个H3这个标题，然后再往下这个H3，我们就算给它整完了，然后再往下，是不是这么一个P标签啊，诶这个段落好整，这个段落跟上边这个文字是不是都是一模一样的，诶文字都是一模一样的，所以就简单了，直接干嘛呀，把上边这给他再复制一下CTRLC下边再粘一个粘到我们这个new study1保存走，你这段落是不是出来了，诶段落出来以后呢，再来整，再来整，就是我们这个呀，是不是表单了呀，这个表单和这边表单实际上是一样的，只不过它少了什么呀，少了一个文本框，还有一个什么呀。

是不是这个文本域啊，哎，少这个东西啊，所以我直接把那个中间那个表单给他复制一个。

CTRLC复制一个呢，但是我要改一下干嘛呢？诶删掉一个input，再删掉一个text啊A是不是就OK了呀，再来看效果，一刷新索紧整个是不是就就过来了啊就过来了，但是这里边过来是过来了，哎，是不是就看出问题来了，首先很明显它这块是没有去对齐的啊，没有去对齐的，然后呢，我们来处理一下，这里边呢，我们对齐呢，我们现在干嘛呢？回到我们这个页面，我们都知道刚才我们是不是给他指定了一个外边距啊，外边距来，我把这个外边距给它去掉。直接来一个点一个SC，我们下边的叫做一个TXT，我们来一个这个marin，一个bottom来给它来一个零和像素，把这个外边距给它去掉，这是设置我们这个左侧的一个表单项来保存这一刷新走你诶整个呢，是不是提上来了，哎整个提上来了啊，但是这里边会发现明显有一个问题，咱们这里边儿这个图里边呢。

我这个表单线和我这个段落之间是有一段有段距离啊，诶有段距离，而且我这个表单线和这边的是一个对齐的对吧？诶对齐的，而我在这个图里边呢，不仅它这边没有距离，而且它是不是还有点有点太靠下了呀？哎，有点太靠下了，所以这里边呢，我们需要调整一下了，要调整谁呢？那首先呢，这里边我还能不能再给他设置上位边距了，我设置完上位边距是不是更靠下了呀？哎，更靠下了，那我只能干一件事了，我没有空间设置上位边距了，但是我这个上位边距是不是必须得有啊？哎，我只能干嘛了，我是不是把他们这个距离缩小一点啊，哎，把他们这个距离缩小一点，我们来看看这个图里边这个距离啊，图里边这个距离呢？我看看啊，咱们可以调整哪个距离，其实咱们这块可以调整挺多的，这一块距离可以调整，上边是不是也可以调整啊，哎，上边也可以调整，咱们看看调哪个好一点，这个距离我感觉好像稍微有点有点大是吧，有点大咱们就调整，先调整一下这个距离吧，把这个距离给他调整一下，这个距离应该是我们那个marin marin bottom marin bottom，我们来一个这个零的像素，我们给它去设置一下啊，这是设我们这个什么呀，设置我们这个叫做下外边距，保存这一刷新走，你这是贴过来了，诶贴过来了，然后呢，咱们把这个它这个下外边距给它设置出来，咱们一点点的调啊，一点的调给我们这个input呢，设置一个marin，好，Marin一个。

Top top，来，咱们看看这个是多少啊。这个是一个15 15呢，咱们感觉我感觉有点大是吧，15个箱子我们先写上吧，我们再一点点调整一刷新是有点大吧，有点明显有点大，我们来调整一下这个距离啊来，但是我们发现当我设置完15的时候，这个位置呢，有点靠下是吧？有点靠下，我们来选中我们这个，把这整个往下挪一点，然后把这往上拖一点，找到我们这个阴部的15呢，我们来往上往调小一点走走12是不是差不多呀，13。

等会啊，咱们先不能这么挑，为什么不能这么挑，我上面是不也有距离啊，哎呦，上边有距离啊，所以咱们给他平均分一下，我应该是13是不是合适的啊，我们来看他齐不齐啊，咱们简单量一下。14个的合适对吧？哎，14个合适，但是这14个的应该干嘛呀，我应该是不是给他这有个距离啊，那所以咱们给他来什么呀，来一个七，我看看七个像素，然后呢，给上边这个这个玩意儿，我再给他下边来什么呀，七个像素，我们看看行不行啊，咱们试一试。感觉如何？

还可以是吧，但是呢，我感觉这俩距离吧，它不相等的话有点有点别扭是吧，这俩距离我觉得还是相等一点干嘛呀，是不是好看呀，哎，相等一点好看啊，所以咱们这里边儿啊，我就牺牲一下这个了，我就不设置它这个了啊这个margin top呢。我们找一下啊，NL这个margin bottom，我先不给他重置了，我还是觉得这两个什么呀，这两个距离它一样是不是好看一点啊，哎，一样好看一点，所以咱们干脆咱们牺牲一下它的什么呀，上面句我把这个整个标题往上去提一点啊，这一块我们就不按照这图来了啊，把这个整个标题往上去提一点，那这个位置呢，我干脆就给他设一个什么呀，15啊，就给他设置一个这个15，然后我们通过调整我们这个newsle。选中它，我通过调整它的什么呢？它是不是有一个这个上那边去啊，哎，我来调整这个距离，反正它小一点。

看不出来这22是不是正合适啊，哎，22，所以咱们来牺牲一下他这个内间距，然后来看这样是不是就OK了呀，哎，这样OK了，看不出来就看不出来了是吧？来这是一个22，我这一保存一刷新，这样是不是就OK了呀？哎这样整体来说这块就算是给他对齐了，哎齐了吧，是不是怎么看都不齐是吧，但是实际上他齐了吧，诶非常齐是吧？诶非常齐，来再来看我们这个come易刷新。完了，我们这是不是有点是不是高了呀，在我们这个火狐狸正好齐了，但是在我们这里高了，那就是说意味着里我这个那边就是要调整的大一点啊，哎，大一点，然后再看看谁呀，看看我们这个。

IEIE6就就差的太多了是吧，来看我们这个IE8 ie8是不是也也差的有点多呀，哎，那问题就来了，这东西它差在哪了呀，那全设是是不是都一样啊，行高我是不是也统一了呀，哎，什么那边剧外句是不是都统一了呀，还差在哪啊，我们来看看吧，我感觉这个问题啊，可能出现在我们这个这图标上啊，我们来看这图标有没有问题啊，这里边我们把这个图标来给它设置一个这个背景颜色艾斯我直接起内连样式了啊background color background color来一个什么呢？来一个这个red保存一下，我们来看这图标一刷新呢，在我们火狐里它是这么大个的，然后看我们这个里呢。区别高度是一样的对吧？哎，高度是一样的，那应该也不是这一块的问题，我们来看一下啊，横高我看看有没有落下的吧，这个问题一般就是出现在我们这个行高上，这是一个一倍行高，这是没有涉及到行高，然后呢，这是一个A，也没有涉及到横高放side都统一了，变成一个零了，My top是一个四维像素，好，那这里边我们先看一下啊，调整一下，把这个背景颜色先给它去掉，所以到这儿呢，就特别的恶心了，什么特别恶心呢？要是什么呀，要是最后那个按钮不齐，我们都好办，但是现在变成什么了，是不是变成我们这个是不是就是这个也不是都布齐，是不，我们这个音铺的布齐啊，哎，这个音铺的布齐，那现在我们发现什么呢？在我们这个ome里这个距离，我需要给它调整它干嘛呀，大一点啊，调整大一点，来我们来调整一下，我们看看能不能。

里面呢，这是一个我给他调整大一点，这应该是个大概是一个19是才够啊，这个差距有点有点太大了啊，我们来试一下。

但是呢，你把这调整合适了，这火狐是不是往下了呀？哎，火狐又往下走了啊好，那这里边儿我们先看看啊，IE这个问题，IE8呢和其实这都是都是齐的，唯独有个问题就是我们这个IE6还有这个火狐的问题，对吧？诶IE6还有火狐的问题，那这样咱们先停一下啊，我也去排一下这个问题。