94.尚硅谷_HTML&CSS基础_页面练习-导航条.avi原创

上午呢，这个页面呢，我们再来打开看一眼啊，已经做到了，就是刚把这个logo还有整个一个页面结构给它整完了啊来都给它打开，还有我们这几个浏览器啊CH，然后呢，包括我们这个IE tester，我们这块呢，打开两个浏览器啊，打开一个这个六，还有一个八转过来确定好，这是我们说的这个页面已经打开了，我们已经做完了这个logo了，Logo完事以后呢，我们来看这块logo完事以后呢，我们来看我们这个hi，这里边还有一个什么呀，是不是整个这么一个这个导航条啊，诶导航条，那我们要做这个导航条，我们先来说一下，我们先来写什么呀，先写这个结构，这导航条应该是一个什么结构啊。我们是一个无序列表啊，哎，我们的一个ul，然后ul里边放这么12345，是不是五个这个L好了，哎，放五个这个LY是吧？哎，五个LY，但是注意了，它这里边还有什么呀，除了这个字的话，Home pro products，什么service block，还有这个contact，这应该是一个超链接对吧呀，但是除了超链接以外，它下边还有什么呀，小字，什么back to home呀，什么what we have for you啊，乱七八糟的，那这些小的相当于什么呀，是不是一个副标题什么这么一个东西啊，那这个东西肯定是不能点的是吧？诶，那这东西可以用什么呀？

啊，其实可以用一个P标签或什么标签其实都可以啊，都可以，那我们先来整这个结构，首先整个是一个u lulu里边我们放五个LY啊，五个LY里边放一个超链接，超链接里边再放一个这个小字就OK了啊好，我们来创建这个结构，创建一个这个导航，导航条直接来一个ul，给他一个class，叫一个n NAV啊那位我们叫一个导航条，然后里边我们先放一个LY，我们先做一个看看效果啊，首先里边我得放一个这个超链接，超链接里边这写字第一个是一个叫做home啊，Home直接写了ho me，然后呢，我们说除了home以外，我们说这还有一个什么呀，还有一个小字是吧，小字用啥都行啊，我们最简单的，我在A下面直接来一个这个P标签啊，P标签来一个BA back back to home啊back to home，这是对我们这个字的一个，相当于是一个这个副标题一样，啊，副标题一样，然后。

行走你，诶是不是在这儿呢呀，看不太清楚啊，看不太清楚，咱们这样还是把这个headde的背景给它设置上，这样我们看的能清楚一点，刷新一下，诶是不是跟这呢？哎掰个托home，像这种链接我们一共有几个，哎一共有五个啊一共有五个，我这块给它复制一下。23451共有五个，但家注意他们这个文字不一样，我们来取一下这文字，文字怎么取啊，文字怎么取来看这这有一个什么呀，T是吧，诶T你可以拿这个选中这个T1选中它就可以干嘛呀，就可以去这去选文字啊，一复制这么字过来了啊选这个T1选中，然后选完了以后nes就回来了，Nes回ES就回来了，或者也可以干嘛呢，直接用我们那什么呀，拖动工具选中，诶一选中这字，一选中它图层是不是跟这的呀，然后你选这也可以去复制啊，多种方式啊多种方式来这块粘过来，再来选一个这个blog，然后再来是我们这个contact。

好，这是大标题都整完了，然后再整这个小标题，这有一个叫做什么呀，What way，诶，What we have for you，复制一下这个事就没有什么技术含量了是吧？诶慢慢来吧，这是一个since维度，TRLCCTRLV，然后呢，这有一个，诶FOLLOW2OR update，诶就是获取一个我们这个最新的一个消息，诶这是一个对ways to reach us，诶联系我们的一个方式是吧，诶保存，你看咱们讲这个前端还带学英语的是吧，来我这一刷新，哎，我这个这就过来了，诶结构我们就给它创建完了，但是我们来说这个结构虽然创建完了，但是它那块呢，还不太对是吧？哎，结构创建完了，结构没啥问题了，我们主要说的什么呀，它的一个位置，现在它的位置是在我们这个logo的一个下边，那实际上位置应该在哪啊，是不应该。

那在整个这个hier的一个右侧呀，哎，那我要让它在右侧怎么办？哎，我是不是要让整个ul是不是向右浮动啊，哎让整个这个ul向右浮动，所以这里边我们来设置一下我们这个导航设置我们这个导航条，导航条是我们这个点一个这个诶叫一个NAV来一个什么呢？来一个float来一个什么呀？哎，Right是不是向右浮动啊，哎一定注意是向右浮动，设置我们这个诶向右浮动啊先右浮动保存，然后咱们这来一看，一刷新走你诶是不是就跑右边来了，诶跑右边，但是还是这个问题，他跑右边了，但是它在哪啊，在这个logo的下边吧，哎，我们应该是什么呀？他是不是应该跟我这个logo一边齐的呀，它为什么在logo的下边，诶logo是个矿元素，我们说了浮动元素上边有一个矿元素，它是不会去超过那个矿元素的，对吧，所以它会在我们这个logo的一个下边，那怎么办呀？哎，你可以让logo是不是。

也浮动啊，或者我们说比较简单一种方式干嘛呢？诶你把logo和我们这个导航条换一个位置，诶它俩换一个位置，诶那这样我们再来看保存易刷新走你是不是就OK了呀？诶好啊，整个我们这个URL现在已经浮动到右边来了，但是虽然它浮动到右边来还是有问题，什么问题啊，哎，它是不是还是竖着的呀？那注意了，它是竖着的，那是谁的问题了？哎，Li，因为Li是不是块元素啊哎块元素就是竖值排列，那我是不是让LY浮动啊哎设置我们这个LY浮动来，那这里边来设置我们这个点n NAV下边是什么呀？LY啊NV下边的LY，我们要设置它这个浮动，那问题来了，我知道LY是向左浮还是向右浮，哎，我如果是向右浮的话，我一想UL向右浮，LY刚才也向右浮，那出现什么情况了后，是不是跑最右边来了？哎，顺序就不对了，所以注意ul是向右浮，而我U里边的LY需要干嘛呀？哎，向。

左扶啊向左扶，所以这块我们来设置一个向左浮动，直接来一个这个float，来一个这个life保存这一刷新走你诶是不是就过来了，诶过来以后呢，但是你会发现他又把谁挤下来了，把我们这个，诶把我们这个logo是不是给挤下来了啊别着急，为什么挤下来，因为我们这个字是不是太大了呀，哎太大了，我们需要去调整一下我们这个字体的一个大小，那我们这样先来设置我们这个字体大小，一个一个来设置，先设置谁呢？先设置我们这个超链接的一个样式啊，设置我们超链接的一个样式来，那这里边点NAV下边的一个A，这是设置我们这个导航条里边这个超链接，诶设置我们这个导航条中的这个超链接，那注意了，这个东西我们说我能不能写AV空格LY呀。

没问题吧，诶A本来是不是就是在LY里边啊，但是这里边注意了，那我们这个导航里边实际上就是这个A是超链接吧，所以我再写LY点什么呀，有点多此一举了，能理解吧，我们说了能少能写这个选择器能写的短咱们就尽量短吧，诶所以我就直接来一个n NAV空格，对了，效果一样好，那现在我们要设置它的字体，字体怎么看，我们这个字体是不是要求跟这个字体是一样啊，所以我就需要去看一下它的这个字体来，我直接还是选中这个T，然后选中这个字体来看这儿了，看什么了，这是不是出来一个字体啊，诶这个字体然后是一个什么呀，加粗的大小是一个14个像素，颜色是诶。

三个六对吧，或者六个六这么一个颜色，诶那我们现在干嘛呢？我先来取一下这个字体，注意啊，这个字体名字比较特殊，前边是字体名，后边还还有一个什么呀，Bold bold表示什么呀？诶表示的是一个加粗的字体，所以你选这个字体的时候，后边这个bode你不用选，直接选前面这个能理解吧，哎，不用选这个bode啊，CTRLC复制一下这个字体，直接来设置字体来什么呢？来一个found fo是14个像素，然后字体是这个是不是就OK了呀？诶这是我们说字体，但是还有一个特点叫什么呀？诶他得去加粗啊BOD，诶还得去加粗保存，我们再来刷新走，你这个字体是不是变了呀？诶但是颜色是不是还不对呀，颜色我们还要设置，注意了，放能不能指定颜色呀，诶颜色需要通过我们这个color啊，设置我们这个字体，然后再往这这是设置我们这个字体颜色直接来一个color，刚才井号，诶三个六是不是就OK了呀。

哎，刚才他是六和六啊，然后我这一刷新走你，诶这个字体是不是出来了，但是还有哪不对啊，诶下划线我们这个图里边是不是没有啊，哎，所以我们需要把这个下划线给它去掉，哎去掉下划线，去除我们这个下滑下划线直接来一个叫做一个text的来一个什么呀，那诶然后一保存一刷新走你下划线是不是就没了呀？诶这是我们超链接的一个样式，这样就OK了啊超链接这个文字就OK了，接下来再看谁呢？诶下边这个我们这个P标签这个样式对吧？首先看它大小是一个什么呀，11个像素，然后字体呢，是这个我来复制一下，诶没regular表什么呀，就是正常的，诶或者说细的其实就正常的，你看到regular我们就不用管它了，我们处理字体只要只有两种，要么然就加粗，要不然就什么呀，不加粗啊这种干嘛呢，我们就不做处理了啊，不做处理了就正常显示就OK了，所以我直接复制下字体，还是这个regular，不用管它，然后呢，颜色是什么呢？

啊，B7B7B7这么一个颜色大小是一个11个像素，没有加速，所以这里边我们直接来设置，直接来一个点一个n NAV来一个P标签，我们来一个这个color color是一个井号，B7B7B7，然后放的没有加粗对吧，11个像素是这个字体，诶是这个字体，好我们这一保存这一块就设置完了啊这是设置我们这个导航中的这个小标体，哎，小标题保存我们这来看一下效果一刷新，诶这个是不是就小了呀？诶跟我们那个诶设计图里边的效果基本上就一致了啊，我们主要看字体，其他的我们先不看啊，基本上就是一致的一个效果了啊诶，那好，那这设置完了，这里边我要说一个问题啊，说一个问题，来，这是我们的火狐里啊，来看我们这个pro里，我这一刷新走你诶是不是也出来了，但是你会感觉好像有哪。

比较别扭是吧？哎，哪比较别扭，可能你还没感觉出来是吧？来我们比较一下啊，现在看我们火狐狸，火狐狸这个字体，我们来选中这个屁白片，它的字体是一个这个11个像素对吧？诶我们往上一调是不是12个像素啊，再调是不是13个呀，诶越调越大，然后十二十一十九八是不是越来越小啊，诶再来看谁呢。看我们这个room刷新一下，点我们这个F12还是啊，也是选出这个元素，操作方式跟那个火狐里呢类似，也是11个像素啊，我们直接改一个，给它改一个这个20个像素，你看字是不是一下大了呀，诶咱们来看啊，我要调整19小了对吧？十八十七，16，十五十四十三十二是不是小了呀，再看11。11跟12是不是没动啊，往下走十九八七六五四三二一是不是没有变化呀，诶零没了，但是你发现一到11到一到12实际上是不是都是一样的呀，哎都是一样的，那这也是为什么来，其实也没啥为啥，它这个chome呀，就这样啊ome就这样，我们来说一下，在这写在我们这个CHR me ch浏览器中干嘛呢？字体最小就支持到什么呀，诶支持到我们这个12个像素，我们说一到11，诶都显示为什么呢？诶都显示为这个12像素啊都显示为十二十二像素，所以什么呢？在我们C里12个像素以下的字体，它是干嘛呀，不能正常去显示的，除非你给它设成零，零就没了，对吧？诶零就没了啊，那这个问题这个东西处理处理不了，或者说。

要处理这个问题非常的什么呀，非常的麻烦，而且我们说差一个像素呢，实际上差距不是不是很大啊，不是很大，所以这问题我们就不去处理它了啊，不去处它了，或者干嘛呀，你把自己都统一成什么呀，12个小组是没有这问题了，哎，也没有这问题啊，但是我们为了严格去遵守一下这个设计图，所以这里边我们就还是改成这个11小组，但是呢，Chome会比我们这个里边稍微的干嘛呀，大一点啊，会稍微大一点，但是你要注意这是ome的一个特点，以后去开发的时候也是注意，最小像素就到什么呀，11诶就到诶就到12了是吧，11像素就不支持了啊，最小的像素就到12像素啊，12像素好，这也是我们说这么一个问题啊，然后这把这个注释我给它写上啊，这是我们这个字体颜色，这是我们一个字体的大小，好，那这一块处理完了，然后再来看我们这个图，看看还有哪需要处理的，那接下来我们要处理的就是我们整个这一块，我们这个文字实际上比我们图里边的文字它的距离是不是啊。

要近一些呀，哎，要近一些，那我们来看看，那我们这块怎么去处理这个距离，哎，那我们来看看，实际上我们说了这一个是不是就是一个就是一个LY啊，哎，那我想让它这个距离大一点，那我可以干嘛呀？诶我是不是可以给我们这个LY，每一个LY我都设置这么一个那边距啊，哎，我给它设置一个pading，它是不是撑起来啊，当然你设置maring的也行啊，我们来说设置pading是不是也也OK啊，但是你要注意了，你要设置marin的会有个小问题，你要考虑到这个什么呀，边块这个问题了，如果你设置marin marin在边框外边，边块里边啊，诶边框外边，所以你的距离是不是会体现到这块啊，嗯，但是你说PA顶是不是能体现到这来了，所以注意啊，这块用marin的还不太好啊，不太好，所以这块我是不是要给我们的每一个LY都设置一个拍顶啊，拍D怎么设置啊，是不是左边设置一个，右边设置一个，每个都设置，是不是自然而然就给它撑开了呀，哎，撑开了，那接下来我们就要。

量一下这个左边右边我们到底设置多少合适，我们来测量一下这个距离啊来。这是多少，这是一个十对吧，哎，十来往这边看。

十这十呢，可能稍微小点是吧，它应该是九或者八的样子是吧，你看这应该是压点这字了是吧，然后再看这呢。这是不是又大了呀，哎这这这又大了，然后再看这这这是不是又大了呀？哎，你说这都不到十对吧，哎不到十来看这呢，哎这是十看这呢。这儿呢，11好像差不多是吧，然后看这呢。诶这个有点大了是吧，所以这东西呢，我们就不测了，他们就不测了，为啥不测了呢？因为它这图整的是实际上说是不太好啊，距离设置实际上它不是特别的什么呀，一样啊，不是特别一样，所以咱们来看大概都是什么呀，十是不是左右啊，诶十左右，所以咱们干脆这块给它做一个统一效果干嘛呀，那边距都给它设成什么呀，设置成十就完事了，左右各加一个内边距是十，所以这个内边距我们应该设置给谁呀？设置给我们这个LY吧，A ly我们来给它设置一个左右那边距，设置我们这个左右内边距，来一个拍定上下要不要不要，诶零左右是一个十个像素，然后保存这一刷新走，你是不是就撑开了呀？诶这个距离还好啊，距离还好，距离就给它撑开了，撑开了以后呢，我们再看还有哪块是我们需要处理的，嗯，诶是不是有边块啊，哎，边块，那我们来看看这里边。

但是我们还需要给这个LY设置这么一个边框，那这个边块我们说了是不是就给我们这LY设置啊，诶那这块是设置左边框还是右边框呢？诶我们来看看吧，诶你们会发现这有一个，这有一个，这有一个正好是不是最后最后没有啊，那正好我相当于什么呀？给每一个LY是不是都设置一个左侧的一个边框，是不是都OK以了呀？诶左侧一个边框，来我们这来写一个左侧的一个边框，这个边框我们来看看吧，它应该就是什么呀，一个像素是吧？诶一个像素，然后取一下颜色，看看这颜色吸一下，这是一个，诶第六第六第六对吧？诶来直接来设置一个左边框，设置我们这个左边框，左边框在于什么呀？包der left，诶一个像素，然后井号D6D6D6，然后样式应该是一个是doty的doty的吧，保存我们看效果它是一个什么。

点是吧，我来看看啊一刷新。是不是这个效果呀，诶小点点，只不过咱们这点比它那个要密一点啊，要密一点，这是我们这个doted的这个边框也就出来了，看我们这个CRU1刷新是不是也OK啊，诶也是这么一效果，但是明显我们这个比要比要比离这个logo稍微的近一点，为什么呀，就因为这个字要大一点啊，字要大一点，好，这个是我们的这个C也OK了，再来看一眼我们这个IE啊，全部刷新IE8呢，也没啥问题啊，也没啥问题，但是呢，IE6你就注意了。

A6是不是可以变成虚线了呀，哎，为什么呀，因为它不支持这什么呀，那种点状那个边块，但是还好呢，差距也不是那么的大，如果你非要去处理这个问题，那只有一个办法干嘛呀，诶截个图啊，截个图给它设置为背景啊，设置背景也行啊也行，但是我们就不管它了，因为这个差距不是特别大啊好，这是我们说的这一块就给它整完了，也就是说整个这个整个这个样式其实已经什么了，OK了，但是位置实际上对不对啊，位置不对，我们这个有点干嘛了，是不有点靠上了，现在他是不是跟我们这个logo是一边提的呀，但是实际的效果是它比我们这个logo是不是要要低一点啊，哎，要低一点，那所以这里边我给它。放个线。诶，那现在它的位置是不是在现在的位置在我们网页里的位置是不是在这儿啊，那实际的位置是不是应该往下去来一点啊，哎，往下来点那位位置，我是不是就设置这个距离就合适了，那这个距离我应该给谁设置？哎，给我们整个这个ul设置一个这个上边的一个外边距是不是行了呀？哎，设置一个上边距，那现在我们说了，由于这有一个内边距，它还会不会重叠了，哎，不会重叠了，所以设置一个外边距就OK了，可以去解决这问题，然后呢，我们来写一下，直接来找到我们这个n NAV，给它设置一个这个上外边距，设置一个这个上外边距，我们来看看设置多少合适，Margin一个top，我们来看看这个距离是多少，就是这两条线之间一个距离。

22个像素，所以我直接就来一个margin top来一个22个像素，保存这一刷新走你是不是下来了，诶，并且没有影响我们整个那一个布局啊，没有影响整个一个布局，然后还有一个问题就是什么呀，这边是不是有点近啊，哎，这边有点近，然后我们来看看这个距离，我们来看这儿这块，嗯，差不多是吧，嗯，那既然差不多咱们就不用管了是吧，能省点事，省点事是吧？来咱们把这个背景去了吧，看看差的多不多是吧，差多不多来把这个背景大颗让color去掉，保存这一刷新走你。

完美是吧，基本上还可以是吧？哎，基本上还可以啊，是我们说的这么一个这个效果啊，这么一个效果，然后还要注意的一，这个效果基本上可以了，但是这里边有一个小问题，你要注意了，实际上它这个什么呀，你来看看啊，我们这个LY这个边框，它是不是要比我们这个文字要长一些呀，而我们这个基本上和文字是什么呀？诶是稍微多一点是吧，但是基本上是一边齐的是吧，所以我们需要这个边框是不是往下再去一点啊，那怎么让边框往下去一点，哎，我是不是给我们这个LY加一个这个，诶下边的一个内边距行了呀，哎，那这个距离我们来看看大概是多少。

是一个十个像素，但是应该我量的会有一点有点高，因为没考虑到文字那个行高，所以这里边我们先试试吧，看看十个像素效果如何啊，效果如何找到我们这个LY，我们说了刚才我再来什么呀，上边要来一个零，左边来一个，这样是不是就行了呀，上边是零，左右是十，然后下边是不是也是十啊，诶下边也是十，保存这一刷新走，你是不是长下来一点啊，诶长了一点，这个效果呢，我们看看吧。CTRLH隐藏这个属片基本有点有点长是吧，有点长，咱们给它稍微的短一点吧，让它来个八个像素改我们这个最后一个八个像素保存，注意刷新好，那基本上是这么一效，其实好像也没啥区别是吧？诶基本上就这么一个效果，让它稍微的去长一点，那好，那咱们这一块的这个什么呢？导航条就给它做完了啊，再来看一下其他浏览器做完了以后呢，然后再有的问题就是什么呢？就是我们这里边没有体现出来的问题了，现在来看我们这个链接啊，我这个文字我这一放上去以后变成小丑了是吧，但是这个字他发现干嘛呀，是没有任何的变化呀，诶字没有任何的变化，那也就说这一块可能用户的体验不是很好，对吧？那我希望什么呀，当我这个鼠标移入到这个链接上的时候，这个文字可以是不是变化一个样式啊，哎，让我知道这个鼠标真正移入上去了啊，真正移入上去了，那这块我们怎么办呀，我是不是希望最简单的，我移入上去以后，我让这个文字去变一个变。

这个颜色呀，诶变个颜色，那这块我们怎么变呢？来，那是不是就是我们这个后啊，哎后所以这里边来为我们超链接设我们这个一弱效果，设置我们这个超链接的一个移弱效果，直接来一个点一个n va冒号一个power，然后呢，我们这来给他设置一个color，诶那我们来设置一个什么颜色好呢？那们说了，其实现在这颜色比较暗是吧，我只需要找一个比它这个颜色稍微的亮一点的感觉，我一点呢，好像它亮那种感觉是不是就OK了呀？诶那我们来怎么来找比它亮这个颜色来看一下啊，还是先选中我们这个文字T，选中这个文字，然后点开它现在是不是这是我们文字的颜色呀，要注意了，这一个圈在我们这里边，我们颜色的位置是不是跟这儿啊，那注意这个圈上边的颜色比我们当前的颜色干嘛呀亮，下边的颜色比我们当前颜色干嘛呀暗深，如果你想找亮的就往上点，如果你想找暗的就往下点，我们想找谁呀，找亮的咱们。

随便往上点一个，就这个位置吧，一点，诶你还挺会点是吧，A1A1A1，然后保存我们再看效果，直接来一个井号，A1A1A1保存，然后一刷新走你再来看。哎，是不是就亮一些了呀，诶亮一些了，如果你希望还有一个好一点的，我们可以再给它加一个下划线，是不是可能会好一点啊，诶加一个这个下划线叫做一个text的，我们来一个这个underlinep保存这块一刷新。

是不是就OK了呀，哎，就OK了啊好，那我们这个东西就完成了，但是这里边我要跟你说一个问题，注意啊，像我这个鼠标移入的这个效果，在我这个图里它能体现出来吗？图里边是体现不出来的，像这种东西可能在什么呀，在你的设计文档里会有，但是也可能什么呀，也可能没有，当你工作的时候，你发现这个问题，你发现什么呀，你发现这超链接吧，整完了以后他有点不太好看，你想干嘛呢？你想给他加这么一个样式，让它变得好看一点，用户体验好一些，但是注意你想加的时候，你是好心对吧，但注意自己千万别做这个决定，为什么呀。因为你加这东西人家可能觉得不好，能理解吧，所以你要加这个东西的时候，一定要跟别人去商量一下，跟谁商量，诶你们项目组有组长或者什么呀，组长找不着你就是组长可能是吧，跟谁呀，跟这个项目项目经理或者产品经理去商量，你说这个效果呀，我感觉不太好，你你我这么改一下行不行，他说行，你再给他加上，他说不行你干嘛呀，你就别理他了啊，你就别理他了，为什么呀，为什么要这么干呀？哎，对，赶不是不管闲事是吧，赶明这东西你改完了以后，你可能你的品位跟你们领导的品位，或者跟用户的品位他不太一样，或者说你品位没有那么高，改完了不好，不好干嘛呀，出事了，出事了他找你是吧？哎，那你跟别人问清了，跟人商量商量，那你好歹什么呀，你有人赖是吧，他让我改的是吧，他让我改的，哎，当然不是这个意思啊，不是这个意思，就是说你是你负责的事儿，你要去干，不是你负责的事儿，你一定要去问别人啊，你要问别人，设计这东西不是我们负责的，我们只负责去做页面，我们只能干嘛呀提意。

意见，而不能去做这个什么呀，决定啊，而不能做这个决定。