00:00
好,那么继续来上课,那么这节课呢,我们再来布局一下我们的这个页面的头部啊,那这回呢,我们就要做真正的布局,并且把这个样式添进来啊,那么像这个位置啊,这个位置你看这个粉色的位置,我说了后期我们会做一个班的对吧,那么会做一个幻灯片,那么等到我们后期做幻灯片的时候,我们再给它加上来,那这块呢,我们就只需要先给一个图片,给它做一个什么单位就可以了啊好了,咱们来看先去一点点分析啊,首先在我的这个头部里边。都会包含哪些东西啊,比如说在这块这是什么,你看它的整个背景啊,都是白色的对不对。然后中间有这么一个元素,然后这个元素里的内容是什么?居右的没错吧?哎,这是我们的第一部分,然后第二部分呢,在这里边又有一个元素,也是这么大,对吧?然后呢,它是什么?它是在这里边分为三块,这是一块对吧?然后这是一块,然后什么呀,这是一块是不是这样的?哎,那OK,我们先把这两块给它做出来啊,那咱们来看在这里边。我们去新建一个我们的页面啊,在这里边这些是我们做演示的,对吧?哎,我们就不再不再使用了啊,这个包括这个index我们也不用它了,直接我们自己重新做啊,那在这里面我们自己新建一个。
01:09
抽烟。叫做。H野低压head等啊,我们现在做头部,我就只做头部啊,只做头部,为什么这样呢?因为到后期啊,我们这些页面都是干嘛都是去引入的啊,像这个头到这块为止是一个公共部分啊,也就是说整个这一块为止是一个公共的部分,然后包括我们网站的底部,底部在这里边也是一个什么公共的部分,对吧?所以呢,我们给他单独的公共部分单独的拿出来啊,后期呢,我再教大家怎么去引入,那这样我们拆分的写就可以了啊,那么在海这里边,首先第一件事干嘛我们上引入啊。另一个标签引入我们C文件对吧,叫当前目录CSS下边的有一个叫做格罗卜全局的CSS,这是上节盒我们给它进行封装的,对吧,然后呢,在这里边我们有了这个CR文件以后,同样它头部是不是也有可能头部自己的样式,所以这里边C点这个叫做hier he1呀hier.CSS啊。
02:06
好了,这个hier呢,我们还没有,所以在这里面我们去新建一个H文件,就he DR hier.CSS。不是建议上门的啊。这个h he低还得点S好了,然后呢,在这里边我们一样啊,咱们来看。Hier里边我们看到有个div对吧,然后给它起个名,比如说叫做hi啊,那这个元素是一个满平宽的对吧,所以我给他一个class叫做W杠多少杠100是不是100%啊。对吧,然后呢,现在一样,我们先给他一个什么,先给他一个边框啊,先给我们看,我把不用的样式我们先关掉啊,DEMO啊这些是用的啊。然后我们给它加一个边框,叫做Bo。DR,对吧,好了,那现在我们先来看我们的样式。OK,有个满屏宽了对吧,然后在这满屏宽里面呢,还有一个。Div给它起个class,比如说这个叫什么呢?叫W-1200以及什么呀,M杠凹是不是让它自动啊,让它居中对吧?哎,让它居中以后那一样,在这里边它可能有一个背景颜色,哎有没有背景颜色,咱们来看一下。
03:17
没有都是白色对吧,那OK,那直接就是在这里边什么都不写,有一个什么,有一个A标签对吧,有个叫做登录。还有一个注册。好了。那现在我们再来看。刷新诶有了对吧,有了以后接下来呢,这个东西肯定我们要给他一些单独的设置,对不对,所以这里面我给他来一个he。注意这个是点开的对吧。我们先看一下啊,我记得我给他设置了一个什么样式类的。我们好像给他设置过一个字体吧。来,他有没有继承他的字体。
04:01
继承了对吧,继承了字体啊,但是这个颜色字体颜色我们没有是吧,字体颜色的话,那我一样,我在这个里边也给他加一个啊,叫做taste高不对,直接给他一个color啊,Color叫做井号。666啊,咱默认给的这个颜色,好了来刷新。没有反应对吧,因为什么它是A标签嘛,诶A标签里面是不识别这个。这个的我必须得直接给他加到A标签里面,对不对,所以在这块呢,我就给他一个通用的吧,来在这里边。啊,没有他是这个啊,来看一下这回呢。刷新,OK,这回改过来了对吧,改过来以后咱们得让他干嘛,让他居右对吧,居右的话,我们这里边是不是也设置过test center test red对吧,所以在hand这里边,我直接给了一个什么test。Red,这样的话,咱们再来看它是不是就已经靠到右边来了,对吧?哎,靠到右边来了好了,然后同样我给它加一个拍钮就可以了,所以在这个head这里边,我给它找到这个叫做点hader,我们给他干嘛呢?给他一个这个叫做pad拍点上下。
05:06
为实项数啊,左右为零项数,好了,现在我们再来看走你诶距离是不是就有了,哎,那好了,那顶部这个距离这个已经完事,那接下来是不是就底部这一块了,哎,那OK,那我们把它这个边框也给它去掉啊,在这里边我们加的这个包ER做调试了,给它去掉,去掉完以后,现在再来看刷新是不是没有了,没有了之后,接下来是底部这一块吧,底部这一块在这里边,再来下面那一块div一样,我们给它起个名字啊,先给它起个名字叫什么呢?叫做这个呃,Logo啊,叫做logo,然后在这里边呢,又会包含一个div,给了一个class,叫做logo,同样它的宽度是1200,对吧,然后它也需要干嘛进行居中。对吧,然后在这里面会分为三块,Div乘三,第一个里面装的什么是什么,一个image。一面积src。叫做当前目录img image下面的log go.png当然我还没有这个图片对吧,PNG,那么一会儿我再说啊,然后下面的中间这个呢,是我们的slogan对吧?那这里边我们给它起个class叫做s logn slogan,然后在最后呢,是我们的搜索,那就是直接class search把名字先起好对吧?然后这个呢是我们的logo,那我们已经有个叫class叫logo了,那我这个叫logo杠以是不装以面的地方,哎,好了,那后这块我们写完以后,现在我们先刷新页面,先看一下啊来刷新。
06:27
呃,没有显示。给他加一个包的啊。OK,有了。对吧,只是什么,我里面没有东西对不对,这个包的这个外层还有一个包子来给他再加一个。其实它不应该加报,它应该加什么,是不是应该加一个它有个背景对吧,叫BA啊,这是ID里面,不行,我们得给class里面啊BACKF7,这是不是它的背景颜色对吧?来刷新,你看整行的背景颜色已经有了,对吧?然后呢,这里边呢,这里边我就给他一个这个包,呃,包了啊。
07:05
刷新OK,报道也有了,好,那接下来我们要往里面填充内容的话,我就需要去找一下。在这里边把他的这个面图片啊,我都拿到我们的目录里面来。好发过来图片有了,那这个时候我们再来刷新诶。在这呢,对吧,那OK了,OK以后接下来呢,图片不可能是这么大的,对吧,我们肯定给图片进行一个什么相应的缩放嘛,对不对,所以在这个里边我们给图片进行设置一下啊,这里边。叫做。Logo的,呃,点log go logo1,比如说给他宽度,我给他直接定好200小数啊,给他一个200的,或者给他小点吗,150。一百五啊,一百五像素那一样,那它里边呢,它里边的这个logo-image是不是也就是一。这些啊,如果刚。里边的以妹积,它的宽度就应该怎么是就100%对吧,那一样,它这里面100%,其实我们已经写过了,对不对,所以我只需要给它外层设置就好了,那对于在里层里边,也就在这里边这个class,我是不是可以加一个加一个什么,加一个这个。
08:13
CS class加一个什么,加一个W-100是不是100%啊,哎,只给外形限制好就可以了,那现在你再来看刷新,诶是不是缩小了,哎,好了,它缩小以后,那么接下来还有什么,还有我的这个slogan吧。Slogan这里边看好了,Slogan这里面在这儿CTRLC,我们再拿到这里边来啊,给他一个slogan的slogan的宽度,我们比如说给一个多少,给他一个300啊,然后高度。高度多少我们也不知道对吧,高度。给他一个。不给了啊,反正咱也不能高度对吧,因为咱没量嘛啊,没量咱不能高度,咱就不管了,不管以后咱注意16个这里面咱们看啊,你看人家这里边写的。写了这么两行内容对吧?哎,一个主标题一个副标题对吧,那OK,那这里边我们就直接给它加上来啊,在这里边把这个slogan给它加上来,一个P标签,就是这个给它起个class叫什么叫做这个,呃,SLG slogan-T,嗯,叫做在。
09:15
工作中学习。在。学习中,工作好了。这是一个副标题,这里面还有一个指标题,再来一个第二,嗯,叫做slo slogan slogan里边的ST子标题啊好了,子标题里面看这里面它写的是什么,写的是。这个是。Learning to work和work to learning啊。好了,行,就给它放到这吧,啊,然后student in work work in student对吧,好了。OK,在这块了,对吧,然后再往下来还有什么,还有它的这个搜索区域吧,最后这边来再来看啊,最这边是不是一个搜索区域,哎,搜索区域现在我们可以往里面直接补代码,也可以等会儿再补都行啊,那我现在就补了啊,在这里边有什么,咱们来看一下啊,搜索这里边。
10:12
这是一个下面是不是还有个div啊,对吧,也就是说在这里边我再给他加一啊,不用加也行,也差不多够了啊div这里边给他一个什么关键字叫做什么叫做这个logo里边的keywords关键字啊。WRDS。那比如这里面有什么热门搜索。热搜对吧,比如PP。PP。我看看这里边我是怎么给的啊,带不带A标签,这都带A标签的对不对,到A标签的啊,那OK带标签的,那这里边我肯定是应该怎么应该是加上每一个A标签,那最外头这个咱们给个态标签啊。是拍标签,然后这里面开始A标签,第一个我们比如说web全在。
11:06
外部存在,然后再来A标签有PP。A标签有何德莫勒?A,标签有CSS好了,比如给这些啊,现在我们来看我们自己的页面。来吧,刷新,OK,所有东西都过来了,对吧,但是这个放表单里的东西我们还没写呢吧,也就是说在这里边放这里边我们是不是应该也给他一个什么,给他一个input test对吧?啊,一个搜索的一个文本域对吧?然后后面有个搜索的按钮,那就是input,然后点击搜索好了,现在咱们来看这个页面,我们基本上已经把头部诶点错了啊。手机好了,头部是不是就写完了,写完以后最终这些东西是不是都是浮动的,对吧,那都是浮动的,好我先让它都浮动啊,那也就说第一个。
12:00
来再给它缩小一下啊。第一个图片呢,三是浮动的,给他一个F。是叫FL对吧,这个呢也让他FL,然后最后尾这个给他一个F2。好了,现在咱们来看。是不是都浮动上来了,哎,怎么了点成他了。刷新看是不是都浮动到镜头上来了,对吧,但是注意一旦浮动以后,它的复原数是不是感知不到里面的高度了。哎,所以这个时候我们要负元素感知高度的话怎么办?我可以在这里边给它设置一个叫什么负元素,谁负元素是不是叫做,嗯。Borderer是不是给了他对吧,叫做点logo啊,那OK,在这里面的点logo我们还没用到啊,那就是直接在里面设置点logo,给他一个什么logo给他一个叫做。叫叫什么呢?叫o VR overflow为hidden,原来自动感知高度对吧?但自动感知的高度这个我们设没设入过overflow等于hidden呢,我们要看一下啊,如果设置了我们就肯定不再写了,对吧?那OK,在这里边我们没设置过overflow,看到了吧。
13:11
是吧,哎,没有overlo head,那OK,那我在这里面自己设置了啊好了,那设置完以后,现在再来看负类是不是就可以感知子类的高度了,哎,可以感知以后一样,我再给负类做一个什么,做一个填充啊叫什么呢?叫做拍顶的填充啊paddd拍顶上下为20左右为零。再来OK,高度有了对吧,有了以后接下来呢,咱说了这两个文字之间,这个内容和他俩之间还是有一些距离的,对吧,所以在图片的这里边,我应该也给他做一个填充对吧?那图片这个一百五这里边,我同样也给他一个padd拍丁。或者是marin也行啊,咱给先给个pading吧,Pading-right给他30像素啊,30像素,那这个时候你看我再来刷新的时候是不是过来了,对吧?哎,那同样我可以给他再高点,比如说50。
14:00
走,你是不是过来了,哎,过来以后这里边咱们有一条线对吧,那就给了一个border right EPS so lib,井号CDC。有一天变现。哎,在这。对吧,那么有了这个边线以后,这个文字是不是距离电线是不是还要有一段距离,也就是说这个slogan这里面啊,它的宽度给他300了,那我一样给他一个pading-left,比如说我给了30像素。刷新好了,是不是过来了,过来以后这里面由于我们没有给的高度,对吧,那咱们可以看一下图片,这个高度我们是多少啊,是不是这个70对吧,刚才我不知道大家有没有看到啊,你看。鼠标放哪是不是一百五乘70.5啊,那就70呗,对不对,那也可以说我在这里边直接给它一个高度叫多少呢为70像素好了,那这里边我们来看啊Bo burd包一像素实现的红色,我们来看这个slogan这款。来是不是在这里,哎,在这里一样啊,我也可以给他一个马膏。
15:00
十像数。让它再有点儿距离对吧,当然我们没我是没有按照这个去量,要不正常,我们应该怎么,是不是可以按照这个去量啊,你像设计师给我们的这个。设计图都是什么,都是有尺寸的对吧?里面告诉你这个高度多高啊,然后这个宽度多宽,都是有这个尺寸,所以我们可以拿尺子量对吧?那么现在这块没有设计师,那我们直接照着做就可以了啊完了,那这块完事以后,接下来呢?接下来什么就是这个文字是不是在这里边要想居中啊,对吧,那咱咱这里边肯定没办法居中,你不能给他设置拉head,如果设置,因为这里面是两个标签,你要给他设置拉head,它两个都拉head了,明白吧,你看比如说在这里边啊呃。在这里边咱是两个P标签对吧,P标签一个叫title,一个叫这个,是不是这两样,哎,那你看比如说我给slogan这里面直接我给他一个。来。害多少拉,害70的话啊,直接给拉70的话啊,你看小心。看到了吗?下面这个元素是不是没有了,为什么?因为它超出部分隐藏了啊,所以不能这么去写明白吧,那这个时候怎么办呢?其实这些我都可以不要了,高度我也不要,既然一直没给,咱们就一直都不给了,对吧?现在他始终是这样,那我是不是让他往下顶一些就可以了,比如说给那个j marin-top,比如说你距离320像素。
16:15
那你再来看下来是不是下来了对吧,下来以后这个时候红色边框咱就可以干嘛不要了。不要了。刷新是没有了,哎,然后咱们把它这个标题,我们可以改变它的字体颜色,对吧,标题叫做slogan。黑头比把它的这个颜色color变成井号C,不对,井号000变成黑色。是变成黑色了,然后可以给他一个form down,这个位置为B加粗。都加速了,哎,而这个指标题呢,指标题依然是变成灰色,这是没问题的,而且但是呢,它要有一个距离对不对,所以它要有距离的话,那咱再找到这个指标题叫做点。Sub me对吧,给他一个PA left,比如说20像素是不是也可以来走,你你看是不是就缩进过来了,对不对,哎,20像素少的话,40。
17:07
四。40好,这个时候再过来是不是就OK了,对吧,那你看也就这个。是不是也这样的,只是它的这个文字没有改颜色对不对?而这个副标题更小了一些是不是,而我这两个标题呢,差不多大小对吧?那比如说这也一样,我的这个标题我可以干嘛呀?方杠size我默认是14对吧?我给他16PS好了,让它大一些不就好了吗?找你啊。是不是大一些了,哎,那OK,那这块是不是搞定了,这块搞定以后,那这个加粗我感觉不太好看啊,咱们可以给它去掉。好了,那这块完事以后,接下来是不是就是这边了,也是最后搜索这块的内容了,对吧?这块内容呢,是比较复杂的了,那这块怎么办?我们先来再回过来,先看一下啊,搜索的结构在这里边找到我们的search,也就所有的都在search里面,Search里边有个form,有个div,对吗?那么咱们先具备它两个打印下来啊,这里边叫做s SE search。
18:03
先给他一个BDR包着一像素实现的红色边框。在这它应该是多大,它的宽度WDTH。看到了我们给他一个500,这是没问题的,你看啊,为什么,因为这是500,然后他的上一个是300加起800 800加一百五还是950,对不对,而我总共多大啊,我总共的话是一千二对不对,所以这里边来刷新一下,你看它是不是往这里面来了,哎,那我们要看一下它实际上,因为实际上我们用不到这么大对不对,我们要看它是吧,它这里边是不是一个,诶有顶格吗?没有顶格对吧。哎,注意它没有顶格啊,所以它有宽度吗?就相当于这里边没给的宽度是一样啊,那我们就要把它宽度给它干嘛去掉啊,把这宽度给它去掉,因为现在不用对吧,但是咱们可以给他一个拍顶,拍顶三下左右为20,然后这个时候我们再来看啊。走你诶是不是这样的一个效果。对吧,那有了这样的效果以后,接下来呢,咱们就是给他设置这些样式是不是就行了,先设置它的这个搜索吧,对不对,那先设搜索,也就是这个点设置里边的。
19:05
Form标签for对吧,Form里边有一个input的标签叫什么呢?叫做taste等于,不对,是type等于T的这个家伙,那干嘛呢,我们来设置它,比如说它的这个宽度啊,我给他设置一个200。啊,咱先随便给啊,你看来刷新诶变高了对吧,然后它的这个边框我们给它取消,掉包的V取消。看边框是不是就没有了,然后背景颜色咱是不是也得要这个颜色,所以这里面继续给它加一个background为F7。搞定看出来了对吧,只有选择才能看出来啊,然后在这块呢,我们也可以给他一个提示啊,那在这里面提示我,我给先教给大家一个,我们可以用另外一个叫什么呢?叫做police ho也可以啊,或者在这里面直接给他一个value,比如说叫做请您输入请。输入搜索内容啊,就输入搜索内容来你看。
20:02
刷新是不是有请输入授索内容啊,对吧,但这个你必须得删掉啊,所以呢,我们尽量不用它做提示,用另外一个属性是H5中新增的,那么叫做呢pol。低压please hoer这个属性啊,这个属性到后期我还会单独给大家再讲啊,所以现在我们先记得就可以了,来你看放心。在这呢,对吧,你正常写这是没问题了,看到了吧,哎,好了,然后呢,他还需要什么,有个下边线对吧,所以在这里边我们直接给它设置它的下边线就可以了,也就是它的这个BD包杠botd杠。Bo Bo To Bottom等于什么呢?等于EPS sod,这叫井号CCCC,一个灰色。OK,有了这么一条变线了,对吧,咱们看您原来的变线什么颜色,黑色的是吧,那OK,我们也在这里边也给他一下叫井号000好了,然后给它加一个拍顶pad上下左右都为十像数。这回再来看。
21:01
走你没问题对吧,那下边的话我们就不要了,上边应该有啊,嗯,下面不要,那就是上边为十左右为十,然后下边为零,这个时候你再来看。走,你。哎,不是,这不是我们的啊。好,这是我们的对吧,但好像有点太近了是不是。太近了啊,给他一个。五吧,这个也为五吧。OK,好了,有了对吧,输入内容咱就正常在里边输入就可以了,那好了,那这一块的东西完事以后,接下来是不是就是我们搜索的这个按钮的调整了,那搜索我们开始给它设置一下,也就是在点设这里边呢,Form,这里边input搜索了什么叫做type等于sub me的这个加号,它的宽度,比如说给他100像素,高度呢,我们给他40像素,好吧,那这个时候我们来看。
22:00
走你诶大了对吧,哎,但是我给这个100的话,有点也太大了啊,140咱给他35吧,啊,然后这个宽度咱给他80别太大是吧。走你你看是不是这样的,哎,那这样的话以后他注意你看他们两个之间啊。是没有距离的,看到了吗?是不是紧挨着的,哎,所以我们这里边也要给它做到什么紧挨的,那怎么办?Gin妈金刚。Right对吧,让他照这边干嘛呀,进行,比如说money left吧,来left,比如说负10PX是不是往左边移动呢?那你看这个时候它能不能往左边移动,诶是不是移动了,哎,那移动完以后,因为它整个的这个宽高啊,我们给它设置的,所以它不行啊,我们怎么办,就不能给他设置这样的框高啊,因为给他设置框高以后,它不能像我们那样去显示啊,所以这里边我们再给它。重新还原回来,还原回来以后现在是这样的,那接下来干嘛,是不是就给它加宽加高对吧,那加宽加高,那这个时候怎么加,我们用拍顶来给它加,比如说PID拍顶上下为十。
23:08
左右为20,好,这个时候我们再来看。走,你。这回是不是可以了,对吧?哎,大也一样的,大写的,但是上下为十的话,它应该是大了啊,那我们给它上下为五。没问题对吧,那没问题一样,这里面稍微会出去这么一点点,所以我也可以跟他们进行再调整一下艾美妈精。杠margin,杠top对吧,让它负10PX。当然负值可能大,应该负八左右差不多。中。有用吗?好像是没什么用是吧,看这里边。Top。是不是在这给他加加加加。负多少都没用,看到了吧。喝了吧,哎,付多少都没用啊,那怎么办?那这样的话是不是就是我调整不了它了,那我们可以换一个你妈top现在不行对不对,那咱来看这里面还有什么,还有这个包,再往下是不是还有他呢?我给他,比如说我给他一个10KX。
24:09
走,你。但是他顶下来了对吧,一样,他始终是不挪啊,那他不挪的话有没有别的办法呀。你不一定非要说死死盯到这个它顶跟八角去做对不对,我们也可以干嘛证明浮不是浮动用定位是不是也行啊哎,那要定位的话,那它的这个负元素,负元素谁负元素咱们随便找一个吧。我这不用不用绝对定位,就相对定位就可以了,对吧,这里面全是相对定位了啊POI等于对吧,然后top。干嘛呀,放上负五加速是不是就可以了,对吧,那这八套咱也不需要了啊,因为它根本移动不下来,对不对,来这里边。小七是不是上来了对吧,当然负五它上来大了,那我不能这么调了,咱可以这么样,通过什么非常大的这个工具来去帮我们去调整,你看现在负五它是大了,对吧,往上零。那你看。
25:02
嗯,这里啊。嗯。来一。哦。二三。不行啊,零负一负二负三负四。负五负四吧,来就上去了,是不是得负三了,哎,这个他这个这个这个叫什么谷歌的浏览器,这不好调啊,你给他一调,他直接给我变回来,来给他一个负三。自己手动调吧,分三。负三也是上去了对吧,诶这里面怎么。负三。这里面再自己改代码吧,负三。拿到我们这里边来再来看一下啊。过来。差不多对吧,那再往下来一个,那给他负二。OK,这回在一条线上对吧,那同样这个边框我也可以,你看它这个边框是灰色的对不对,所以这个边框我也可以干嘛呢?第一我现在取消了,或者我直接不取消了,实现的这个什么呀,井号C对C咱们也给他灰色。
26:14
然后这个时候你再来看走,你是不是也是灰色边框。对吧,但是一样你灰色边框肯定配这个灰色的这个边线对吧,而它这个是什么颜色啊。他的这个是来so选取一下啊。你看。它的这个线的颜色000没错对吧,而边框的颜色。CDC看到了吗?哎,确实是两个颜色啊,一个000,一个CDC啊,那我们也给它换回来啊,这个是000。这个是CDC,哎,我们也是00CC,那没问题了。没问题对吧,那接下来就什么,就是它这个位置的问题了,他在摆这个下边线,咱给它盖住是不是,所以这里边那怎么办?Top这里边我基本那就不移动了,就算它下来对吧。
27:02
哎,这边再来看。好像还不行哦。泡泡,来个负一吧。负一吧。这回差不多啊。啊,可能是它的高度还会小一些啊,所以这里面拍顶上下为六。这能增高一些。来,这位再看。OK,没问题了,然后负一你也别负一了。走,你。上下为六哦,上下为七。好,再来点。还得行,V7也可以对吧,咱买负一能再往上一点点。来刷新一下,OK,这个时候再来看好了,这个差不多了是吧?哎,也就是说当我在这里面输入内容,因为它每个浏览器显示的效果也不一样啊,只是在这个。谷歌里边当我一点进去选中的它会有这么一,一个黑色的这么一个边框啊,其他的他也不会,当然这个位置不好看的话,我们可以再继续调一调,比如说二二的话,这里边我也给它减一下,让它为六啊,为六这个为十可能大了啊,让它为就是挨着就行了,未必非要让它重叠啊。
28:13
好了,你看这个时候是不是就可以了,对不对,哎,好了,那这块完事以后,接下来做底下的热搜对吧,那热搜的话其实没什么可说,就是把这个呃,搜索的关键字我们给它变小一点就可以了,对吧?那。我们来看一下这里面搜索的关键字啊,叫做呃,Logo keywords,这里面的A标签啊。那你说在这块里边的logo keyword里边的这个A标签,我让他的放杠size为多少,为这个12PX。好,这个时候我们再来看。走你OK,变少了对吧,哎,热搜在这里面也有了,那你再来看原有了也没问题对吧?哎,只是他们两个的这两个,这两个对的对,两个对的没对上是不是,而我们这里个是什么没给他这个缩进啊,我们可以给的也可以给一个,比如在这里边,嗯,叫做点logo。
29:04
Keyword给它里面加一个pading杠,Left左侧的内间距,左侧间距咱们之前给多少了呢?好像给的是十吧,是吧,咱们也给他一个十,那你看再来不是这个页面啊,我们自己这个页面来刷新。五吗?再早一点。五。刷新OK,这个差不多了吧,哎,五六都可以啊,五六都可以,比如说给六也可以啊六七。这一项数那就看不出,看不出它太大了,对吧,来这是不是就没问题了,哎,它没有问题,以后接下来呢,我们就要把这个边框,各个的边框我们都给它去掉,那找到所有的边框。配置颜色的边框不要了,然后再往上还有没有了。这不是。哎。没有边框了吗?没有了,那看这里边我们有没有给他加包的啊。
30:00
找一下我们的报表,这里边有一个对吧,给它去掉好了,那现在我们的头部这一块是不是就搞定了,哎,那头部搞定完以后,接下来我们再来看。这个这块内容还剩最后这块这块内容对吧,也就是我们的这个二级导航,那么二级导航呢,我们也先来划分一下,也就是说它的最外层肯定是有一个。满屏框的div,然后呢,中间有一个div,它是什么居中的,然后在这里面开始去编写它的内容,对吧?那OK,咱们先去写出来它的效果啊。好了,在最下边,最下边这里边开始给他一个注释啊,叫做。NV导航。导航啊,然后给了一个div,叫井号NAV。NAV,然后在这里边它会包含一个NAV,叫做呃,Class吧,就叫NAV了啊,然后这里边我们同样给了个class class它是满平宽的,所以宽度是100%,然后它的背景颜色呢,应该有一个叫back orange,给个这个颜色对吧,它它是深色吧,啊行,橙色就橙色吧,那一会这里面的变成深色是吧。
31:12
然后在这里面呢,我们开始给他ul里面的Li Li里面的A,这叫做首页,首页完了后,CTRLCCVVV,然后还有什么这个,第二个叫编程系列是吧,编程系列然后还有这个。呃,国内。希文。还有。游戏系列和明星娱乐啊,游戏系列以及明星娱乐。娱乐好了,那写完这些,这些都是一级导航,那我们先不管它,然后这个时候我们来看在这里边刷新。OK,已经有了,有了以后,现在咱们开始来给它进行设置,也就是说我要找到这个NV对吧,那也就是在这里边我们的点。
32:00
嗯。AV给他干嘛呢?给它设置这些样式对吧,和它里边的ul Li设的样式,然后这个V呢,我们也要给它设置一个宽度,宽度应该是1200,然后让它干嘛居中对吧,那现在我们再来刷新。OK,居中了啊,宽度1200也没有问题了,然后在这里边我们去设置一下,叫做点AV nv里边的我们点一下呢,这个横排屏这个排列下来对吧,也就是AV里边的UL里面的Li,让它里边的所有的Li再给他一个A吧,里面的A。啊,这里面我涉没涉及到A,我们看一下我写不写A啊,写了啊。里面的A给他一个。Float left啊,好了,让它进行右浮动,全部浮动完毕以后,注意浮并浮动完毕以后,上面的元素是不是感知不到里边的高度了,注意这里边的NAV,我给它设置一个什么呢?叫做over o v overflow等于hidden啊,我先给它设置,当然这个设置肯定是不行的啊,因为一旦设置完以后,它的二级导航是不会出现的,一会回来还得调这块,但是现在目前为止,为了先让大家看样式,我们现是这么给他设置的啊。
33:10
好了,然后再往下来呢,这里面还有什么,设置完A以后,开始给它继续拍点,我让它上下为十像素,左右为20像素或左右为40也行啊,开始去让它类似于居中的效果,对吧?然后每个文字给它变成白色,那直接给他一个color Co给他白色。好了,然后再给它进行一个加粗设置front-with,然后build。最后我们导航一级导航已经搞定了,一级导航搞定之后,接下来是不是二级导航,二级导航要注意,我们是鼠标放上来以后才会显示它的二级导航,对吧?那也就是说包括这里边你看我的每一个一级导航是不是默认第一个显示的是什么,这个有这个背景色,剩下的每一个鼠标移动上是不是才有背景色,那我们直接把这个效果做出来啊,默认第一个Li,也就是说在这里边我们没学过其他选择器,只能去定位它的样式啊,Class叫active。
34:07
然后在这块也就是一样,我就直接点a around,它的颜色应该是dark dark dark,大杠,Orange,深色。哎,你看刷新。有没有变化是吧,我们看一下选中这个。A标签,A标签有没有变化,有是吧?我应该给谁给的是Li Li的高度,你要注意Li的高度是不是也没有啊,Li的高度是多少,是不是也为零了,你看这里面是不是也为零,因为什么?因为A浮动了,Li并没有浮动,所以这里边呢,我再给它Li也浮动一下啊NAV。里边uli里边Li,好了,给他一个float left,这个时候它就会有这个高度了啊刷新OK变了对吧,然后再往下来呢。它变完以后剩下的什么,剩下就是呃,点AV里边u Li里边的Li冒号号,当鼠标ho啊,当鼠标移动上来的时候。
35:06
我让所有的背景颜色B。B,让当前的这个背景颜色也变换好。现在我们来看一下。刷新一下。走你没问题对吧,OK好了以后呢,接下来就是鼠标放到这儿以后,然后再往下来。然后。看一下二级导航在这块。这块里边我们继续要给他u Li,然后Li,然后再来一个,比如说有什么有这个PHP,比如说有HTML。也一天教程。喂。教程,然后。教程还打不出来了。教程好了,看就CVVVVOK给那么几个啊,好了,现在我们再来刷新,咱们来看再看下边是不是就有这一些了,哎,有这一个以后呢,接下来也一样,我们开始去调整它就可以了啊,那首先这个ul一定不能再为人家原来这个物物理位置对不对,你不可能把这个副类拉的这么高,所以我们需要干嘛呢?在这里面就去叫做AV。
36:17
一定要把这个关系找好,ULUL里面Li Li里面才会带有ul,对吧,给它做一个什么,做一个position POI position等于阿8LO的,让它绝对定位,绝对定位以后,这个时候咱们看这就不会占据原有物理位置了,哎,不会占据原有物理位置以后,接下来我们再给它进行设置啊,比如说这里边NV。NAV里边,Ul里边,Li里边的ul这里边的这个。呃,谁呀,比如说给个Li吧啊,我给Li设置这是什么设置pad上下为十左右为40吧,我们刚才给的是不是40。好了。刷新。你看这回是不是就过来了,过来以后一按它的背景颜色继续给它加B,叫做。
37:04
还是他对吧,神仙的变换。OK,搞定,搞定完以后他得下来吧,所以它在定位的时候,他的top距离上面给了一个40像素。让他先下来。呃呃呃呃,不行,看到了吧,我以谁为准了,是不是以上面这个为准了,哎,所以这个时候我要想给他做定位的话,我需要让它的父类也做一个定位,对吧,那在副类在这里面给它副类做一个p s position。一个相对定位对吧,子类才能做绝对定位来好了,这个是不是过来了,过来以后注意啊,没有了,为什么没有,因为这个父类这个叫什么,这个最外层这个我是不是给了一个,当时我说了,我给了一个这个家伙对吧,给了他以后啊,他就敢。就是超出的部分就都会隐藏了,现在不给他,你看是不是就显示了对吧,但是它整个没有高度了啊,它整个没有高度了,所以这里边怎么办?我们可以给它设置一个高度he,比如说高度为40。
38:04
好吧,是不是回来了,回来以后这些一切都是什么正常的吧?哎,正常以后呢,这里面的东西我们也可以调整,你看好了,这里边内容就这么大,看到了吧,然后。看转换成Li Li在这呢,Li这里面你看拍顶十左右为40,是不是有点大呀。给的小一点是吧,我们一会给的小一点啊,我们去找一下在里边的I拍点十左右为30万啊。再来刷新。好了。这回是不是就没问题了,都在这一行上来了啊,都在这一行上来以后,那一样,这个里面还有一个这个A标签,我们把A标签也设置一下吧,这个NV里边u Li里面Liu Li在里面的Li里边的A,我给A也给他一些这个样式啊。来找到这个A,首先它的字体颜色应该是什么?应该是白色的,现在。
39:00
刷新没问题,字体颜色白色对吧,然后呢,它的颜色不应该是这个,它应该是个淡色是吧,所以它的背景颜色应该是orange,不应该加他。好了这个对了,然后鼠标移动的时候,它再变这个颜色对不对,那先等会再说啊,注意看这两边,我想给它距离稍微调大一点啊,所以这里边我们再给它一个拍点,我给A标签也加一个拍点,上下左右都上下为。都三组都为十吧。走,你。好了。大大了以后,但是它文字是不行的,对吧,所以这里边我为了让它文字能进来,那我这里面的二级导航文,那自己变成小点吧,来放到个fo放的杠size变成12小数。为了自己变小一些。变小也收不回来。标签说不回来对吧,因为它这里面的大小际上大小就是这么大啊,因为我们这个顶层的文字是四个,你底下的这些,你看我HTML加上这个教程,它实际上就多一个了,对不对,所以这里面尽量我们给它少一个啊,比如说你像你像我,我给他换一个啊,比如说叫CSSCSS教程。
40:10
这也叫CSS教程啊,要想对齐的话,那没办法,必须是这样的,除非你不对齐,如果不用对齐对吧,那这没问题,那你看刷新我给换成CS教程,你看它是不是都在一行上了,看到了吧,哎,这就没有问题了,但是你要用H教程的话,因为它文字多啊,然后呢,你要用CS教程的话呢,比如说这里面。我就不需要PA定是他了,而是判定直接事实就可以了,这个判定我也不需要了,看到了吗?然后这里边我们再来刷新一下。你看它跟的负类。哎,没也没一边宽是吧。我看我刚才给的是谁啊。30。十和40,因为他文字还是啊,没有我把什么把字体给他缩小了是吧,别给他缩小。好了,这回你看跟它分类是不是差不多了,哎,然后在这里边一样,里边的子类叫做AV里面的Li,我看一下啊,我们给了一个Li NAV UR里的Li号,这里面不要给它大大于号,只要是UR里的Li,鼠标移动都变换颜色,那你看这个时候我的这个二级类是不是也可以变换了啊。
41:17
这里面是不是也可以了,对吧?那接下来什么它得是什么隐藏的吧,那也就是在我的这个ul这里边,我们要给它加一个this play为N,呃,隐隐藏什么时候显示呢?鼠标放来显示对吧?所以点V里边u Li里边的Li冒号号,当放到它这里边的时候,我应该让它里边的ul进行display为block block显示。这个时候再来刷新,OK,隐藏掉了,鼠标放放显示了对吧,那其他的没有,那其他的要要有的话,我只需要把这段代码你哪个需要,我是不是加到哪个里面就行了,比如说国内新闻,这个就不是国内叫什么游戏,呃游戏系列需要,那我就直接把它加一个游戏系列,然后这个时候再来刷新,你看啊,这里面有放没问题,这里边没有对吧?这里边有没问题,这里面没有对吧,是不是不是谁有谁就用了,然后。
42:07
这是我们头部的所有内容,那在这里面头部是不是还有一个最后一部分广告的站位啊,那广告占位就不用说了,现在我们没有对吧,所以在这里边我直接再给他一个div。叫做。广告。三位对吧,直接给它一个div,比如说给它起一个名字叫ID,等于banner的啊,这个位置我们要放banner,然后呢,在BABA。N一样,然后给它class,它的宽度也一样是1200,然后M让它自动对吧,但是它有个背景颜色吧,那我们一样在这里面给它设置一下啊,找到这一块,然后给他设置一个叫井号它的,然后它需要一个宽度已经有了高度,我们随便给一个,比如说给他这个三百四百吧,400像素,然后B给他一个pink粉色。
43:03
好了。这回再来看揍你。单位有了对吧,鼠标放放这都没问题了。可到了也不会去影响到下面的元素啊,那三四百可能太高了,那我就给他300小一点,这个始终就是因为它就是保持占位的嘛,对不对,那OK,那现在咱们看我这个首页的顶部是不是已经搞定了,哎,那顶部搞定了,接下来咱们说了,我们把这个页面拆分啊,头部就是头部的,尾部就是尾部了,对吧,然后中间是中间的,那么接下来呢,我们再去做什么,做我们的这个尾部的这段内容啊好了,那这节。
我来说两句