68.尚硅谷_HTML&CSS基础_开班信息-完成.avi原创

来好了，接下来呢，我们来继续做我们这个开班信息这个练习，刚才这个练习呢，我们已经做到这么这么一个效果了，也就是说上边这栏实际上我们都已经做完了，接下来呢，我们来做下边我们这个主要这个内容，内容呢，首先我们来说，刚才我们已经把这个结尾它写好了，结构呢，其实我们就只写了一个这个div，它的class的一个content，这个div指的是哪部分呢？诶指的实上是我们图里边的这个部分，那这个部分我们看到了以后呢，首先我们会发现这个的第一个看到的，它实际上是有一个什么呀，它是不是实际上是有一个这个四个方向的这么一个边块啊，诶有这么一个四个方向，我们放大一点啊，来看一下四个方向都有这么一个实线的一个边块，我们来看它的粗细，它是一个一个像素的边框，所以这里边我们要设置一个div呢，我们先来给它设置一个边框，我们来看看这个边块，一个像素是一个实线solid力的，然后看它颜色是一个de，三个D，一个9CTRLC1复制这里边回到这儿来，我们来设置往这儿来，这是设置我们这个内容，设置我们这个内容。

直接来一个点一个这个content content刚才来先给它设置一个四个方向，一个包der，一个像素，然后来一个solid，然后九号，诶我们这个de ddd9保存这一刷新走你诶这个边块是不是出来了呀，但是你会感觉到这个边框它有点什么呀，不太对劲，为什么不对劲呢？因为现在我们这个边块干嘛呀，我现在有没有给这个count这个div设置高度啊，诶没有设置高度，没有设置高度，所以导致现在我们这个div它是一个什么呀，它是一个这么一个状态，也就说现在是不是边块重合到一起了呀，所以我们现在看不出来它的高度，所以这四个方向边块看不出来，但是呢，我们可以干嘛呢？给它指定一个高度，或者呢，来在这随便写点内容，写三个A，然后我这一刷新走你，诶这回是不是能明显看到这么一个边框啊，哎，这个边框，诶那同学说了，老师你为什么不给这个content指定一个高度，不就结了吗？诶那现在呢，我还不想去指定这个高度，为什么呢？因为我们说了，我们说这个内容这个框最终其实应该是被我们的这个。

个内容撑开对吧，所以这指定一个诶高度以后呢，我们就写死了，所以我希望什么呢？更灵活一点，诶可以去适用我们这个内容，所以高度就不指定了，待会儿把它由这些内容去撑开啊，由这些内容去开好，那接下来我们来写我们这里边东西，这里边的东西呢，我们先来看，首先呢，上边第一个叫做一个Java e加云计算这么一个全程就业班，那实际上我们来说这个是不是也是这么一个这个嘘标题啊，诶这个也是这么一个小的标题，我可以用一个标题或者干嘛呢？或者直接用一个div，或者直接来一个P标签都行啊，这个东西呢，是不是标题都行，其实包括我们这个近期开篇，其实呢，你用不用包标题呢都可以啊，用标题都可以，那这里边呢，我们就省点事儿了，这里边呢，我直接给他设置这么一个H3啊，直接给他设置一个H3来在这儿，我来设置这个H3来一个标题，标题里边有个文字，文字我们看叫什么呀，叫Java加云计算，然后杠一个全程就业班。

Java EE，诶加云计算，然后杠我们这么一个全程就业班，这是我们说的这么一个标题，然后一刷新走你诶这块字是不是出来了，诶字出来以后呢，然后接着再来看这个字出来以后，我们再看下边是不是还有一系列的开班信息啊，这个开班信息很明显，它是不是这么一个这个列表啊，诶既然是个列表，所以最简单的我直接来什么呀，来一个ul，我们的这个无序列表就可以了，Ul里边我们需要放的是一个一个的这种什么呀，LY，但是注意啊，写之前你要注意点细节问题，包括我们这个标题，实际上我们忽略了一个问题，什么问题呢？你来看这，你看我下边这个前端加M点五这个全程接线班，它是一个紫色的，这个东西为什么是紫色的呢？诶我们说了是紫色的是不是代表它是一个访问过的超链接呀，也就是说我的这三个标题，实际上它不仅仅是个标题，它是不是还应该是个超链接呀，诶那甚至说包括我的这些什么。

开班时间呀，什么预约报名啊，这些内容它是不是都应该是一个这个超链接啊，诶，那都应该是超链接，那我们就想了，那这个标题，包括我这个无序列表，它是不是都应该是写到一个A里边，诶所以这里边你要注意啊，注意这个细节，所以这个H3我这里边应该再放一个什么呀，放这么一个A标签，然后再来看我们这个u Li u Li里边放的是一个一个的，这个Li Li里是不是应该放两个超链接呀，诶，一个超链接放我左边这个开班时间啊，然后还有一个超链接放我这个什么呀，预约报名啊，预约报名好，那我们说干就干，来写这么一个Li Li里边我们来放两个超链接，来一个井号，第一个是我们的叫什么呀，叫做一个开班时间，然后冒号20160427开班时间，然后呢，冒号2016，然后杠0427，诶是这么一个东西啊，0427，然后再。

往下我们还需要写一个超链接，然后看他写的是什么啊，我们拿井号去做这个战略符，那他写的是一个什么，是一个叫做预约报名啊，预约报名我们来把它写上，在这来写预于。诶报名这么一个字，然后我们这一刷新走你，诶这个字是不是都出来了呀，而且现在还都是这么一个超链接，这么一个效果啊，都是一个超链接效果，诶那虽然是超链接了，我们这块要看一个问题，什么问题呢？首先我们来看这块啊，那这里边呢，它都是超链接，但是它却有一些区别，我们发现这个东西是一个什么呀，是一个红色的，这个预约报名是不是也红色的呀，但是下边这文字呢，开班时间还有开班盛况都是什么呀，黑色的，而且这个红色的它还有一什么呀。是不是还有一个这么一个加粗的这么一个效果呀，所以我们会发现实际上虽然都是超链接，但是超链接的样式是不是又不同啊，但是现在问题就来了，那现在我能不能去单独给这些超链接设置样式，哎不能，因为这些超链接和其他的是没有区别呀，包括这一块，这个20160427，实际上是不是仅仅是我超链接里的一段文字呀，那现在我能不能给这201600624这个0427专门去设置样式啊，诶那我们来看现在能不能啊，你看这个160327跟我们这个开班时间是不是没有什么区别，那那没有什么区别，就导致我们不能再去给他专门的去设置样式，那所以我一想，那我想给他单独设置样式怎么办呀？那我要想给他单独设置样式，我说要体现出它和其他标签的一个。

不同啊，诶所以这里边我们干嘛呢，我来做这么一个东西，来我写一个SPA，然后把这个0427呢放到这个span里，接着呢，我再给它加一个class，叫做一个red，诶那同样我这个预约报名也给他加一个span，来一个class叫什么呢？叫做一个red啊那这个名字呢，它不太好，因为这是什么呀，Red是不是表示红色呀，哎表示红色这个名字不太好，我们最好什么呀，根据这个意义去取名字，但是现在这一块呢，目前是无所谓的，所以我就直接来这么一个red了啊来这么一个red，好，我这一保存现在呢，看起来没有什么区别，待会儿干嘛呢，待会我们是不是可以通过这个red来单独去给我们那个红色的字体来设置样式啊，诶红色的字体来设置样式好，那我们先不理它，先给它空出来，这个结构我们写出来了，现在我们仅仅写出来两诶一个一个标题，还有一个这个LY写完了以后呢，我们先来一点点写啊一点写，那这里边呢，我们先来设置一下我们这个标题的一个样式，标题的样式呢，我们先设置一下这个这个什么呀，这个字体，字体呢，这个标题它应该是。

一个这个这个字体啊，由于这个图的原因，我们就只能猜一下这个字体呢，看着它像是一个什么呀。诶叫做一个有衬线字体，因为你会明显发现它这个E这块它是往下勾了一下啊，诶这个应该是一个有衬线字体，所以这里边呢，我们就直接呀，你看这个字体实际上跟我们这个字体是不是很像啊，诶所以不妨我们直接用咱们那个默认那个字体就OK了啊，默认字体就是那个宋体，那咱们只需要去调整一下它这个大小，大小我们来看看啊，大概估计一下，咱们简单去测量一下吧，这个大小是一个。

呃，这个高呢，是一个十个像素，那实际的高度应该也是12个像素就够了，那咱们默认的高度也是一个12个像素，诶那咱们这里边字体呢，就先不去给它处理了，应该这个字体应该跟我们这块字体实际上是效果是，诶CTRL1效果实际上是差不多的，所以他们就不设这个字体了，唯独需要设置的是什么呀，是不是我们这个字体颜色呀，它应该是一个黑色的，并且有没有下划线，诶也没有下划线，而且不止它没有，我们这里边儿所有的超链接是不是都没有啊？哎，所以这里边不妨咱们来统一去设置一下来。干嘛呢？设置我们这个内容，诶中的这个超链接直接来一个点count，下边是什么呀？A，我来什么呢？来一个这个color，来一个这个like，诶来一个黑色的这么一个字体，然后呢，我们再来一个是不是要去除我们那个下划线呀？诶去除下划线，去除我们这个超链接的这个下划线，诶那我们想想超链接的下划线我们要怎么去除呀？诶我们一个属性叫什么呀？叫做text decoration诶然后来什么呢？来一个，那我这一保存，咱们再来看一刷新走你这个超链接的下划线是不是全都没了呀？诶字体也变成了这么一个样式啊好，那现在呢，这个标题这里边我们就给它设置完了，标题设置完了，接下来呢，我们来设置一下我们这个下边这个开班时间，开班时间呢，这个字号应该是跟我们标题是一样的，只不过标题有一个加粗，而我们开班时间干嘛呀，他不需。

掉去加粗了啊，必须要加粗了，那接下来呢，我们就来看一下标题，标题呢，首先我们来看第一个问题，诶我这怎么还有一个，怎么还有一个点啊，这点是哪来的呀？哎，我们说了这个点儿是不是由于我这块用的是一个无序列表啊，这个点是不是就是我们那个无序列表那个项目符号啊，但是现在这玩意儿我们想不想要啊，诶我们是不想要的，所以这里边我需要干嘛呢？我需要干这么一件事干嘛呢？诶我要，诶设置我们这个诶ul的一个样式干嘛呢？我来一个ul叫什么呀？去除我们这个项目符符，怎么去除项目符画啊，我们叫做一个什么呀？List Di来什么呀？来一个这个，那一保存，咱们这一刷新走，你是不是就没了呀？哎，这是去除我们的这个项目符号啊好，项目符号去除掉了以后呢，然后我们再来设置字体，字体呢，开班时间这几个字我都不用管了，但是什么呢？这个日期，还有这个预约报名，它是不是都是一个。

红色效果呀，所以这里边儿我还要单独给他们设置一下字体，怎么设置呢？来一个点content，下边是什么呀，下边这个点一个red，还还记得吧，刚才我给他这个SPA加了一个什么呀，Class叫做一个red，诶我们来看一下。

是在这儿呢呀，哎，我需要单独为他们设置一个字体，来这里边设置我们这个内容中的这个什么呀，哎，红色字体，那我这里边呢，来一个这个color，直接来一个red，然后还需要设置一个什么呀，叫做一个加粗，加粗我们叫做一个放一个weight，来一个叫做什么呢？Bo，诶保存这里边再来看一刷新，诶这个样式是不是就出来了，诶而且现在跟我们这个图里边这个字体格式呢，基本上就一致了啊，基本上一致了，诶但是由于背景不同，你看着可能还会有一些小的差别，待会把背景去了，哎，就好一些了啊就能好一些，好，那这里边看完了，那接下来我们还来看还有哪些问题，其实还有一个最明显的问题，我们来看现在我们这个图里边的预约报名是不是在我们整个的一个右侧呀，而我的这个预约报名是不是还在左侧呀，诶所以我们需要把这个预约报名是不是一直放到。这个位置，诶，那我怎么让他过去，诶同学说了这东西还不简单吗？直接是不是让它向右浮动就行了呀，但是问题来了，现在我让谁向右浮动啊，我是不是应该让这个A向要浮动啊，但是我们说了我D个A和我下边这个A它有没有什么区别，哎，没什么区别，是不是一样的呀，所以我要想让它先要浮动，那我还需要干嘛呀？诶我需要给它来一个class叫什么呢？叫做一个right r GT来干嘛呢？来标识我是不是要让这个class为right的这个A小果浮动啊，哎，一定要注意啊，加以均啊，用一个class好，那这里边我们来干嘛呢？咱们在。

在这写吧，因为这块是设置了A啊，我们来设置什么呢？设置我们这个右侧的一个A的一个样式，直接来一什么呢？来一个点content，点一个这个right啊右侧，然后干嘛呢？我这来设置一个这个向右浮动，向右浮动我们怎么设置啊，叫做一个float，来一个这个right啊向右浮动，然后我这一保存刷新，诶是不是就过来了，诶这回这个位置就靠谱了啊，这回这个位置靠谱了，诶看着写完了还挺还挺好是吧，但是他。

是不是就没问题了呢？来，那这里边儿我们还需要看一下我们这个IEA6，打开我们这个IE ter，我我直接复制一下啊，打开我们IE6复制一下地址，一打开我们来看一下IE6。A6，我这块刷新一下，我们来看，哎呦呵，我一看IE6这块一出来有点不一样了，我们会发现在IE6里边，我这个预约报名是不是在这个开班时间的下头啊，诶下头可是火狐狸是不是确实好好的呀？诶那这是为什么呢？诶大家还记得刚才我们就刚才写这个近期开班的时候，实际上也用到了，我们说了，如果一个浮动元素上边是一个块元素，而且它没有浮动的话，我们这个浮动元素它是不会干嘛呀，不会超过这个块元素吧，换句话说，这是一个块元素是不是相当于有一堵墙，我这个浮动元素它是上不去的呀，哎，是上不去的，但是注意了，我的这个right上边是矿元素吗？

不是吧，诶是个A是个内联元素，所以这里边呢，在我们火狐里是不是就没有这个问题啊，大家注意了，这个呢，是我们I16里边的一个问题，A6什么问题啊，也就是说如果浮动元素的上边是一个什么呀，内联元素同样这个干嘛呢？它也是上不去的啊，也是上不去的，跟我们这个快元素是一样的，也就是说IE6里边对这个内敛元素，还有这个块元素是什么呀？诶是一样的，所以这里边我要怎么解决问题啊，诶我可以干嘛呀，我可以让这哥们是不是向右向左浮动啊，这样两个都浮动是不是就没问题了，或者还有一招干嘛呢？诶我把这两个A调换一个位置，我把下边那是不是调上面来了，这回再看火狐里显示效果没有变化，再看我们IE里一刷新。是不是也OK啊，哎，也OK啊，所以注意IE6里边有这么一个小的问题，上边是内联元素，它也是浮不上去的啊，浮不上去这块注意点OK了啊，然后再来看IE6里边，发现这个字体好像它有点。

有点不太一样吧，诶，所以这块刚才咱们偷了一个懒，没有去指定我们这个A的一个字体大小，但是呢，你不指定呢，这还不行，这是不是出问题了呀？哎，这出问题了，所以这里边呢，我们为了避免这个问题啊，我们还是来指定一下这个大小啊来咱们来设置一下这个大小，那们量咱们量了是12个像素，设置我们这个字体大小，直接来一个这个font size来一个什么呀，12个像素保存，我们来看IE。这一刷新这是不是回来了，诶，然后再看我们的这个，这里一刷新是不是也OK了呀？诶，但是12个像素我们来看看啊，刚才我们量这个感觉12个像素吧，又稍微的有点小了啊，我们来看这这是一个12，没错，这里边呢，量的是12个像素，那实际的大小应该是比我们这个12像素是不是要大一些啊，诶，所以这里边啊，咱们12还有点小，我来多少呢？来一个咱们还是在这调一下吧。

来我这选中这个A，选中这个现在是12，我来调整一下，这是一个十三十四，嗯，我们看看啊。来CTRL1。14呢？14应该是靠谱的啊，14这个大小应该是合适的啊，14这个大小应该合适的，再看看12吧，感觉好像14又稍微的有点有点大。哦，那可能啊，这个字体还是什么呀，还是12啊，还是十，那咱们干脆咱们就不改了，还是让他来什么呀，来一个12 12咱们还省事，都是12就完事了啊，还是一个12，那这一块呢，由于这个图的原因，所以这里边咱们去量这个字己的时候很麻烦啊，很麻烦，所以咱们就取一个12，应该是12比较正合适，因为14呢，稍微有点有点大了啊，有点大了，好，那咱们就还是给它设置为12就OK了，好，字体这块我们设置完了啊，刚才我们看到什么呀，IE6这块，它这个有点什么呀，首先把我这个字给盖住了呀，那待会别着急，待会我们设置点东西就出来了啊，设置老东就出来，好，那这里边回到这，我们接着来看这块整完了，然后呢，我们刚写了一个LY，那接下来剩下那堆LY我们是都可以给他补上了，诶补上了我们来看看怎么补了，接下来呢，我们先看第一栏，第一栏是我们扎vae加运算减这个全程就业班，我们这一共有245个信息，刚才我这是写了什么呀，写了一个其实简单了，我是不是直接把我们这个Li是不是。

复制五份是不复制五份，其实不是复制五份一共是五个，我复制四份是不是行了呀？诶复制四份来我这复制一个啊，直接复制我们这个LY2个，诶这是是三个了呀，我这一保存现在出刷新是不是就三个了呀，但是你要注意的是什么呀？注意一个问题，注意哪个问题呢？你注意了，我上边两个字是红的，下边这个是不是变成黑的了，那变成黑的了，我这是不是还是红的就不好看了呀？诶那我让它变成黑的怎么办呀？诶很简单，你红的时候你加了一个class叫red，你黑的时候干嘛呀，你把这个class给它去掉是不是就行了呀？哎去掉以后呢，我们来看这个东西呢，我们还得给它改一个字，这块就不叫这个预约报名了，而叫什么了，而叫我们这个叫做一个开班盛况，所以这里边我们来改变一下这个文字，改个名。

预约报名，这改一个叫做一个开班。盛况啊，开盘盛况，而上边那个我们叫做一个无座名额爆满啊，无座名额爆满，哎名无座名额爆满，然后我这一刷新，诶这样这个效果是不是就OK了呀？诶这样这个效果跟我们这个图里边就基本上一致了啊本一致了，好那接下来我们再走，是不是还有三个开盘声况呀，刚才我们已经写了一个，再复制两个啊，刚才我这块整个工作是在复制我们这个结构，我这一保存一刷新这个Java这个是不是就OK了呀？好，Java这个OK了，再来看下边还有一个什么呀，安卓加上这个人工智能这个全程就业班，它一共什么呢？一共有四个信息，一个预约报名，三个开班成了，所以这里边我复制的时候，实际上中间这个无座我们是不需要的啊，不需要的，但是这里边呢，我还是一块都给它复制过来。

这里边整个CTRLC，然后整个一复制，复制过来以后呢，我把这个无座名额报码给它去掉，保存这一刷新走你诶这是不出来了呀，然后呢，我们来。把我们这个H5啊也复制下来，待会儿再改文字，H5呢，一个预约报名，还有一个开门情况，就两个咱们就OK了啊，所以这里边呢，我来复制这个前两个这一块呢，没什么难度，我就直接诶快速的操作一下了啊，直接我这复制一下ctrl shift r复制这个内容啊，然后呢，我这里边只剩下前两个就OK了，然后一保存一刷新，诶整个这个内容是不是都出来了，诶当然高度还不对呢，别着急，咱们慢慢去调好，那现在咱们先干一件事，就是去修改我们整个这个文字，首先第二个我们叫做一个Android加人工智能全程就业班，所以这块我们得改一下文字了，第二一个啊，我们叫做一个。这是第一个Java加计算，第二个呢，叫做一个Android andd roid加上一个这个人工智能，哎，全程就业班，最后一个呢，我们叫做一个前端加上这个HTM5全程就业班啊这我来改一个叫做一个前端加上这么一个HTML5全程界边，诶咱们看看它是不是大写的，诶全都大写没错，一保存这个字是不是改完了呀，诶这个字改完了，然后其实剩下的就不用改了，但是我们这块为了诶细节一点，我们干嘛呀，我把这个日期啊开发时间也得改一下，这里边我们就对照着来看一下了。

上边的第一个是我们这个一六年的这个零四，诶咱们这块啊。把我这图片啊，咱们给他往边上放放，咱们这样对照时间来改一下，第一个是0427，第二个是一个0407，然后再往下是一个0315。再往下，我们是一个零儿。

二五再往下，我们这是一个一五年的一个1226。好是这么一个东西，然后再往下，我们来看下边，下边这个日期呢，是一个410，再往下是一个三月17，再往下是一个二月。22月20，然后再往下是一个一五年的一个12月23。好，这是这么一个，再往下我们看这个H5的，H5呢，第一个是我们这个五。幺零，最后这个是我们这个0316。保存这一块我们这个文字就改完了啊，当然这块文字呢，其实改不改都无所谓，因为我们这个文字呢，你写几号，其实差距呢，不是那么大啊，不是那么大，但是我们这块就改一下了，顺便给它改一下了，一刷新诶字诶都全都变过来了，好，这一块整体的样式我们给它设置完了，但是文不是样式还没设置完，我们是内容填完了，接下来我们是不是要还要设置这个样式啊，诶样式其实也比较简单啊，我们一点点来，首先呢来看现在我们这个整个无论是标题还是ul也好，它都是严丝合缝的，是不仅贴到我们这个边框啊，诶边上，那现在而我们这个实际效果是不是整个把这东西是往里挤了呀，诶跟我们上边效果实际上一样，那最简单的方式，我是不是也给它设置一个左右内边距是不是行了，诶那这一块那边距要给谁设置，诶是不是也是给我们这个content设置诶同样你设置左右那边距，不用考虑那宽度问题，它会自动把它往里去挤的，我们来看看这个内边距我们设多少合适，这里边我们来量一下。

从这到这，这是一个这个，诶咱们取个纸吧，20个像素这边呢，哎呦这边就不行了，这边我们来看看。这边需要一个28，也就是说左边是20，右边是一个28，给我们这个content的指定一个内边距的，我们来看在。这啊，我们来这儿来设置一个这个内边距，设置我们这个内边距，直接来一个拍ing左边诶咱们上边不要，然后右边是一个28个像素，然后我们这个下边呢，不要左边是一个22个，诶20个像素，然后我这一保存，咱们一刷新走，你是不是整个就给它挤进去了，哎，整个给它挤进了，诶这个效果跟我们这图里边这个距离呢，基本上就哎就一样了啊基一样了，好那接下来再看我们还有什么问题，还有的问题呢，就是诶还有就是上边这段距离了，对吧？诶上边这段距离我们想想怎么设置，那这段距离我还用不用给它设置内边距了，诶当然你要想设置内边距呢，它。

也行啊，你要想设置这个内边距呢也行，但是这里边啊，我们来看一个看一个问题啊，看一个问题我们来看，我们会发现这段距离是不是正好在我们这个标题的上边啊，诶，你看我这个标题，这个标题是不是每一个标题的上边是不是都有这么一段距离啊，那我一想了，那既然每个标题都有这么一个距离，那我干脆干嘛呀，我是不是给每个标题都指定这么一个上边的一个外边距是不是就行了呀？哎，所以这里边注意啊，你在整这个图的时候，你观察一下啊，观察一下那每个都有，我就直接整一个上外边距，这是我们说最省事的啊，直接我这块呢，来大概量一下。

这块距离呢，是一个这个咱们就干脆就来了一个什么呀，14个像素，我这块下边一看一下，下边14像素是不是也正合适啊，诶也正合适，所以这里边我给每一个标题，每一个标题也就是我这个content下边那个H3吧，哎，我们还没有写过H3，所以这里边我们再写一个表，一个content下边的一个H3，我们叫一个margin top来多少啊14个像素，好，这里边是设置我们那个内容中的这个标题，保存这一刷新走你诶是不是整个标题就已经下来了，好，标题下来了，接下来要做的工作我们再来看，诶标题是下来了，我们来看，诶我刚才仅仅指定了一个这个上外边距，但是你发现我这个标题和我这个文字之间是不是还有这么一个距离啊，那这个距离其实我们不妨干嘛呀，诶再来一个下外边距是不是出来了，我们来看第二距离是多少合适。

这段距离呢，我们来看，诶，咱们就这样取这么一个值吧，就来一个什么呀，16像素，因为这个图你不能贴边量，贴边量就不准了，我们说了文字那个框它不是什么呀，不是贴着它是有一什么呀，有一个文本框了，但是这个大小咱们不能贴镜，所以咱们这个值呢，咱们只能是估一下啊，到时不准的时候，我们再去微调一下，这个大小呢，我们就取一个什么呀，16就完事了，所以上边是14，我们再来什么呀，来一个这个下边叫做一个marin bottom来什么呢？16个像素，这一保存，咱们一刷新走你诶是不是下边这个距离也开了，诶好，那这一块效果就已经好多了啊，就已经好多了，好，接下来我们再要完成的工作呢，就是还有一个问题，还有一个什么问题呢？

还有一个问题就不是我们这个标题的事儿了，诶来看这里边我们实际上你看我每一个开班信息，他们之间是不是都有这么一个距离啊，那这距离我其实我一画时你就看出来了，这个距离给谁指定合适啊，诶是不是给我那每一个LY指定一个下外边距它们距离是不是拉开了呀？诶那我们来看看这个距离多少合适，这里边我来大概量一下。这个距离呢，它是一个这个15，咱们取个整来个什么呀，来取个刷吧，来个14就OK了啊，来个14就OK了，所以呢，这里边我们来给这个LY，我们点一个这个content，下边这个什么呀，LY，我来设置一个marin bottom来个14个像素，诶这里边我们来说一下这个呢，是我们这个为每一个LY设置。为我们这个内容，诶设置吧，设置我们这个内容中的这个二位来我这一保存，咱们这一刷新走你诶这块距离是不是也给它拉开了呀，诶也给它拉开了，但是虽然拉开了，但是感觉跟我们这个图里边吧，还是有点差距，我们这个图里边这条线是不是应该在最底下呀，这里边好像哪块距离啊设置有点小了，所以导致我们这个这个高度跟我们这个图里边高度是不是不一样了呀，诶咱们合还是这个问题，由于咱们这里边只是一个，诶这种测量这个图不太好，我们量的是不太准的，所以这里边我们设置完数呢，待会我们再去微调一下啊，再去微调一下，我们先把这个大体的样式给它设计出来啊，大体样设置出来，那现在我们来看这块设置完了，我们再来看还有哪块需要设置的，诶我们发现什么问题呢。

诶，我每一段开班信息下边是不是还有这么一个。虚线的一个边框啊，诶，那这个边框我们说了，它实际上只有一个，我怎么设置，诶我可以干嘛呀？诶我可以，诶其实这没什么选了，我只能干嘛了，我给上边这个ul是不是设置一个下边框啊，再给中间这个ul是不是再设置一个下边框就OK了呀？诶那但是我们说了最后这个ul我要不要设置，哎，就不用设置了，因为它这块是没有了呀，哎，他这块没有了，所以最后那个是不用设置了，但是这里边呢，诶我们要分别去设置两个，有点麻烦，我采用这么一种方式啊来ul在这儿呢啊，UI在这呢，我们直接干嘛呢，统一为我们这个ul设置一个这个下边框，来为我们这个ul设置一个这个下边框啊下边框或者这里边要严谨一点，直接什么呀，点这个content下边的什么呀，Ul啊，点content下边ul设置一个下边框，我们叫做一个border bottom啊，下边框明显一个像素，它是一个这个带式的，我们这个虚线的然。

那我们来看看它这个颜色，颜色我这来取一下是一个什么颜色，叫做一个诶DE3个D一个九这个颜色来一个井号一保存，是不是这么一个边框啊来我这一刷新走你诶这个边框是不是就出来了呀，边框虽然出来了，但是注意了下边这边框。

是不是也出来了呀，但是我们说了最后这个ul我们需不需要边框，哎，我们是不需要，所以干嘛呢？来这样，我直接在这个最后这个ul里边给他一个class，咱们随便写一个叫一个no，一个folder，我要告诉他，他是不是没有变框，但是你光这么写呢，还不行，我还需要干嘛呀，诶在这给他再去设置一个样式干嘛呢？去掉取消我最后一个这个ul的一个什么呀。边框啊，直接点一个count，下边点一个这个no borderer，然后我们这来一个borderer，来一个这个那一保存咱们再来看刷新一下走你诶下边那个边框是不是就没了呀？诶就没了啊好，你会发现加完这个边框以后呢，这距离是不是又又拉开了一些啊，诶但是整体呢，其实跟我们这个图上呢，还是有一点点的一个差距，其实到这儿的话，其实就已经OK了啊，就已经OK了，因为咱们做用这么一个图做成这么这么一个效果其实已经很不错了，但是现在呢，我们需要干嘛呢？如果我们需要跟这个图里边的再接近一点，我们还可以干嘛呀？诶我去调整一下我这个LY，我是不是给LY设置一个marin bottom呀？诶这个bottom可能我设置的有点小了，那我给它加一点，我一看，诶，当我设置到15个像素的时候，我这个边框是不是正好到我们刚才设置那背景的一个边缘呀，诶，所以那可能是我那个距离设置稍微有点小了，而我们说了15个像素应该是一个什么呀？诶合适的值，所以这里边我把这个LY改成什么呀。

改成一个15像素啊，所以注意这种东西开发的时候我们就干嘛呀，主观上看着效果OK就OK了，然后我们再通过什么呀，通过我们这个开发者工具去一点一点去调这个样式，所以一定要非常非常的熟悉我们这个开发者工具，好，那这一块写完了是不是就OK了呀，哎，就OK了啊，然后咱们这个绿色的背景还不太好，把这个背景给它去了啊，所以这个背景啊，我们开始给它设置出来呢，就是为了来看我们这个外部的大小，那现在它已经没有什么意义了，给它去掉，包括我们这个高度是不是也没用了呀，一块儿都给它注掉，一保存这一刷新走你诶是不是就是这么样的一个效果呀，诶这么样效果，哎，基本上跟我们这个图呢，诶，基本上结构基本上比例是一致的啊，那拿这么一个图做到这么一个效果，我们说目前的阶段呢，就已经足够了啊，就已经足够了，那接下来我们来看看还有没有什么地方可以完善的，那现在我们来看一个问题啊，那我们说了，实际上这些开班时间，包括这些标题呢，实际上它都是一个这个超链接，但是你会发现现。

现在我这些超链接我放上去以后，是不是鼠标确实变成小手了，但是我这个超链接是不是没有一些样式的变化呀，那这个东西呢，我们说用户体验其实呢，不是特特别好，那我们现在就希望什么呀，当我鼠标一一入到这个上边以后，我们这个样式是不是可以变个颜色，诶我们这样给一个更好的用户体验吧，诶那这块我们要怎么做呀？诶其实这个东西就更简单了，我们是不是直接给我们这个content的里边这个A是不是设置一个伪元素啊，哎，我们这个伪类啊，不是伪元素，是我们这个伪类，所以这里边我们来哪个伪类的呀，我们叫什么呀？诶ho为我们这个超链接添加一个这个ho尾类，直接来一个点一个count a冒号，一个ho ho，我们直接改一个颜色，咱们简单一点改一什么呀，红色我这一保存，咱们一刷新走，你再来看E1入。

是不是就变成了一个红颜色呀，哎，这样比刚才那个体验就要好一些了，如果你还想去加一点的话，我们还可以干嘛呢，再添加一个text的，来一个underline什么玩意儿，叫做一个下划线啊，为我们这个诶超链接添加我们这个诶下划线保存这一刷新走你诶再来一路，是不是就比刚才又好一些了，哎，又好些了啊，当然这一块呢，根据你自己自己的这个诶需求一点点的调整就OK了，这个呢，没有什么硬性要求，那总之呢，咱们今天呢，能把这么一个结构做出来，咱们这块浮动啊，包括一些简单的布局，咱们就都可以完成了啊都可以完成了，好，那这里边我们看刚才我们这个IE6。

诶，A6这块是不是也没问题啊，诶也是一个很不错的一个效果啊，很多的效果好，那这块呢，我们就评一下，接下来的时间呢，诶把这个东西来写一下。