00:00
接下来呢,我们来做一个小练习啊,小练习比较简单,这么一个导航条,这么一个练习啊,诶我们先看这个效果啊,是这么一个页面,页面里边呢,就是这么一个,呃,小小蓝条,然后里边有这么四个,呃,这是什么呀?跳链接是吧,哎,我这一点它应该是可以去跳转,跳转页面了,每天首页就跳首页跳新闻就跳到新闻,跳联系,跳到我们那个联系栏,关于跳到我们那个关于那个页面啊这是我们说网站的一个导航条,那像这种东西我们在网平时上网的过程当中,是不是很常看到啊,诶很常看到啊,那我们说这个导航条是一个最简单最简单一个导航条了,但是呢,其实很多复杂导航条也是基于它去扩展出来的啊扩展出来的,所以接下来我们来看这个东西我们要去怎么做,那首先呢,我们来先来创建这么一个页面,来一个零三,我们叫做一个这个,诶咱们就叫一个诶航条吧,诶导航条,然后呢,给他来一个题目,叫一个这个导航条,那我们来看这练习我们要怎么做呢?怎么做呢,第一件事我们要先干嘛,哎,我们是不是要先把它这个结构给它定义出来呀,哎结构,那它这个结构是个什么东西,哎,我们说了这种导航条其实我们最多。
01:17
这什么呀,是无序列表,当然你说我我用div行不行啊也行,你在哪用div都行,但是我们这里边导航条一般我们都是用什么呀,无序列表去完成的啊,无序列表完成了,所以这里边那我们说了,其实它整个就是一个什么呀,就是一个无序列表,然后这些什么首页呀,新闻呀,联系呀,关于呀,这每一个是一个什么呀,是我们这个无需列边里边一个Li,然后Li里边还得放一个什么呀,超链接,不然你不放超链接,它是不是点不了啊,哎,它是点不了啊,所以第一件事,我先来创建我们这个什么呀结构,创建我们这个导航条的一个这个结构来直接最简单的来什么呀,UL,咱们给它来一个class,咱们叫一个NV啊na,然后这里边我们创建什么呀?LYLY里边放一个这个超链接,我们来看有几个超链接,应该是四个,首页新闻联系,关于啊来写一下,第一个是我们这个。
02:17
首页,然后我这复制一下啊,第二个是我们这个新闻,第三个是我们这个,呃联系,但是无所谓啊,这个东西都第三个是我们联系联系,第四个是我们这个关于啊关于一共是这么四个链接,好那现在我们就来运行一下结构呢,基本上就是这么一个效果了啊结构出来了,诶那基本上你会发现这东西跟我们这个是不是完全不一样啊,哎,为什么呀,因为现在仅仅有结构,我们是不是还没有给它设置表现呀?诶所以我们要一步一步的通过CS把这个要干嘛呀,要变成这玩意儿啊,要变成这玩意儿,那我们来看这里边我们叫先怎么整,诶那首先我们来看一个问题,对吧,我们说首先这个什么呀,这这哥们是不是不是贴着边的呀,怎么说他跟这是不是有一个距离啊,这是我们那个默认的那个marin,还有那个拍ing吧,哎,所以第一件事我们先来清除我们这个默认钥匙。
03:17
诶清除我们这个默认样式,直接来一个这个星号,来一个这个marin marin marin0,然后来一个这个拍DING0来保存,咱们来看效果,这里边一刷新走,你是不是就过去了呀,来过去以后呢,哎发现什么了点是不是没了呀?诶它是不没了吗?诶来我们看看它是不是没了啊,我这一选中它一看这现在还看不出来这点,我们来现在它的marin是是零是吧,那我给它加一点。诶这点是没了吗?是不是给藏起来了,哎藏起来啊注意怎么操作,哎你你选中这个,你选中这个元素以后,可以看到这个元素当前的什么呀样式,诶然后你点这个样式,你想改不吗?直接按着方向键上是不是就大了呀,摁下是不是就就小了呀,诶通过这块可以可以什么呀,一边看一边就改了啊这块比较方便一点叭较方便一点,所以你会发现它这个点呢,并不是没了,而是给它藏里边了吧,诶藏里边了,那这我们要不要哎不要,所以我们需要把这点给它去掉,那怎么去呀?诶设置我们这个ul直接来什么呀,来一个点一个navy来一什么呀,List style来一个什么呀呐保存现在一刷新走,你这里点就没了,虽然跟刚才效果一样,我可以看一眼马甲,诶,再让打一下。
04:47
诶是不是没了,这就哎这就没了啊好,所以这里边是我们说的这么一个,哎,这么一个东西啊好,那现在这个导航条我们就有了,那接下来我们来看一个问题,什么问题呢?这个东西。
05:05
诶,那现在我来这样吧,我来把这个什么呀,NAV,我先把这写个注释啊,这是我们这个去除我们这个项目符号,然后下边我写一个干嘛呢,我来呀,那我们想想你看我这个,我先看看我这个n NAV整个是干嘛呢?它是多大个的,我需要干嘛呀,我看看我这个NAV,整个我这导航条,也就是整个我这个什么呀,Ul它在哪吧?诶所以这里边我先干一件事干嘛呢?为我们这个ul设置一个背景颜色,直接来一个background color,随便写一个井号,一个BFV保存,现在我这一刷新走你诶你发现什么了。我这帘是不是整个通的呀,哎,从头到尾就是说它现在是负元素的100%吧,为什么呀,块元素的默认宽度是不是就是负元素100%啊,诶但是我们来说,那实际上我们这东西用不用这么宽啊,我说不就这么们就这么个牌啊,哎,不用100%,而且真正这么宽了以后,实际上也也不好看,所以我们我们需要先干嘛,我是不是先给它设置一个这个宽度啊,哎,大家能这么自己做,其实宽度无所谓,咱们自己估分去就行了,我来设置一个什么呀,设置一个宽度,直接来一个这个什么呀,Y,咱们取个纸来个什么样,1000个像素保存我这一刷新,当然如果你要想准确点干嘛,你就量量它也行啊,量量它也行,或者直接右键查看源代码,看看样式也OK啊来,我这一刷新走,你这是不是窄了呀,窄了以后呢,又出现问题了,我还在干嘛呀,是不是居中啊,诶居中,所以这里边我们要设置它一个居中,设置我们这个元素居中来一个什么呀?Marin,诶零,然后来一个凹凸保存,现在一刷新走,你是。
06:44
居中了呀,诶,但是居中以后呢,其实这个位置也行,我们希望干嘛呀,稍微的往下再再挪挪啊,往下再挪挪,那比如说我怎么往下挪呀,我这儿再来一什么呀,50个像素保存这一刷新走,你是不是下来了,哎让他往下挪一下,好,那整个这个位置我们就给它定下来了,定下来位置,然后我们来看还有什么问题需要处理的,这里边是这个Li吧,你发现我这个Li一个一个还是什么的呀,竖着的,而你要是一个导航条,这字是不是横向导航条啊,所以那个是不是必须得横过来呀,那我怎么让这个LY在这个UI里边横着,诶那我们先说它为什么竖着宽元素吧,哎,框元素在文档里就是竖着,所以我希望它横过来干嘛呀,我是不是让它浮动啊,哎,他浮动让谁浮动,诶是不是让我们这个LY啊,哎LY,所以接下来我们来设置我们这个LY,设置LY直接来一个什么呀,直接就写吧,哎这或这样。
07:44
点NAV下边什么呀?L我来什么呢?来一个float,来一个问题来了,我是life的还是right呀?诶我们先说如果right有什么问题,如果right是不是都靠靠右浮啊,诶所以什么呀,新闻是不是会跑到最右边,哎不是首页会跑最右边,新闻是不是跑第二个呀?诶所以我一往向右浮发现什么了,顺序是不是反的呀?诶顺序是反的,所以这一块注意我们要干嘛呀,要向左浮动啊,向左浮动我这一保存,咱们来一刷新走你,诶好像有点不一样了,我一刷新没浮动之前背景在呢吧?来我让他浮动保存走你,哎,是不是背景没了呀?诶背景为啥没了?哎设置我们这个LY向左浮动,诶为什么高度没了,那我们来说我na,我这个背景是给我们这个NAV设置的吧,哎,这个NAV是谁呀,Ul。
08:44
OL里面的子元素是不是就这四个LY啊,好,那你现在让这四个LY全都浮动了,是不是导致我们子元素无法撑开负元素啊,那无法撑开它只有一个选择干嘛了?是不是高度塌了呀?高度一塌那背景还看见吗?哎,就看不见了,所以这是什么呀?高度塌陷的一个问题,那怎么解决呀?哎,是不是overflow hiddenda呀?诶overffaw hidden给谁设置啊?哎,给我们这个负元素ul来设置一个,诶来解决我们这个,诶高度塌陷直接来一个overflow,来一个hidden保存,现在一刷新走,你高是不是回来了?诶高度回来了诶那我们来说我这有没有兼容IE6啊,没有,那我们看看IE6行不行,直接IT打开复制一下。
09:32
他这好像就是用A6看A6。关了啊,诶没他竟然没他是吧?这臭标烟怎么又不他了?来,是不是over flow黑起作用了呀,来,我给去了,我这一刷新咱们再看走你诶还不塌他跟这个over flow黑的是不是还没有什么没有什么关系啊诶为什么不塌?我们先说说为什么不塌他一旦不塌就一定意味着我们给这个ul是不是开启了这个has死layout呀,哎,一定它不塌,一定是因为这个啊,一定是因为这个,那现在问题来了,我有没有设置zoo母呀,没有,那它怎么开的呢?来,关键问题在这。
10:21
哎,在我们这个IE6中啊,如果什么呢?如果为元素指定了一个宽度,则哎则会哎则则则则会默认开启什么呀?哎,Has死那子,所以注意指定宽度也是开启has layout的什么呀一种方式,所以为什么没它,因为我给它指定什么呀,指定了一个宽度,你看我把宽度去了啊注意啊,我们是高度它啊其实跟宽宽度没什么大关系,但是由于什么呀,开了宽设置宽度以后会开启什么呀?Has死料看着啊,我把宽度去了保存,看我火狐狸它不它没它吧,诶再看我们这个哎E1刷新是不是没了呀?哎没了啊所以关键问题是由于我给它设置一个宽度开启了has l啊has料好以后你们看到这问题呢,也是啊,可以自己去找一下原因啊,找一下原因好,那这设置完了,那我还用不用写字母了。
11:22
写北图行了,写上也不碍事,不写是不是也有外了,诶所以就直接来一个overflow跟着就OK了啊,高度就不会再塌下,好那这一块整完了,诶不看它了啊,我胡可是我们什么我们就不看了,那火狐这里边这个整完了,我们来看还有什么什么东西需要处理的呀,宽度也定了,内容也写完了,然后我们发现这个这个字这个距离是不是不对啊,我们这个字是不是应该,诶这个每个是不是都应该这么大个啊,那我们一共有几个链接四个,那每个链接应该相当于什么?哎,是不是占我们每占我们这个元素的这个1/4啊哎,元素1/4,那我们这个元素副元素多宽呀,1000诶1000,那每个元素应该都是多少?诶250,所以这里边我需要给我们这个什么呀,给我们谁是不是给我们这个Li指令一个宽度啊,但是问题就来了,这宽度我给Li指令好不好。
12:17
好不好,我们先试试啊,试试面积为我们这个lyi指定一个宽度,直接来一个Y,那我们说了每个ii是不是都占它负元素1/4啊哎,我可以写什么呀,百分之二二十五是不是就OK了呀,保存我这一刷新来走,你是不是开了呀?诶这样好不好?诶你要注意了,我们这里边可以点的只有谁,是不是只有超链接呀,那现在你看我鼠标移进去以后,移到这块能不能点不能点,为什么我这点的是谁呀?LY吧,我只有当鼠标移到这个这的时候是才能点呀,那么想想这样好不好,我整个一个按钮实际上是这么大个的,而我只有当什么呀,鼠标移到这儿的时候才能点,我们用户往往需要什么呀,你是不是一进就可以点呀,像我们这种效果,我是不是一到这就可以点了呀,不一定非得指到什么呀字上对吧,所以这个宽度我们给Li指令好不好不好,那我们。
13:17
应该给谁指令,是不是应该给这个超链接去指令啊,哎,我给超链接指令有什么好处,给超链接指令完了以后,这整个是不是都是超链接呀,也就意味着鼠标一进去以后,是不是整个都是可以去点的呀,诶可以点的啊,所以注意这个宽度我们应该指定给A,但是问题又来了,来点样一个NAV,我们来一个A,然后我这来什么呢?Y25%我不给L指定了,给A指定一个宽度,那我们现在这么写行不行,行不行,哎,不行,为什么A是内类元素,能不能设置宽度不能,所以设置之前我先要将A转换为块元素,块元素来一个第斯play来一个什么呀,Block,难道这样就行了吗?这样就行了吗?我们来看看啊,宽度我是不是设置25%啊,行不行,来我一刷新走你哎哟这字怎么竖着排着了,你就说现在我这A多宽呀,数计这么宽。
14:17
诶,25%,我1000的百分之二五不应该是二百五吗?这明显不是二百五是吧?什么原因啊,注意了,刚才我这个宽度是放在什么呀,Li里的,我在Li里,Li的25%是不是相当于它负元素25%啊,它负元速是NAV NAV NAV的宽度是1000,所以这的25%就是多少,就是250,但是当我把这个宽度放到了这个A里边了,那我注意了A的复元素是谁,是不是LY啊?哎,那问题就来了,我有没有给LY指定宽度,没有,那你这25%是不是相当于LY,你就没指定宽度啊,所以这还找着吗?找不着了啊,找不着了,而我们这LY的宽度是干嘛的呀?是被子元素撑开了吧,好,LY的宽度还干嘛呀,还找A呢,A,还干嘛呀,相对LY计算这一算是不是算乱了呀?诶他找谁呀?他找他,他找他,最后这宽度干嘛了,就算不出来了,所以这么写行不行?
15:17
不行,那怎么办?哎,你可以直接写什么呀,250像素是不行啊,哎,250像素或者可以怎么写啊,或者我可以这样写,给LY来一个Y25%,现在LY的宽度是不是负原度宽度啊,再给A来一什么呀?哎,100%是不是就OK了呀?哎,来一刷新。走你这回是不是就OK了呀,哎,这就OK了啊好,这样也可以,或者你直接就写一个什么呀,二百五也行啊,写一个二百五也行,好,那这一块我们就整完了,A的宽度也有了,然后来看还有什么这字是靠靠边啊,我们这个字实际上我这个字应该是居中的啊,字应该是居中的,所以这里我们来什么呢?来一个居中设置我们这个文字居中直接来一个TEXT1什么呀,按来一个什么呀,Center保存,现在一刷新走你是不是就居中了,居中完了以后呢,来再看再看什么这这这这条好像。
16:18
它是不是比我这个要要宽一些呀,哎,要宽一些,那所以现在我希望这个字是不是我也要宽高高一些是吧?哎,高一些,那现在怎么让它高一些,诶我可以给A指一个高度对吧?但是最简单的方式我可以干嘛呀?诶我上边加五个像素那边距,下边加五个像素那边距是不是自然而然就撑开了呀,哎,就撑开了啊所以这里边干嘛呢?我给A设置一个上下内边距直接来一个拍定,上下我各来一什么呢?来一个十,看看十可能会有点有点大是吧,上下十左右是不是零啊,哎,零我们看效果啊,先看看效果,一刷新有点大是吧,有点大咱们让它干嘛呢?窄一点来一个什么呀,五个像素我一保存一刷新是不是就OK了呀?诶好,这一块也设置完了,这设置完了,那接下来还有哪需要处理划下划线是吧?诶下划线咱们给它去掉,下划线咱们去掉,去除我们这个。
17:18
大滑下划线直接来一个叫做一个textor来个什么呀,No保存这一刷新走你不就没了呀,诶然后还有什么呀,字体字体应该没变化,这个应该是什么白色的是吧?字体颜色应该不对的是吧?诶这应该是白色的,而且还应该还有点什么呀,是不是加粗啊诶加粗所以这里边我们来设置一个字体颜色,设置我们这个字体颜色,颜色怎么设置哎,Color来一什么呀,哎袜井号直接来一个什么呀,白色的white哎然后还有一个什么呀,加粗哎设置我们这个加粗,那这个我还有没有必要用放了,有没有必要用简写属性了没有,我是不是就设置一个呀,哎,所以就直接来一个放外来什么呀,BOO1保存他们再来一刷新走,你是不是出来了呀,哎,白色加粗这么一个字体,然后还有哪啊是不是背景啊,哎,背景这个是一个蓝色,我们这还绿色的呢,而且我们这个背景是谁的呀。
18:19
是ul的吧,哎是ul的啊是ul的,那咱们来看这背景,我怎么设置背景我是不是其实简单,我是不是先把颜色获取到颜色我们来看是多少,怎么看呀,诶截图工具是吧?哎或者干嘛呢,直接用我们这个浏览器也可以看,点开它,然后有一个什么呀,开发者,开发者这有一个叫做诶取色器在这儿呢,诶取色器直接一点,我这一放在这儿,你看是不是6495ED啊,直接一点就给你干嘛了,复制了啊,直接点就复制了,然后把这颜色咱们给它,咱们可以干嘛呀。可以把它设置给ul是不是行啊,哎,Ul行,把这颜色给它粘过来,然后我这一保存,咱们再看一刷新走你是不过来了,哎,颜色就过来了啊好,那这一块就完事了,然后再来看还要什么,哎,当我鼠标移入的时候,它是不是要变,诶咱们这条好像比它那要要宽点是吧,但无所谓了,那我鼠标一移入以后是不是变成一个颜色呀,那这事简单呀,就是尾类啊,哎尾类来一个点一个NV下边的A哪个尾类,哎冒号power,我是不是只需要给它改变一下背景颜色呀?哎,比如说我就来一什么呀,红色哎红色来我这设置一个叫什么呢?设置我们这个A的一个鼠标移入的一个效果,来我这一保存,咱们再来看易刷新,诶到是那一刷新走你走你走你你变红了呀,但是咱们这红色有点什么呀,有点亮是不还是有点眼睛看着有点不舒服是吧,你看人家颜色。
19:53
得稍微能柔柔和一点是吧,要暗一点,那这个颜色什么颜色,我是不是需要获取一下这个颜色呀?那问题来了,这颜色我怎么获取来我们这个取色器行不行?开发者取色器,我取色器我过来是不是只能取这蓝色啊,这红色我获取着获获取不着,获取不着,这红色我得什么呀?得当我鼠标。
20:15
一入的时候才出来的吧,哎,等待我一入的才出来,而我这个一一开是不就没了呀,那我可以干嘛呀,最简单的方式查看源代码,选中它现在来看是不是这个背景颜色是这么颜色呀,当我移入的时候,你看走你是不是CC,然后四个零啊,哎就是一个C00吧,诶C00,所以这种方式呢,也可以看见以后直接改了叫什么呀,景C00是不是就行了呀?诶来我这一刷新来走你是不是颜色就有了呀?诶所以注意咱们这可以直接查看源代码,直直接看就行了,但是有一些情况干嘛呢?我们查询代码的时候干嘛呀,不方便,或者说你去做一些网,你做一些网页或者模在网上看到一些网页的时候干嘛呀,他这代码可能干嘛呀比较多,说白了你不好不好找,那这块怎么办呀,你可能还需要去干嘛呀,获取这个颜色怎么办呀?哎,你可以先把鼠标放在这,然后干嘛,哎截个图是不是也能看到,诶20400这么一个颜色也可以看到,还可以干嘛呢,那我现在想。
21:15
看到这个颜色我就希望什么呢?我是不是就希望我这个超链接一直保持一个鼠标一路的状态呀,哎,也就说他一直这个鼠标干嘛呢,一直就跟着,那这个事儿我们能不能做呢?能不能做呢?来那这个事儿得让谁来完成呢?让我们的这个浏览器来做,那怎么让做这个事儿呢?那首先我们希望什么,我们希望现在这个超链接一直保持一个什么呀,鼠标一热的状态吧,说白了就让它一直红着,即使我鼠标从这走了,你是不是也红着啊,那怎么办呢?来看着先来选中这个元素,我想让谁保持,是不是想让我这个超链接啊,所以先选中这个超链接,然后看这有一个什么样式,诶样式,然后往下一选,它是能选的,来看往下看,它有什么whole active false,是不是三个委类啊,那我们显示它保持什么呀?是不是保持whole啊,我直接一选走你什么效果了,它是一直都保持在whole状态了。
22:15
不管你鼠标过不过去,它都是一个什么呀,后边状态,这时候你可以干嘛了,非常安然的找到我们这个取色器,你跟着使劲晃它也没事是吧?来一移过去是不是CC4个零啊,一取就OK了啊,所以干嘛呢,可以让它去保持这么一个状态,包括我们后边包括active,包括fo都可以用它去保持,用完了再给它干嘛呀,点没了是不是就回来了,诶点没了就回来了啊,这是开发者工具的一种,诶使用方式啊,一定要用的非常的什么呀,熟悉啊,一定要用的非常熟悉,好那这里边呢,实际上这个练习呢,我们基本上就算什么了,完成了啊就完成了,所以这个练习呢,整体来说是比较的简单的叭,较简单的,但是以后我们做到一些滚动条这个什么呀,导航条基本的思路都是什么呀,都是这样的,诶那我们来说说我这东西它适用性好不好,现在我只有四个链接是吧呀,有一些情况干嘛呀。
23:07
哎,我可能干嘛呢,多点我有我说有八个了,诶那八个它什么效果,或者说能不能显示啊,哎,我这一刷新走你是不是也行啊,哎就干嘛了,是不是就换一行了呀?诶那我现在希望什么呢?我希望他不换行怎么办?哎现在宽度是25%,我让它干嘛呀,我再再窄一点是不是行了呀?哎再窄一点,现在是1/4,我让它变成什么呀?1/8是不是行了呀,我直接改这百分比,现在是25,我再来什么呀,12.5是不是行了呀,保存咱们再一刷新走,你是不是就过来了,哎,就过来了啊所以这块注意可以去调整它这个百分比,来调整我们这个链接的一个数量啊,连接一个数量,包括我们这个IE6这块一刷新,诶。哎。印刷新是不是也是没有问题的呀,啊,没有问题,当然这个字体我没有统一,IE6这好像还是什么呀,宋体呢,你可以都给它统一成微软雅黑啊微软雅黑好,那咱们这个导航条就算是做完了,这一块听明白了吗?还是比较简单的啊这而且代码干嘛呀,没几行了,诶全都是各种各样的什么呀,注释代码实际上没有几行啊好,我们这来停一下。
我来说两句