97.尚硅谷_HTML&CSS基础_页面练习-联系栏中间.avi原创

开始上课，那咱们昨天呢，其实我们这个整个这个页面的整个这个上边一大半部分，我们都已经给他做完了，然后下边呢，还有最后我们这两栏，实际上这儿呢，是一个什么呀，一个联系栏，诶这里边你看什么呀，什么这个contact是不是就联系的意思呀，诶包括一些我们这个电子邮件呀，包括我们这些message，都是让他和我们这个网站进行联系的一个联系栏，还有最下边呢，是我们一个底部的，诶包括一些这种超链接，包括一些这个copyright，我们这个版权声明都是在我们这个底部去写的，就这么几个几个部分，结构呢，其实也比较比较简单啊，比较简单，但是我们来说，其实这个最复杂的，也是我们整个的个页面一个比较难点的部分，就是我们这个，诶，这个联系栏这个部分啊，就是我们这个联系栏这部分，那首先呢，这一部分我们说了，它整体是不是也是一个大的div啊，那大的div里边我要放什么，是不是放三个小的div啊，所以它。

整体这个格式，这个结构实际上跟我上边这个content content是不是一样的呀，诶跟我这个内容是一样的，所以这里边呢，我们先来创建这么一个东西，打开我们这个引带点面，我们先来创建这个结构，往下找，往下找在这我们来写一个，在这儿我们来写什么呢？写一个我们这个叫做一个，诶叫做一个这个Co contact开始，哎，Contact这是我们这个什么呀，这是我们这个联系栏啊Co ta contact啊联系栏ta啊contact啊contact这来一个div，点一个con啊contact这是一个，然后啊，这写上瘾了是吧？Ta这是我们这个联系栏的一个，这个结束啊结束，然后在我们这个联系栏，我们先说我这个联系栏它是不是也需要去。

宽度是九百四吧，然后也得是不是居中啊，哎，所以这块把这个W给它干嘛呀，加上但是注意啊，这玩意儿千万别这么写，这么写变成什么了，是不是变成这个类了呀，哎，我没有这个class，我这两个class之间得使用空格是不是来分开呀，哎，空格来分开啊，然后在这个contact里边，我们需要创建我们这个三个div，诶创建我们这个三栏这个div啊哪三栏第一个div我们来看看它叫什么名，叫一个这个social，什么connection叫一个SC啊SC直接来一个这个点一个SC，然后这来一个div点一个我们叫一个什么呢？这叫一个中间这栏就叫contact是吧，我们叫一个这个Co吧，取的一个前两个字母，然后最后一栏是我们这个news update，哎，新闻的什么一个更新，乱七糟，直接来一个这个nu div表示一个nu，诶这是我们说的这么一个三栏啊三。

这么创建完了，那我们说了这三栏的格式实际上是跟我们上边这三栏是不是一样啊，都应该是多少啊，是不是300啊，哎300，然后给中间这栏是不是指定一个左右各20个像素的一个外边距是不是行了呀？哎，左右各20个像素外边距行了，所以这里边来回到我们这个CSS，那我一想啊，它跟这个样式是不是应该是一样的呀？诶那我干脆我这样逗号，我后边是不是接着再来写一组，诶下边是我们点一个con ta下边一个叫做叫做SC是吧？Asc，然后逗号点一个的注意啊，我这个是一个什么选择器啊，是不是一个后代选择器啊，这是祖先元素，这是后代元素，一定要注意它们之间有一个什么呀，空格没有空格是不是就变成我们这个交际选择器了，诶交际选择器了啊，一定要注意这空格千万别给它省了啊，然后逗号再来一个点一个这个砍tag的下边的我们那个叫做一个。

Nu啊nu这是一个我们这三栏三个div是不是他们样式应该都是一样的呀，然后同理我们是不是还给中间这个加这么一个左右的一个边距啊，哎，左右个边距啊，所以这里边我们给这个Co这再来一个这个逗号，诶现在干嘛呢？我是不把这个样式都统一好了，说白了我就是不想再单独去写了啊，不想去单单独再写了，好，那这写完了，我们来看看结构，它对不对啊结构对不对，来回到下边我们来干嘛呢？给他们设置一个这个背景颜色，诶我这是不是多写一逗号。是不是多写一逗号给它删了啊，给它删了好来这来写一个什么呢？写一个我们这个来一个高度，哎，来一个这个高度外，我们已经指定了高度，我们来一个500个像素，然后来一个background color，我们来一个这个yellow保存，诶颜色指定完了，然后呢，我们来运行一下，打开我们这个货。诶是不是底边302出来了呀，哎，分别是300，然后中间是20像素，哎，我就是借用了上边的一个样式，就不再去什么呀，不再去重复的写样式，如果我不要这我不这么写的话，我是不是得把下边这个样式再再写一遍呀，哎再写一遍比较麻烦，所以这块我们就统一应用这个样式了，好，那这一块我们都给它整完了，然后呢，这我就可以是不是就可以不要了吧？诶可以不要了，咱们先给他留着吧，啊先给它留着，待会我们来处理一下，这是设置我们这个三栏的一个什么，设置我们这个联系栏叫什么呀？诶高度和这个什么呀，背景颜色，诶一会儿诶一会儿给它删了。

一会删了，我们先留着啊标记一下，待会我们知道要给它删掉啊，删掉好，那这一块三栏就整完了，然后接下来我们是不是要写这个内容了呀，那这个三栏我们要去怎么去写呢？那首先呢，我们说了这三栏和上边三栏都是三栏，但是它就比较麻烦，为什么比较麻烦呀，上边三栏是不是都是一个模样啊，诶格式结构都是一样呢，而我底边这三栏是不是一栏是一个样啊，诶一栏一个样，那一栏一个样其实也没啥，那我无非就写三个，但是问题在哪啊，问题是虽然一栏一个样，但是你要注意了，它的这些按钮啊，它的这些表单项啊，它是不是都得是对齐的呀？哎，因为你是三栏这些东西，如果你不对齐的话，这些话就变成什么呀，是不是很难看呀，哎，很难看，最可惜的下边还有按钮，如果你没这按钮呢，其实咱们稍微差一点呢，也没事儿，它后边这个结构是不是一样的呀，你上边东西再乱，下边是不是也得对齐了，哎，也得对齐了，而且这干嘛呀，你看又有。

文字又有图片又有表现项，我们这种对齐呢，非常的什么呀麻烦，尤其是涉及到什么了，涉及到文字了，就比较处理起来就比较比较麻烦，诶那之前呢，我们采用的一种方式干嘛呢？我先把每一个栏的高度都给他嘛呀定出来，诶这块多高，这块多高，这块多高我都给以定出来，然后一点点去写，那种方式呢，比较比较好写，但是写的时候就比点什么呀，有点麻烦，诶你相当于得开发好几回啊，就是时间会比较长一点，所以这回呢，我们采用什么呢？我们就一点点写，一点点去对齐的方式，那这个三栏我们先写哪个呢？诶我更习惯于先写什么呢？中间，为什么先写中间呢？我们先写中间可以干嘛呀，以中间做一个参照物，然后让两边是不是和中间去对齐啊，哎，让两端和这个中间去对齐，所以这回呢，我还是采用这种方式，我干嘛呢？我先写我们这个中间，然后再写左边还有什么呀，还有这个右边，其实最麻烦的就是什么呀，左边这个诶我就是想把这个。

分的问题，放在往后去放啊，往后去放置好，那我们这里边我们先写中间，中间这块我们来看这个结构，实际上结构比较简单，就两三部分，诶两部分其实就是这一部分，这是我们一个什么呀？标题，诶标题我们这来一个HR是不就行了呀？哎，HR行了，然后底边这个部分呢，是一个什么呀？你看这是一个文本框，文本框，这是一个文本域，这是一个什么呀？是不是一个表单呀？哎，一个表单，整个的一个表单，最后是不是一个提按钮啊，诶所以就两个部分，一个是标题，还有一个是我们这个表单，所以这里边我们写起来也比较简单，直接来写一下了，回到我们这个页面里，首先呢，我们在这个中间的栏Co，诶这是我们这个中间栏联系栏，这个中间部分，中间呢，我们给它这来创建一个什么呀，先来创建一个标题，创建一个这个标题，标题我们想用什么合适啊，这个东西用个应该。

这跟我们上面这个应该是一个级的是吧，直接来一个H2，哎就OK了啊，直接来个H2就OK了，所以这儿我们来一个这个H2 h2h2呢，然后来选中一个这个文字，这个文字呢，叫做一个看contact，直接复制一下CTRLCCTRLV，这是我们这个标题，标题完事以后，下边这是一个什么呀，是一个表单啊，还一个表单，我们直接创建一个form form里边有三个四个表现项，两个文本文本框，文本框也就是我们那个text等于text，诶这个是一个text error，我们那个文本域，最后是一个T加按钮，对吧，诶，T按钮，所以这里边我们来整一下，下边我们来创建一个这个表单，创建一个这个表单，直接来一个哎，Form form form里边有一个action，是我们必须指定的action，我们就随便写写一个井号吧，再问一下，因为它需要一个服务器的地址，这一般都是需要我们后台去填。

啊，后来前的或者他给我们递中给他写上也OK，但是这里边呢，现在还定不了，所以就来一个井号给它占上去了，然后表单里边有三个表单项，一个是我们叫做一个什么呀，诶一个叫做一个input，它的type叫什么呀？叫做一个text啊text然后呢，我们给他一个class吧，Class叫一个TXT，但是我们方便来给它设置样式啊，设置样式把这class给它往前写好，这是我们说的一个音input，两个音input是不是两个文本块啊，哎，两文动盘内幕呢，我们先不写了，现在空着了，然后还有一个我们这个文本文本域text a啊他这这里边我们都不给它指定，直接就来一个什么呀，来一个这个class class我们来一个叫什么呀，Ta一来这么一个class，待会方便来给它设置样式，最后还有一个什么呀，是不是还有一个按钮啊，提交按钮，我直接来一个button就完事了，Button里边有一个文字叫做一个sun的，Sun来，我来取一下这个文字给它粘过来，好那。

现在呢，这个button也给它来一个class吧，叫一个这个BTBT啊来这么一个class，好，那现在我们说了，我这一块一个表单是不是创建完了，哎，我们来看看效果啊，这里边一刷新走你诶标题诶表单是不是都出来了，哎，标题表单都出来了啊，然后看一下我们这个其他浏览器，看看我们这个，哎，也是这个效果是吧，再来看看我们这个IE6，还有这个八，点开我们这个新建个版本，直接选中一个六，选中一个八复制过来一确定，哎，这是我们这个艾叶八，也基本上是这么一个效果，然后看我们这个艾叶IE6 ie6就比较恶心了，它第三栏是不是直接换下来了，当然这问题我们不用管它啊，不用管为什么，因为这里边第三栏里边，我们现在没有东西，但是我们填上东西以后，它自己就上去了啊，自己上去了，这一块可以理解为是一个bug啊，待会自己回去了，不用管它，好，那这一块三栏是不是也出来了，诶出来以后呢，但是我们这块。

而它和我们这个。显示效果是不是不一样啊，哎，我们这是这么一个比较宽的，还有点什么呀，这框是一个灰色的，然后边上还有点这个圆角啊，哎圆角，而我们这个就是一个普通的一个文本框吧，哎，文本框，所以这里边我们是不是需要把我们这个表单项设置成和图片里边一个样子呀，那这东西怎么设置啊，诶其实就是把这个东西设置为我们那什么呀背景啊，设置为我们这个表单项的一个这个背景就OK了啊，设置表单项的背景就OK了，那这里边呢，设计的时候，诶我们是不是先得要截图啊，哎，所以把这个图要抠下来，但是你要截这个图的时候，切这个图的时候，注意它里边有一个什么呀，有一个文字，这个文字我们是干嘛呀不要的，我们这个文字可以通过这个CSS去设置，但是这块默认我们是不要的，然后再把这个图给它下来OK了啊切下来OK了，我们就不再去具体说了，那昨天呢，诶，我这块因为切图这事有点太麻烦了是吧？诶所以就请了一个美工，就是我是吧，就。

我把这图就给它切好了啊，所以咱们就不再去重复性做这个做这个工作了，这是我们这个input，这个是我们这个text aar，这是我们这个那个按钮是不是都切好了呀，所以直接选中它，然后CTRLC给它粘了行了啊，这个切图呢，没有什么难的，所以这里边呢，你们可以多切切是吧，我是有点切够了是吧？诶到时你们多切切啊好，那这块我把这个图给它整过来，粘过来，图片是不是放过来了，三个图片，一个是我们这个音铺的，一个是我们这个T啊A瑞AR，还有一个是我这个B，填二三个图片啊来，那接下来我们是不是该设置背景了，诶来下边设置我们这个联系栏中的这个表单表单项，表单项我们来看怎么设置啊，怎么设置，那这个表单项我们这块来看，我需要给它设置背景，也就是说我是不是要给这个input去设置一个背景啊，但是你要注意了，诶，那你说我这个音input的。

这俩一不一样啊，这俩是不是一样的呀，实际上诶实际上是一样的，所以我不妨我给他设置时候是把这个同时也给他选中啊，诶所以这里边我怎么写，直接来一个来一什么呢？点一个坎text下边的一个什么呀，Text，那这样整个我联系栏里边的所有这个input是不是都选中了呀，诶这样我们设计起来比较，哎统一一点，直接来一个这个background background来一个这个URL，我们这来一什么呢？来一个这个叫做一个input在这儿呢，Input的我们来看一下这大小，它是一个296乘以33啊296乘以33，直接来一个这个外是296个像素，Hide是一个这个33个像素啊，33个像素，那这个是设置我们一个背景图片，但是注意了，我们讲这个表单的时候，我们说了我们这个什么呀，我们这个表单项是不是也都是一些这个内联元素啊，但是注意了这些内联元素比较特殊，它有点像什么呀，像一个行。

内块元素，所以这块设置宽高是干嘛呀，是没有问题的啊，是没有问题的啊保存现在呢，这里边同样给它来一个这个no repeat，保存咱们再看效果一刷新这是不是就出来了呀？诶这就出来，但是发现就有问题了，出来以后它是不是有一个边框啊，为什么有边框啊，诶因为我们这个表单项它默认自带是不是边框啊，所以这里边我们不想要在干嘛呀，诶是不是去除啊，诶去除我们这个默认的一个边框，直接来一个这个borderder来一个什么呀，那保存这回我们再看一刷新走你是不是就OK了呀？诶这一块OK了，下边是我们这个text a RA啊text RA来直接来写，那这个东西其实怎么设置无所谓了，因为。

是不就他一个呀，哎，就他一个这块怎么写都无所谓了，我这个还是这么写吧，直接来一个点一个看点一个TA还是一个这个背景颜色back背景图片啊background来一个URL，我们这个是什么呀？T不对，是这个图片啊，诶它的大小是一个296乘以134，跟它呢差不多，诶只不过是高度变成了一个134啊134同样也是一个no瑞P的啊设置背景图片，然后一刷新走，你这是不是也出来了，还是这个问题，是不是还是有一个borderer啊，诶默认一个边框来，咱们把边框给它，也是去掉默认边框，然后这块一保存一刷新，诶是不是就OK了呀，哎，就OK了啊，但是这里边我们来看看什么效果啊，看看我们这个CHCH呢没什么问题，来看看我们其他浏览器，诶，你发现什么了？IEIE6是不是自带滚动条了，来看我们这IE8呢，IE8是不是。

也有啊，诶这滚动条还整完了，还非常的什么呀，非常的是不是非常难看呀，哎，那这块我们不想要滚动条，那怎么办？哎，是不是我们那个overf overflow啊，诶overflow啊，所以这里边干嘛呢？哎，屎什么呀，诶去除我们这个滚动条怎么去除啊，叫做一个overfflow，我可以来什么呀？O twow让它自动去生成，不让它默认是不是带着拱条啊，一刷新这是不是就没了，哎，这就没了啊，那待会你这东西多了以后，它是不是才出来啊？诶这样这个默认滚条给它去掉了啊去掉了你也可以用什么呀，你也可以用。Hidden，当然黑有个问题，你黑完了以后，是不是下边就看不见了，那就看不见了啊，所以这一块注意啊，Orf floww设置为这个auto凸，去除我们这个滚动条，好，那这个文本框我们已经设置完了啊，然后再看还有什么问题啊，看这它有这一个长胡子了是吧是吧，那这什么效果的，你看我一放，这是不是变变形状了，嗯，来，你看着啊，走你走你走你。

你看我这个框是不是还能调整啊，能变大能变小，变大变小其实倒无所谓，但是我一变大变小，是不是整个布局就给变了呀？哎，所以我们这需不需要它可以调整啊，哎，不需要调整，那怎么让它不能调整呢？诶我们有一个属性叫什么呢？叫做一个re。REC size啊，叫做一个re size，我们有一个值叫什么呢？REC size叫做一个这个，那诶什么意思呢？我们来看效果啊，我这一刷新来看还有没有了，是不是没了，这一刷新走你是不是也没了呀？诶rees那什么意思呢？设置我们这个文本域，诶不能啊呀，调整大小啊，设置我们这个文本域不能去调整大小啊，这是我们说这个REC size，那好，整个这个文本域的基本效果我们已经给它设置完了，文本域完了以后就是我们这个按钮了啊按钮也是一样，点一个这个什么呀，设置我们这个按钮，直接点一个这个卡T，点一个这个BT也是一个background，来个URL，找到我们这个BTN2还是它的大小，宽度是163，高度是32啊，也是一个no瑞P的Y是一个163个像素，高度是一个32个像素，保存这一刷新走，你是不是按钮出来了呀，但是还是问题。

是不是还是有边框啊，哎，它这还是有这个默认的，很难看这个边框，所以这里边我们还是给它去除来一个哎border来一个这个那都给它去掉，这一保存一刷新走，你是不是就OK了呀？诶这个按钮我们已经OK了啊好，那整个这个页面的一个结构呢，我们就给它布置完了，那接下来我们再一个一个去调整这个样式啊，一个一个去调整，我们先来看谁呢？先来看我们这个contact，我们这什么呀，这是什么呀，这是我们这个H h2我们这个标题了，诶标题，所以往下来在这儿来设置我们这个标题，哎，设置我们这个标题，那这个标题呢，还是这个这这个问题是不是都一样啊，哎，三个实际上是都一样的，我就直接统一设置了，直接来什么呢？点一个contact下边一个什么呀？诶HR，诶HR统一来给它设置，HR呢，这里边我们先来看一下它的这个。

哎，它这个字体吧，选中这个H2，我选中它啊这一块是一个这个字体没有没有加粗，大小是一个18个像素，颜色是一个非常吉利的一个六个四是吧，诶六个四，所以这里边给它来一个color，这来一个井号三个四，然后放的是一个18个像素，然后是这个字体保存这一块一看一刷新走，你是不是字体就设置完了，字体设置完了，然后再看我们这个标题下边是不是还有这么一条，这么一条边块啊哎，就是一个底部的一个下边块吧，诶下边块，那下边块呢，还是一个虚线的，我们来取一下这个颜色，颜色看看是一个第三第三第三，那这里边我们还要给它设这么一个下边框，下边框我们来一个包的包一个像素，它是一个这个诶大SH的，然后是一个井号D3D3D3保存刷新。

边走，你这下边块是不是出来了，哎，出来以后呢，我们再来调整一下它这个位置，边框出来了，我们再看这个问题啊，那来看，那首先看什么呢？看这儿了，边框是出来了，但是我们来看这个啊，这是我这个标题对吧？你发现什么了，它这离上边是不是还有一个距离啊，诶，当然上边是不是还有一个阴影啊，这阴影我们是不是也没弄，哎，待会我们来弄这个阴影啊，我们先看这个，先看它这个标题，实际上离上边它是有一个距离的，这应该怎么去处理，是不是可以给我们那个H。

H2是不是加一个，哎上内边距是不是行了呀？哎，上内边距行了，那不仅加上那边距，那你来看我这文字和我这个边框是不是也有一个距离啊，那这怎么办呀，我是不是加一个下内边距是么样啊？哎，所以这里边我们还需要给这个HR设置一个上下的一个内边距，我们来看看设置是多少合适，这里边一复制这是一个43是吧？哎，43咱们。我说是不是他就44了，这应该少量了一个像素是吧，诶44咱这块无所谓啊，因为这文字肯定是不准的啊来往这再量一个这呢。这是一个十，上边是42，下边是十，这个距离可能稍微有点大啊，我们先给它设置上设置一个内边距，设置我们这个内边距，直接来一个这个拍定，上边是一个44个像素，右边没有，下边是一个什么呀？诶十个像素，诶左边是不是也没有啊，诶都不设置了，然后我这一刷新走，你是不是就整个位置就下来了，哎，位置下来以后呢，然后再看啊，位置虽然下来，但是注意现在我这个线和我这个。

Input是不是贴的死死的呀，哎，紧紧挨在一起，但是实际上他们之间是不是有这么一个距离啊，而且我们来说每个标题是不是都有这么一个距离啊，这几个距离怎么设置，哎，是不是再给它添加这么一个下外边距啊，哎，我们来看看这个距离是多少。17，然后多聊两个像素是吧，应该是一个15啊15，所以这里边我们再给他来一个这个marin top，对不是marin bottom设置一个这个下，诶外边距直接来一个这个marin bottom，来个15个像素，这一保存一刷新是不是整个就下来了，哎整个下来了啊好，那这个标题呢，我们就算是给它设置完了啊，标题就算给它设置完了，然后呢，我们为了看清楚点效果啊，我把这个背景呢，先给它去掉啊，这背景就要干扰我们了，给它去掉保存，这就刷新走你诶是不是就OK了，这个效果诶这效果会了，但是这里边我们发现什么呀，这里边剪感觉是一个。

空荡荡的是吧，哎少了谁呀，哎是不是少了我们前面那道那道阴影啊，哎这道阴影吗？说这道影实际上干嘛呢？实际上跟我们上面那个是不是这两个是不是一样的呀，哎这两个实际上是一个一样的阴影，所以这里边我们只需要把它是不是作为一个背景设置就行了呀，那设置给谁的背景。是不是整个我下边这个大div的阴影大大div的一个背景是不是行了呀？哎，大div的背景行了啊，那这个背景我们图叫做一个烂，是不是这条线呀，诶这条线给我们这个大div来设置，大div叫什么呀？看contact contact我们来给它设置这个背景，设置我们这个背景直接来一个background your arel，我们这是一个line，然后这也是no repeat，然后还在什么呀，诶诶对top是吧，它在顶部啊，Top是一个这个center，然后这一保存咱们来看，现在一刷新走你。

看太AG的，他这还还没出来是吧？没出来来咱们给他加个颜色诶是不是我刚才解决高度塌线了吗？哦，塌了是吧？哎，我们这个可爱的元素就塌了，所以这里边注意塌了以后你设置背景还能看出来吗？看不出来诶有同学说没浮动没浮动啊，这仨是不是都浮动啊，哎，这仨一浮动它的高度是不是塌陷了呀，所以这里边不要忘了给他来一个这个可粒fix啊，时刻不要忘这个高度塌陷的问题啊，来这一刷新走，你这个是不是就出来了，出来了啊，然后咱们可以把这个背景颜色给它去掉了，然后保存再来看一刷新是不是线就出来了，诶线就出来了啊，由于我们上边这位置已经定好了，所以这个线的位置一定是什么呀，就对了啊，一定是准确的了啊啊好，那整个的这个标题就整完了，然后接着来整下边一个一个的啊，那下边我们说了，我这个这些表单项的位置是不是还不是很对啊，所以接下来我们要做的是设置。

有些表单项的一个位置，但是你要注意了，实际上现在对于我们每个浏览器的效设置效果是不是都是一样的呀？诶，那我们来看看这个浏览器啊，看看我们这个，诶咱们来看看啊，你看我们这每个浏览器，你看它这些表单项之间是不是都有这么一段距离啊呃，这边距离我有没有设置啊，没有设置啊，看我们火火狐是不是也有段距离啊，而且火狐这一段距离明显是不是比我们那个们那个距离啊，小啊哎，要小那这段距离的同学说了，这块差一点，它是不是也没啥事啊，但是注意了，这块距离待会我们是不是要对齐的呀，哎，你稍微差一点，我们对齐是不是就就差这么多呀，所以这个距离我们是不是希望都给它统一一下啊，不一定非得清了，我就希望你这个每个浏览器设这个距离是不是一样啊，哎，包括我们来看我们这个IE这一个全部刷新是不是也有这么一个距离啊，哎，然后看我们这个IE81刷新是不是也有一个距离啊，诶那现在我们要看的就是什么呀。

这个距离到底是？哪来的吧？哎，我们来看看距离是哪来的，怎么看呢，开发者。选中我们这个INPUT1选中呢，我们来看一下布局，看一下它核模型，诶你们发现什么了，它是不是上下左右各有一个像素的一个内边距啊，哎，那你设置完内边距以后，就导致我们这个可见宽大小是不是变了呀，所以你看我实际这个input是不是这么大个呢？诶这么大个呢，所以这个距离呢，实际上是一个什么呀，是不是一个内边距啊，诶那边距这是一个，然后再看我们的这个Chrome也是F12开发者工具，选这个箭头，Chrome咱们没看过啊，选这个箭头，选中这个input，然后选择这什么呢？Computed啊computed点开它也是一个什么呀和面型，你发现什么了，也是上下一个像素，但是什么问题啊，左右是不是没有啊？哎，左右没有，那这就会导致待会儿我们去设置样式是会出现一些问题啊，所以这个东西最好干嘛。

咱们先不管设不设置，我们是不是先都给它清了呀，哎，先给它清了，我们先给它统一一下样式啊，所以样式设成什么不关键，关键是我们得统一啊，我们得统一，所以这里边我们来去除那个默认的这个，那边去直接来一个我们这个拍进来什么呀，零保存再一刷新走你诶这个input是不是贴一块去了，哎，然后看我们的一刷新input是不是也贴一块去了，诶接下来再看我们这个text real也是选中它，还有这哥们更乱了是吧？哎，两个上下各一个像素的一个外边距，左右是不是还有各一个像素的一个内编距啊，这些是不是都是给我们碍事的呀，我们都需要给它去掉吧，哎，去掉然后再看我们Chrome Chrome呢，也是选中它一看呢，哎哟。

没选错吧，这差距也太大了是吧？这个什么呀，没有外边距，上下左右是不是各两个像素的这个内边距啊，哎，所以这些导致了我们这个效果的不同，所以干嘛呢？我们要去除它的这个默认的内外边距，去除我们这个默认内外边距，直接我们来一个拍DING0，再来一个MARGIN0保存，这回一刷新走，你这效果是不是就统一了呀？诶再来看我们这个PRO1刷新是不是也OK了呀，那也OK了啊然后还有最后一个我们这个可爱的这个按钮，你看这按钮竟然你看这按钮我一选它是不是还挺大个的呀？哎，你看默认有什么呀，诶那边就诶选哪去了。

他说诶默认是不是有左右两个像素的这个内边距啊，哎，六个像素啊，六个像素内边距啊，左右两个六个像素的一个内边距，然后看我们这个CHROME1选中呢。诶，它不止有左右还有什么呀，还有上下是吧？诶所以你会发现这些浏览器。多可恶是吧，诶一个也跟一个也不一样，所以这里边呢，还是也是必天的这个默认这个内在面具我们都给它去除掉，保存回一刷新再来看，是不是就都没了呀，哎，就都没了啊，但是这里边你会感觉到呢，它之间是不是还有一段距离啊，诶还有这么一段距离，这段距离待会我们再一点点处理吧，这段距离因为内外面具我们都已经撤了这个距离其实呢，嗯，咱们看看吧，它应该不是由于什么呀，应该不是由于这两个之间的空格再删了看看啊。是不是还在呀？哎，那这就是可能是这个，它就是这么搞出这么一个东西来，待会我们再给它去掉啊，来我们看看这里边我们还有没有地方能去了，按钮的marin border pading都没了吧，哎，来看我们这个text a是不是也都没了呀？哎，都没了啊，所以这个距离就不是咱们的问题了，待会咱们再对齐的时候再去说这个东西啊，好，这块都处理完了，然后再来看我们这个IE6还有八啊，IE6呢，IE6这是不是还有一个距离啊，这个距离难道说他给这个input还设置了一个Mar丁吗？把这个marin先给去掉。

保存来看我们一六啊，但是应该。还不是是吧，诶还不是，所以这些问题呢，咱们都已经给它去掉以后，它还存在，那待会咱们调的时候再去一一去解决，现在咱们就调到这就OK了啊调这OK了，所以这块你调的时候一定要注意啊，一定要细心点，把这些样式干嘛呀都给它统一一下，为什么要统一，因为待会我们需要干嘛呀，这三栏是不是都是必须都做底这对齐的呀，你要不对齐会变成什么呀，特别的呀，难看，那如果说诶你想想我们这个东西如果差一个像素，它是不是就不齐啊，诶差一个像素很明显能看出来不齐，那你这干嘛呀，你这一一个像素可能藏在什么呀，藏在这个文本文本框里也可能藏在什么呀，我们这个文本域里，如果你这个样式不统一，待会儿我们调的时候会非常费劲，怎么费劲呢，你会发现一个浏览器齐了，结果呢，另一个浏览器干嘛了，又不齐了，你把另一个浏览器调齐了，其他浏览器又不齐了，诶所以你会整的时候会很费劲，所以这个这种细节一定要注意，把它这些默认样式全都给它去掉啊，去掉。

好，这一块都去掉了，但是去掉以后，待会我们还得给它加上啊，我们需要给它统一去设置一下，怎么加呢？那我们来看现在我们这个效果是统一的，是不是贴到贴到一起的呀，但是实际上效果我们来看，先看我们这个文本框，文本框它们实际上中间是不是有一个距离啊，哎，有个距离，所以这个距离我们是不是需要给它设置上啊，哎，那这个距离我这有两段距离，这个距离我怎么设置，哎我想想我是不是给每一个都设置一个下位边句是不是行了呀？哎，给每一个都设置一个下文就出来，当然你也可以给中间设置，但是你给中间设置你还得干嘛呀？诶你给单独给中间的是不是设置1CLASS呀？哎，设置class啊，所以这里边我们来选中来看一下这距离，这样距离吧。

是不是还不一样啊哎，我们来看这这一块是一个F8，是一个17是吧？哎，17看下边呢，是不是多了两个像素啊哎，下边是15啊一个17，一个15，这设置起来挺麻烦，你就没法统一设置了，是吧？所以这里边咱们直接取一个中间值十七十五平均是多少？哎16吧，哎16，所以咱们统一给它设置一个下位边距离为一个什么呀？16，哎，那我这marin来写一下，上边不要，右边呢也不要下边呢16个像素，诶然后我们这个左边是不是也不要，左边不用写了，不要就不用写了，0PS这一刷新走，你是不是这个距离就拉开了，好啊。

这个距离拉开了以后呢，再来看啊，这个距离拉开了以后，再往下看，我们下边我们这个按钮，还有我们这个，哎，文本域之间是不是还有这么一个距离啊，这个距离怎么设置啊？哎，其实直接给按钮设置一个上外边距是不是就行了呀？诶那这块为什么要选择给按钮设置，而不给这个们遇水，哎，我是不是有三个按钮啊，哎，每个按钮都有啊，每个钮都有，所以我设置完了以后，是不是每个按钮都有这个距离了，哎，就不用再去每个都设置了，但是我给文本域设置了，你们发现什么呀，这还有本域吗？这是不是也没有啊，哎，所以你还得在每个页面每个块去单独去设置这个那边外边距，所以这个呢统一设置谁呀，设置给我们这个按钮按钮来看看这个距离是多少。是一个11个像素是吧？哎，11个像素，那我们直接来给他写一个按钮按钮按钮按钮在这儿呢，给他设了一个marin top来一个什么呀，11个像素，其他的都是什么呀？零啊，其他都是零，我这一保存，现在一刷新走，你整个按钮是不是就就下来了，哎，你这除了要给按钮指定上了的句，你要注意了，还有什么问题，按钮跟下边是不是还有点距离的，哎，它离我们这个整个负元素的这个外边还有距离，所以最好呢，我们把这个距离也给它干嘛呀，指定上这个距离呢。

到这块，诶我们来看看是一个什么呀，23个像素，所以下边我们还需要一个什么呀，需要一个23个像素，23保存，这给刷新，诶当然这看不出来，因为我们这个负元素还没有，诶就是底边元素还没写，看不出来啊好下个你也写上了，当然从刚才同学看到了，左边是不是也有个距离啊，哎，左边一个距离，你要想设置，你给他设置一下这块其实无所谓了啊，这块其实无所谓了，但是他好像他这块还都。

都有这么距离是吧？哎，都有这么距离，但是这里边你注意他这块距离就干嘛了，是不是齐了呀，你这要给他设置marin，可能待会就就不齐了啊，会就不齐了，待会你可以去自己去设置一下啊，我这块就不不去整它了，就贴着边了，好那这里边我们就给它设置完了，设置完了以后呢，接下来我们来看看还有一个就是我们按钮上的这个。文字吧，哎，文字我们要设置一下样式，它是一个这么一个字体，没有加粗，大小是一个13，颜色就是一个白色啊，颜色就是一个白色，来设置一下它的字体，直接来一个这个color color我们是一个这个white啊白色，然后我们一个found，刚才是13个像素是这个字体没有加粗，诶保存我们这来一刷新走，你是不是过来了，哎，但是这个呢，有点是不是居中了呀，我们让它干嘛呀？诶靠左text烂来一个这个left来这以刷新，但是靠左呢，又太左了啊太左了，所以这里边我们还得来一个什么呀，诶来一个这个叫做text一个是不是缩进一下啊，Textag一个in text一个我们来一个这个em吧，保存这一刷新走，你是不是就过来了，哎，再来看其他浏览器一刷新啊，所以这里边啊，学的这些样式，那些属性，你必须得非常清。

做你要知道你遇到这个问题的时候，你应该用哪些哎样式哪些属性啊好，那这一块都给它整完了啊，这里边补个注释啊，这是设置我们这个字体，这是设置我们这个文字的一个位置，可算是把中间这个写完了是吧，文字的一个位置保存，但是真的写完了吗？有没有问题啊，框里边的字都是小事啊，咱们先看看我这个框里写点东西什么效果了，贴边了，哎，这来看看是不是也是贴边了，这再来看是不是还是贴边了呀，哎就说我这个字是不是太贴近我们这个框的一个边上了呀，哎，边上了，这也就是为什么贴边了，因为我们刚才把那些默认的内边距是不是给去除了呀，诶所以导致它贴边了，那我是贴边是不不太好看呀，我希望它往里是往里一点啊，那怎么办，我是不是给它加一个这个。

内边距啊，诶加一个这个左内边距，它不就不贴边了嘛，对吧，诶左那边距，那咱们找到我们的这个，诶这是我们这个音。音input的音input的内边距现在都是一个零，那我们上下来一个零，左右来什么呢？来一个两个像素，我们来看效果啊，左右来一个两个像素，我这里刷新两个像素呢，有点小是吧，我们来一个这个十个像素看看效果可以刷新紧诶十个像素是还可以啊，诶留一个边界，这样呢能。

是不是好看一点啊哎，能好看一点这字，哎这字出来就对了是吧？哎出来对了，为什么出去了呀？哎我们说了，你设置完内边距以后，是不是导致我们整个宽度是不是变宽了呀，我这左右各十个像素，那导致左右是不是更各增加了十号，哎那我应该干嘛呀，是不是减去20啊诶减去20应该是一个2276啊来这一刷新这来看。出这个效果呀，哎，这个效果啊，这也是我们说这个文本框，然后下边这个呢，也也没问题了，然后再看我们这个文本文本域，文本域呢，文本我们就最好咱们先看看其他浏览器吧，我们先不管别的，不管别的啊看其他浏览器没有问题对吧？诶没有问题，然后看我们这个IE6I6，哎呦左右是行了是吧，但是发现什么了，上边是不是没了呀？哎，上边没了，再看我们这个I8是不是也是一样啊，也就说它左右是行了，但是上边并没有达到一个什么呀，居中的一个效果啊，并没有达到一个居中效果，那这块怎么办？哎，是不是给他来一个韩高啊，诶韩高来一个这个LA hi了，来一个这个33个像素保存这里边我们再一刷新走，你不是就OK了呀，诶这一块就杯喝是不是就行了呀？哎，行了啊，没刷新啊好，这是我们说的这个文本框，然后。

下边我们那个文本，这怎么还长三根毛似的快。啊，这是是这还是那个啊，因为东西没写全呢啊，东西没写全呢，咱们把这三个都写上就行了，是吧，都写上就行了啊不是问题啊好，那接下来还有我们这个文本玉，文本玉现在是不是也是贴的死死的呀，我们需要是不是也给它设置一个这个编剧呀，哎，设置一个编剧文本玉呢，咱们来看看PA定呢。泰克瑞尔，我们上下左右都设了一个十，会不会有点大呀，我看看吗？

还可以是吧，哎还可以，那咱们就这么设置，上下走都设置一个十，但是你设置完了，注意可见宽是不是大小变了，哎，你干嘛呀，你是不是上水平方向得减去20，垂直方向是不是也减去20啊，这是一个114已保存，这样才是对的啊，这样才是对的。好，这是我们说的这个块，我们就给它。刷新一下是不是就OK了呀？哎，就OK了啊，刚才还有同学注意到这么一个问题是吧？诶脸型特别的特别的尖是吧？哎，什么问题啊字诶我们说了这个文本框里是不是有一个提示文字啊，你像u name表示我们这个文本框里是让你输入你的什么呀，你的名字的，那这文字我们怎么处理怎么处理啊？诶那同学说了，我这来一个默认值不就完了吗？对吧？来我们来一个input的，我们这来什么呢？来一个这个value指定我们这个默认值，来一个u name，我这一刷新走你CTRLF5。

是不是就有了呀，他说这有啥问题啊，不是字体的问题，字体都不关键，我一放进去他是不是还在啊，我要写之前我刷得给他删掉啊，哎，而我们需要什么呀，我一点它是不是就没了呀，所以这个注意啊，这个值并不是一个默认值，这叫是一个什么呀，叫做一个提示文字，或者叫什么呢？叫做一个水印啊，叫做一个水印，这东西应该干嘛呀，我一点它就干嘛了呀，没了啊，一点就没了，所以这个值用Y就是不行的，那用什么呢？另一个属性叫做一个place holder。Hold，哎，在我们这个文本框和我们个文域中可以什么呢？可以通过可以通过我们这个place holder来干嘛呢？诶来指定我们这个提示文字啊，来指定我这个提示文字，也就是我们所说的叫什么呀，叫做一个水印啊这个字你点它就应该干嘛呀，自动去消失啊自动消失来我们来看效果CTRLF。

哎，是不是出来这么一个呀，哎，你看我1.1输的内容是不是这就没了呀？哎，这么没了啊，叫一个水印啊，这么一个效果啊水印那同理，那下边那些我们是不是都给设置上啊，什么诱饵email呃的dress来一个poer粘过来，然后呢，这也来一个place holder，这是一个mes，我们这个message保存这一刷新是不是都有了呀？哎，这个水印就都OK了啊，但是注意我们来看一下问题，呃，我们这个chome OK吧，来看我们这个IE。IE6压根是不是就没有啊，来看我们这个IE8是不是也没也没有啊，诶这就不是缓存问题了啊，我们来说这个是什么呢？这个属性在我们这个IE8及以下的这个浏览器中，它不支持啊，不支持所以什么呢？所以在IE8里它是无效的，那如果兼容IE8需要什么？哎，如果要兼容IEIE8需要使用我们这个GS啊，需要使用GS，所以现在这个问题呢，我们先不管它了，先给它空出来，等我们以后整个GS，我们再说这个GS怎么去处理这个问题啊，怎么去处理这问题，好那现在这费了半天劲，中间这点是不是可算是给他整完了呀，你看东西没多少功夫是没没没少花呀，哎，功夫没少花啊，好，那这个呢，我们就给他处理完了，来，我们这来读一下。