00:00
好,我们继续来上课,那么上节课呢,我们介绍完我们定位属性以后,那么这节课呢,我们再来通过我们的定位属性来做一个这个实例,也就是我们百度登录的这种效果,对吧?那么百度登录这效果,咱们看了它背景啊,是有一个遮罩的对吧,它有一个透明层,然后呢,在透明层的上边又有这么一个元素,没错吧,所以在这里边我们也去做这么样的一个效果啊来比如说在这儿我们新建一个。这牌文件啊叫做零五啊叫做这个定位练习。定位练习。百度登录效果。好了,那么在这里面呢,我们还会介绍一个新的属性,就是在csi这三中新的属性啊,那比如说咱们先看啊,我先去给他布局一下啊,比如说在这里边,呃,我们有一个这么一个。呃,给个什么呢?给个div吧啊,也给div啊,然后div呢这块呢,我们给它起个名叫做ID,等于top,这是我们的顶部对吧,然后里边有一些A标签啊,比如说HTTPS斜线3W点这个 eduk.cn叫做融资教育,融值教育,首先我们得让他点不了对不对,现在呢,他肯定是可以点的啊,然后我可以给他一个。
01:14
他给他跳转的方式。好了,咱们来看,我来刷新页面。来看这回现在点它是不是可以做跳转的,对不对,那我给它关掉啊,我要的是咱们点它是不能跳转的,对不对,所以在它上面会有一个这么一个遮罩层啊,比如说div这里面给它来个。ID等于什么mark mark啊好了,那这个遮绕成我要开始对它进行什么进行设置了,对吧,比如说style标签,然后我们要设置谁呢?井号mark你要怎么设置呢?它的宽度,宽度吧,宽度是不是满屏宽100%宽的对不对?哎,我也可以给他什么呢?100叫做VW啊这个VW是什么意思呢。这是我们CS3中新增的这个属性啊,这里边叫做VW表示什么意思,表示的是这个。
02:00
可是。区域的。宽度啊,可视区域宽度,我让他占多少宽,占100宽,那是不是就满屏宽对吧,那同样那高度呢。100VHVH啊,这也一样,叫什么可视区域的可视区域。区域的高度啊好了,那现在咱们来看。然后我给了一个背景颜色啊,BK白给了一个什么颜色,给了一个井号CC灰色,好,现在我们来看啊,当前我来刷新页面。来,你看我整个这个区域,你看因为我可视区域是这么宽这么高,所以我这个圆柱也是这么宽这么高,它会出现水平和这个垂直的滚动条,对不对?哎,那现在怎么办?我需要给他做一个定位,POI position等于等于什么?等于absolute,然后top。让它为零对吧,Left也让它为为多少为零,好,那现在咱们再来看,这个时候我再来刷新,诶你看是不是就整个的满屏宽跟满屏高了,对吧,那在。
03:01
来,那我需要干嘛呢?我需要给它进行一个透明度的这么一个变化吧,那我再设置一下OPA,给它来一个点五对吧,给他一半啊,这个点五就是0.5对吧,给他一个缩写啊,那么比如再轻点啊,0.3。诶刷新你看这个时候你看啊,我不管怎么点它是不是都跳转不了了,对不对,哎,那咱还回来还是这个,我算了给0.5吧,对不对。哎,那么设置完它以后来刷新完啊变成灰色,那在它的上边是不是还要有一个元素,对不对,那还要有一个元素,那也就是这个。再来一个啊,比如说这块。叫做。Div。里边我们给他来个什么呢?来个m form表单对吧,然后这块我们给他起个ID叫什么呢?ID叫做form啊。Form啊,比如说这里面我就直接写两个了啊,这里面的样式我就不调了,用户名来个INPUT3啊,不对,不是叫什么input,叫做。这一个对吧,然后给他一个BR。
04:02
然后再来密码。Input。Psswd pass座,然后。再给一个。BR对吧,然后再来一个什么登录按钮input it叫做登录好了,那现在咱们来看啊,这个时候我再来刷新。没有效果对吧,在它的后边是吧,那他肯定要定位到这个上面来吧,所以在这里边这个form ID为form的这个家伙啊,井号for,比如说一样,我给它这个宽度WT,就比如我设置一个400啊,然后高度呢,我也给他设置一个400。B,它的背景颜色为什么为这个井号?FFF白色对吧,那咱们来看刷新看不来效果对不对,那怎么办?我需要给它做一个定位,Posi等于阿尔法UT啊,也让它定位出来。诶。这回有了对吧,有了以后这些内容干嘛,这个整个这个div是不是在这里居中呢?所以这里边我需要干嘛,给他做一个left水平的位置,CLCCC,给他做一个什么计算,计算什么呀,是不是我的这个50%的这个宽度。
05:13
减去谁啊,减去我当前的这个宽度除以二。对不对,但是我能用这个宽度吗?不行是吧,他告诉我什么呀?400我得用什么?400PS除以二对吧?那这个时候来水平位置居中了对吧?水平位置居中还有什么?还有垂直位置居中,那也就是top等于CC,那应该依然是50%减去减多少,减去400。然后除以二。那这个时候再来。或者你直接写200也行,对不对,好了,这是不是在这里居中了对吧,剩下就靠里边的内容的一个居中,那里边内容居中是不是就是P-A等于一个center对吧?那。走,你。是不是就居中了对吧,那居中了以后,接下来那我还能给它垂直居中吗?那就不行了拉aheadight啊,这个时候不能给它垂直啊,比如说400PS你看他要是给垂直居中,它每个间距也会有400像素的来,你看是不是拉开了,你看只显示这个用户名,为什么?因为这个在这儿呢,看到了吗?每个间距也都是什么,也都是400,所以这里边不能再给它了,我可以干嘛呢?用其他方式,现在我们还没讲啊。
06:15
我可以用盒子模型来给它顶下来。是吧,这是一种方式,那另外还有一种方式是什么呢?比如说我通过定位,既然我已经定位了,我定位是不是也行啊,我是不是有个form标签对吧?Form标签我给他一个包ER1像素实现的红色边框啊,特意要突出,你看放在哪。看放是不是在这儿,我想放进行居中的话,比如说这里边我也给它设置一下呗。Q SI per等于什么?等于这个阿8UT,那么他在做定位的时候,因为我不需要考虑其他东西,为什么?因为它的副类是已经定位的,那么在给他定位的时候是不是也一样,他参照负类去定位的,对吧?所以这里边水平位置我不需要动对吧?我只需要垂直位置,那垂直位置干什么?Clc是不是也一样,也是他父亲的这个50%的高度去减去它的高度,它的高度多少没有对吧?没有除以二,那所以这里边我们给他设置一个它的高度,比如说它的高度为多少呢?为这个150PX。
07:09
好了,那这块就是150PX除以二,那这个时候我们再来看。走,你。是不是也是居中了对吧,哎,也因为这个高度在哪呢?那高度一样,我们给它缩小就行了,比如说100。那这个位置是不是也就是100啊。走,你。是不是始终都在居中的对不对,然后干嘛水平位置,既然这样的话,那水平位置是不是我也可以了,叫clc,那也一样,50%减去点多少,比如说水平位置,我们给他一个WTH给多少,给他200了啊,那这块是不是就是。100PX对不对,那现在再来看。走,你。缩小下来了对不对?哎,因为水平位置的宽度我们给它减小了,对吧,比如说这里边我们不要200了,我要拿到多少呢,三百三百的话呢,这块就是一百五呗,对不对,那这个时候再来。
08:00
你看是不是上来了,对吧,再也就是中间的内容它进行居中了,居中完以后我给他删掉,删掉以后现在你看百度登录效果是不是就出来了,那剩下就是什么表单的样式,我们再给他做什么做一个调整吧,哎,这就是咱们的这个定位的练习啊好了,那这节课我们到这里。
我来说两句