100.尚硅谷_HTML&CSS基础_页面练习-底部.avi原创

接着来做咱们上午这个页面，上午这个页面我们还是打开来看一下效果，我们已经把这个上边哎就是很大的一部分都给它已经做完了，其实可以说的页面基本上就已经完成了，是吧？哎就差下边底边那一个底部那个栏了，那我们要做这个底部这栏呢，我们来看看，那首先呢，呃底部整个这一块是不是都是一个底部啊呃底部那所以其实我们还是先来创建这么一个什么呀，呃，创建这么一个div，是不是来放置我们这个底底边这个栏啊诶所以呢，我们在最后啊，我们这个页面的最后在这来来一个foot样啊foot特的一个开始我们这个底部，然后这来一个这个div，点一个foot呀foot特，然后呢，这来一个这个哎，Foot特的一个结束，哎，这是我们一个foot特底部的标签，那我们来看这哥们儿，我们还用不用让它。还用不用让他这个居中了，还让用不上他九百四了，或者说干脆就说这W用不用给他了，诶不用了，为什么呀，诶你看它整个实际上是不是下边底边通栏是不是都是这么一个颜色呀，然后都有么一个边块，所以这个foot特呢，我们就不用再去给它设置什么这种，诶居中啊，还有这个九百四了啊，这个W也就不用再给他了，所以这里边呢，福特直接就来一个div就可以了啊好，那福特我们有了，然后我们来看那福特呢，实际上它这有一个什么呀。

是一个边有一个整个一个背景是吧，然后上面还有一个这个边框，诶边框，所以这里边呢，我们先来给foot特设置一个这个背景，那既然要设置背景，那其实呢，宽度我们不用说了，宽度就是什么呀，是不是全屏的呀，哎，宽度就是100%，那我们就不用设置了，默认值就行了，那高度它有没有，是不是有一个高度啊哎，所以咱们先来给它设置一个高度，那这块量高度的时候，我就直接干嘛呀，不量这边块了，直接就量它这个，诶中间这块内容内容高度是一个这个67个像素是吧？诶67个像素来F8好啊，173个像素啊，看差了是吧？诶是173个像素的一个高度，咱们看看量的对不对，底边也对，诶，上边也对啊，173啊，173，所以呢，这里边我们在这个CSS，这这来写一下，这是设置我们的这个底部，设置我们这个底部直接来一个点一个foot特，我们来一个这个hat来一个100。

73个像素啊，高度是一个173，然后我们来给它设置这么一个背景颜色，取一下颜色，颜色呢是这么一个六个三是吧，诶三个3BACK ground哎直接back ground吧，来个井号123，然后一保存，咱们来看一上新，诶整个底部这个颜色是出来了呀，但是发现虽然颜色出来下边是不是多一块，为啥呀？哎，我们是不是给body设置高度了呀，但是我们说了body这个高度现在还有没有必要存在了，哎，没有必要存在了，所以咱们要把body这高度给它去了，所以注意啊，你添加了一些为了测试这个样式，当你测试完的时候就要给它去掉啊，去掉保存可以刷新这个是OK了呀，诶，这距离感觉哦，对了，还有一高度忘去了，我们是不是给这个整个这个三个div指定高度啊，诶我们仅仅把这个背景颜色给去了，而这个什么呀，高度还没去呢，所以还是找一下这个高度，这个高度应该是。

在最下边还特意好像写了一注释，待会没用给删了是吧？这个是吧，诶没有一会儿删了，现在就可以删了，诶来保存，你放心，这个是不是就对了呀？诶这个效果一致了啊，所以注意啊，你留着一些测试的样式，一定要想着给它去除掉啊，去除掉好这个完事了，然后我们说除了这个背景颜色，上边除实际上还有什么呀，是不是有这个边框啊，而这个边框我们说了它只是一个什么呀，是不是只是上边有啊，哎，左边右边下边都没有，只有这个上面有，所以这里边我们需要给它指一个上边框，来我们来量一下这个边框的一个。大小诶正好十个像素啊，十个像素颜色呢，是一个这个4C4C4C这么一个颜色，所以这边我直接来往下，到最后我这来设置一个这个上边框，设置一个这个上边框直接来一个boder top啊Bo低borderer一个TOP10像素实现的solid，然后是一个井号还4C4C4C保存这一刷新走，你这边框是不是就出来了，诶好，整体这个样式就已经OK了，然后再来去填我们这里边这些内容，内容我们来看了，内容其实还有点有点特点了，那我们来说，虽然说整个我们的什么呀，整个我们的这个foot特没有居中对吧，但是我发现这里边这个内容实际上是干嘛的呀，是不是居中的呀，哎，因为内容你要不居中，它实际上也不好看，但是问题来了，福特没有居中，但是它里边这个。

内容需要居中，那这块我要怎么处理啊？诶我是不是在里边给它加一个子元素，诶那F虽然没有居中干嘛呢？我在里边给它加一个这个div div它个class叫什么呢？叫W，那我这个div是不是居中了？哎，虽然复没有居中，但是这个div是居中的啊好，那这居中完了以后呢，我就可以直接往里边去填填内容了吧，这内容也比较简单，是不是就是三行字啊，诶这儿还要加上这个是不是四行字啊哎，四行字那我干脆就直接干嘛呀，四个P标签就不行了呀，诶四个P标签就OK了啊，所以这个边我们来一个这个P标签，诶一共是四个P标签，然后我们来复制一下文字。

诶，我直接啊，把这个都给它取过来，先把字取过来，然后再给他整这个P标签，诶这样。第一个。两个三个，还有一个最后我们这个什么呀，Copyright这个版权这个，哎也同样给它取过来，CTRLCCTRL粘过来，文字是不是就都齐了呀，哎，就都齐了啊，但是注意还有一点呢，我们来看字已经过来了，虽然字体不对呢，但是注意你要有一个问题啊，什么问题我们来看这块，这里边我们来看这啊，诶你一会字还没了。

然后给剪切走了是吗？诶在这儿呢，啊，那这个字呢，在这儿呢，我们来看一下啊，这个字上边这个没啥好说的，说的是一些什么呀，设计的信息，说白了就是这网页是由谁设计的什么呀，什么东西乱七八糟的不都不用管它了，但是关键看这这home啊，About呀，什么S，你看是不是跟我们上面导航条的内容是一样的呀，实际上这就是一个什么呀，一个超链接，包括这一些是不都是超链接呀，所以这里边注意你不仅要准备一个P标签，这个home about products service这些东西是不是还都是超链接啊，所以你还得用什么呀，用一个A标签，是不是给它括起来呀？哎，括起来啊来，咱们先把这A标签准备好了，每个呢都准备一个。

Service，这也是一个最后这个contact，然后把这个文字放在这个链接里，这活就没有什么技术含量是吧，咱们就细点心就行。然后这儿还有一个这个B，然后呢，下边还有两个是我先把这个复制过来，反正待会里边就有字了是吧。哟，少一个少一个少1P是吧，这P是大P是小P。大写的P啊大写的P，然后呢，这是一个这个玩意儿给它看TRLX粘过来保存，这是不是就设置超链接来，诶下边就不用管它了啊，然后一刷新走，你是不是就变成链接了呀，好，变成链接了以后呢，我们来设置一下我们这个文字一个样式，我们需要设置的是我们这个超链接的一个样式，在这儿设置底部的这个文字样，设置我们这个底部的一个文字的样式，直接来一个点一个foot，然后来一个这个A，是不是所有的穿感街样式，我们来看它这个文字啊，文字呢，我们来选中这个文字是一个这个字体大小是一个这个11个像素颜色是一个三个九啊三个九来直接这写一个color，来一个井号三个九，然后呢，我们这来一个放的11个像素，然后字体是这个字体，然后保存，咱们再来看一刷新，等你字体是不是变了呀，但是字体虽然变了，你发现我这字体是不是只对我这个A生效了。

诶，对，这些超链接这个P标签是不是没有生效啊，诶，为什么呀，我是不是只设置A，没有设置这个P元素啊，所以这里边你还在干嘛呀？呃，咱们再来一个选择器的一个分组，再来一什么呀P元素给这两个同时去设置样式，这回一刷新是不是就都变了呀？哎，都变了，然后再看的问题就是下划线是吧？哎，超链接这个下划线我们需要给它去掉，这里边是没有下划线的，所以这里边我们来去掉它这个下划线，下划线直接来一个这个text的一个decoration，来一个这个no，然后一保存一刷新是不是下划线就没了？哎，好，这是我们说整体的一个效果，然后再来看就是我们这个copy copyright copyright，我们这个设计图里它是在什么呀？在右边吧，而我们这块现在是在诶在左侧，所以我们需要是让这个整个copyright是不浮到这个右边去呀，诶所以简单直接说让它浮动就行了呀，诶来给它来一个glass标识一下，就叫一个copy啊，就叫一个copy。

然后呢，我们这来一个点一个foot，下边的这个copy，诶copy py，然后来一个这个float，来一个right，诶光浮动向右浮动行不行，诶一刷新虽然也过去了，但是是不是还是被卡在这了，因为上边是快元素吧，哎是块元素，那我们还是那个招可以干嘛呀？诶调换一下位置，或者你要让他们都浮动的还有点麻烦是吧？所以最简单的直接调换一个位置，一保存这一刷新是不是就上下来，诶好整个位置呢，就给它调调整好了，调整好位置呢，我们来看一下还有哪需要处理的，诶还有需要处理的就是什么呀，我们来看，实际上我们这个文字是不是贴着我们这个foot特的呀，诶上边是是一段距离呀，包括我们的这个，包括我们这个什么呀，侧边是不是也有一个距离呀，哎，我们都是有这么一个距离的，也就是说它并不是紧紧的贴到一起的，而我们现在是不是仅仅是贴着边的，诶，所以我们需要把这个文字是往里去。

挤一下啊，哎，往里去挤一下，那这块怎么整呢？我们先来整这个上边的吧，上边的我可以来什么呀，来一个上上那边距是不行呀，哎上那边距啊，上内边距就OK，上外边距呢，会这套没事，也不会重叠，有边框是吧？哎，有边框所以指定这个外边距呢，也没事啊，所以咱们呢就指定，那就指定外边距呗，怪边距上边一个我们来看是多少。大概是这个距离，这是一个16个像素是吧，少量了两个也就18是吧，诶上边是一个18个像素，然后呢，左边呢。

左边是一个八个像素是吧，诶八个像素，然后呢，我们右边其实呢，也有点儿距离是吧，右边来一个。右边是一个23个像素是吧？诶23个像素，那这个距离都忘了是吧？这个距离我要设置给谁呢？设置给我们F特下边那个什么呀，那个div吧，也就是foot特里边那个点那个呀，W啊设置那W，那这个距离我给它设置多少呢？刚才说了一个marin marin还记得吗？上面是多少来18个像素，然后右边是右边23个像素，然后下边呢，没有，哎，然后左边是一个什么呀？哎，八个像素，看八个像素保存是这么一个距离，这一刷新还不行，你这样写完了什么效果了。

我们本来是不是有一个默认的那个零，还有那个凹凸啊，诶凹凸你这设置完了，那个凹凸是不是就就没了呀？哎，就没了啊，所以这给他设置这个marin呢，还有一些什么呀，还有问题啊，还有问题，所以这呢，你还不能给他设什么呀，设置这个marin啊，不能设置marin，那只能选择谁了，是不是用我们这个拍ing了，哎拍ing啊，我们来设置一下我们这个PA定一个知道为什么不居中了吧，哎，因为什么呀，他那默认的那个凹凸是不是就没了呀？诶凹没了这个div就不居中了啊，就不居中了，所以这里边呢们还不能设置margin啊，忽略了一个问题，那我们这块来一个paing top，我们一个个设置吧，拍ing top来一个这个18个像素，我们先看效果啊，给它住掉，一保存一刷新，诶是不是整个这个文字就给它就下来了，诶文字就下来了，然后呢，还有一个他这个。这还有个距离是吧，这一个距离呢，这个距离其实可以给谁指令啊。

给P元素指定对吧？诶，然后P元素往里去缩进，或者也可以什么呢？也可以给它指定一个这个内边距，但是你指定内边距又就又有问题了，你指定一个那边距是不是整个我们这个是不是就大了呀？哎，整个大了，所以可以让什么呢？让我们这个P往里去移动啊，所以可以给设置我们这个P，所以刚才我们这个margin，我们这个P元素呢，是我们这个foot这个PP元素，我们给他一个叫做一个margin，一个left，我们刚才量了是一个八个像素啊，八个像素我们先来看一下效果，一刷新是不是整个就进去，哎，整个进了，然后还有一个marin，一个right marin一个right，刚才是一个23个像素，这一刷新是不是也进下来啊，诶进去了啊，所以这个设置方式的选择很多啊，根据你这个呃，需要去选择一下啊好，那这个呢，是我们说整个这个位置给调整完了，然后还有的问题就是。这块诶我们这个P与P，行与行之间，他们是不是有段距离啊，但是现在我这块就挨的比较是稍微近一点啊，诶所以这块最简单的，我直接给他来一个这个诶margin bottom视频啊，诶设置一个下外边距啊，下边距啊，直接来一个这个margin bottom margin bottom，刚才我量这块距离我们来看是多少，这是一个12个像素啊，12个像素来一个这个12个像素保存应该是有点大感觉。

是吧，哎，有点大，然后来来调整一下这个距离。八个像素呢，六个像素呢，嗯，就六个像素吧。咱们来一个这个六个像素已保存一刷新，诶这一块是不是就OK了呀？诶整个这个页面咱们就算是给他，诶初步完成了是吧，现在完成了，咱们来看看我们这个其他浏览器啊，看看我们这个chome。CH呢，这块OK的啊，是没问题的，然后再看谁呢，看看我们这个A。

IE呢，我们这来一个这个六还有八，我们这个八呢，这里边儿是OK的，然后六呢。不是也是OK的呀，哎，这一块显示的就都OK了啊，我们这块呢。就没什么问题了啊，整个这块就给它完成了，但是这里边儿呢，整体上是完成了，但是注意一些这个细节的一些问题，细节什么问题啊来看现在还是这个超链接，我是不是还是放上去没有任何反应啊，哎，包括还有哪啊我们这个按钮。是不是也是放上去没有什么任何反应啊，哎，任何反应，所以这里边我们需要给这个A是不是设置一下这个尾类啊，我们先整我们这个下边这个A啊，下边这个A来，呃，咱们在这儿来写一下这个样式啊，写一下样式A设置尾类咱们在这诶我们希望什么呢？当鼠标一入上去是不是A变一个样式啊，诶来设置我们这个A元素的一个这个后后直接来一个点一个foot下边的一个A冒号一个后，我们直接改变一下它这个背景啊文字的一个颜色，文字颜色改简单一点，改一个这个red吧，保存这一刷新一移入。

妈，什么颜色好看呀，蓝的呀蓝的你们这一这些东西一想它蓝的就好看不了，一般蓝的是不是不好看呀，比我那个还难看，黄的呀，亮一点是吧，我们先看看黄的，对对白的其实就足够亮了是吧，黄的行行行行行，没法没法整了是吧，那我就听你们选一个呗，往上找一个。最上边就白的是吧，往上这往这选一个这个。

井号粘过来这一刷新走你呃，稍微亮一点对吧？诶稍微亮一点，那如果你觉得说还不太好的话，再给它加一个这个text啊eration来一个这个under LA给它加一个这个下划线，诶是不是这样能好一些啊，哎，其实我觉得红的挺好看的是吧？嗯，好啊，这是我们说的这一块就改完了，然后呢，还有我们的这个这个我们是不是都可以去设置啊，那这里边我就不多说了啊，这个就不多说了，待会你们可以自己去设置一下，我主要说的着重一个说什么呢？说的是我们的这个这个这个现在我们说了，它移动上去以后，虽然这个按钮没有什么变化是吧，包括这个也没有什么变化，但是你注意我鼠标指针，当我移上这个的时候，它变成一个什么呀？是不是小手啊，我们还有一点感觉，但是当我移上这个按钮的时候，是不是没有任何变化呀，哎，没有任何变化，那我们说了你这个文字变化简单，但是我们现在说下我希望什么呀，当我移移入到这个上的时候，你是不可以给。

都变成一个，这个也变成一小手啊，诶你要感觉到我确实一路上去了，那这个是为什么，咱们先说为什么没有变成小手，诶那没有变成小手原因是不是这两个东西它可能它它不一样啊，这个我们用的什么呀，超链接，而这个用的什么呀？哎，Button是吧，用的是button，那一入超链接上的时候变成小手了，但是移到移入到button的时候是不是没有变化呀，那我现在希望的是什么呢？希望的是当我移入到这个按钮上的时候，你也给我变成一个什么呀，小手，诶那怎么办呢？来，那我们需要设置这么一个样式，找到我们这个按钮，按钮我们是在那个BT。N这设置了在这呢吧，对吧，哎，我们来说一下有一个样式叫什么呢？叫做一个科，诶cur什么意思呢？诶它可以用来设置，诶可以。诶，用来设置我们这个鼠标指针的一个什么呀，指针的样式啊，指针的样式，那你注意了，我这个壳的，它并不是设置了我全局的，你看我现在壳字放哪了，是不是放到这个B填里边了呀，所以这表什么呀，设置当我鼠标指针在我这个B填这个按钮上的时候，一个什么呀，一个样式啊，一个样式，所以注意我们来看来一个什么值呢？有一个值叫做一个pointer啊pointer什么效果我们来看一下啊，直接一刷新，刚才是不是还是箭头呢，这回在移入。

是不是就变成小手了呀，哎，就变成小手了啊，可以通过我们这个哎科字来设置这个样式啊，来设这个样式，好，那这里边我们再来看一下它的其他的值啊，直接打开我们这个文档W3死库离线手册这个MLSSCSS，找到一个这个CSS的一个参考手册，诶我们这里边呢，搜一下这个样式叫做一个。CTRLF搜一下在这儿呢，诶叫什么呀？规定要显示光标的类型，什么形状啊，点开它，我们来看它的介绍，诶它的默认值是什么呀？Auto凸自动的，就是根据你的需求自动去设置的，然后它有这么几个值，Default叫什么呀？默认光标通常是一个什么呀？一个箭头，诶默认值叫什么呀？浏览器设置光标，这有一个东西叫什么呀？叫可hair什么意思呀？光标呈现为十字线啊，我们来看看效果啊，我们不多说了，直接测试两个一保存，现在一刷新在外边没有任何变化，当我移入到这个按钮以后。

是变成10字啊，哎，变成这么一个十字，这么一个效果啊，十字么一个效果，还有什么呢？还有刚才我们这个POINTER1只手还有什么呢，还有一个叫做木木什么样啊，我这一刷新。像这个效果呀，哎，好像我们这个东西可以去拖动式啊拖动式但是注意它只是改变了一个鼠标的一个样子啊，鼠标一个样子，那这里边我们还是用我们那什么呀，用我们那个pointer诶合适一些啊，Twitterer合适一些，然后你要选的话，你可以再看看其他的东西啊，可以来测适一下，我们这块呢，就不多说了，诶当然你这块改完了你也可以干嘛呀，你也可以再给它加一个后，当鼠标移入以后，是不是变一个样式，诶变一个样式啊好，这个呢，是我们说的这个底部，我们就算是给它这个完成了啊，我们这来停一下。