00:00
好,我们开始来上课,那么今天呢,我们主要来实战布局我们的这个网站的首页啊,那么在上一关当中呢,我们是把这个页面的这个主体结构给布局出来了,对吧?但是内容呢,并没有往里填写,那么今天呢,我们将把内容填写过来,那么一样,我们先是一部分的做啊,先来看我们的这个头部这一块,对吧?那么头部内这个样式呢,我们就是这个整主体的布局啊,我们已经布局完了,我就直接把这个布局的这个东西拿过来了啊。来咱们来看一下啊,在我的这个LESSON03里边,我们有一个,呃,首页布局实战对吧,配合了这么一个style CSS OK,我把它俩先剪切到我们今天来啊,剪切到今天来呢,我通过这个这两个,因为这已经我们布局过了,我就不再写了,我直接把它这个样式啊和这个结构啊,我直接给它调整一下啊,咱们来看我先把代码先复制出来啊。来我就直接把头部的代码,因为我们先要布头部嘛,对不对,那先要布局头部的话,咱们来看我新建一个这个文件叫做header he低header.hl。
01:07
OK,这就是我们网站的头部页面对吧,然后呢,那同样我也需要有什么需要有CSS了,那这里边我一样在新建一个叫做CSS的目录啊CS。这个CSS好,那OK,那么也就证明头部的和头部的文件都写到这里边来了,对吧,那好了,那我们之前写过这么一个页面,我就不再去多写了,我直接把hier里边的内容跟这个导航,导航不需要对吧,那我就直接把这里面的内容啊给它提炼出来。到我就另外style文件,那么style文件里边这些加上hier top top里边的对吧,Logo这里一直到导航结束之前,这些是不是都是我需要用的,所以我要把它放到哪,放到我的这个HYCSS里面,那么另外呢,它还需要有什么,有响应式的吧?那OK,我们再找到最下边的响应式的地方,是不是从这开始。
02:16
对吧,那从这开始一直到那,一直到这,这是不是都是,我想应是头部的地方,那CTRLC,我直接把头部的也一样拿到我们这里边来,给它一个结束的符号。好了。先来看一下我们头部页面啊,有没有效果。刷新什么效果都没有对吧,为什么?因为我拿是拿过来了,我这里边有给他link一个标签去指定它样式吗?还没有吧,Link标签,那当前目录CSS下边的叫做HYer.CSS这是第一个对吧?那么其示我们还要设置什么,我们是不是还要设置它的这个视图啊哎,这里边给他设置这个mate视图CTRLC,我直接把它拿到我这里边来啊来。
03:05
Ctrl v OK,转过来好了,那现在我们最后再来看周尼。OK,没问题对吧,哎,这块没问题了,那接下来还有什么呀。我这里边是不是还要看一下显示。哎,咱们先优先是以这个移动端布局的,对吧,比如说我们以IPHONE678为主,那给它调成这个100%,看是不是这样效果,哎,那么一样,我选选择成这个以后,我是不是可以来回拖拽,方便我去测试啊,哎,那好了,那现在这个功能已经有了,那接下来我们就要是把您的这个头部的样式先写写过来,对吧?那么第一个是先把它图片引入过来,那OK,我们也来去引入,那我把图片也导过来了,在这里面的image里,那也就是。找到我们hier hier这里边有一个logo对吧,把logo替换成什么,替换成image标签,然后是什么?当呃src属性,把src属性叫做当前目录下边以魅四下边的lo有个logo的喷GOK,我们换过来好了,换过来以后这个时候你再来看走你。
04:04
诶,你看商城图片是不是大了,哎,因为这个图片啊,你看好了这个图片多大啊,现在是多大,19194乘以66对吧,也就是他默认的这个图片大小就是194乘66,没错吧,但是如果在这里边来,比如说IPHONE678这里边啊,如果要是这样的话,它图片是不是太大了,哎,所以这里面的图片的这个高度宽高,我需要给它干嘛?给它进行一个设置对吧,如果在移动端的话,也就是返回到我的这个。我给他俩挪一下位子啊。好,返回到还这里边啊,如果在移动端的话,我的头部是什么?一是这些是没问题的,对吧,那咱们来看一下啊,头部里边的selection不是这个,诶这个logo吧,我们是不是单独设置了这一个logo,那OK,这里面的logo我们给他设置的这些啊,那我们以这个移动端优先,我们就给给移动端的这个先给个边框,大家先看啊来刷新。诶。我这个logo设置的不是它吗?是它吧,有吧,但是哪块我就设置个蓝色边框啊来我们看一下啊,在这看到了吧,它里面的两个select我都给设置蓝色了,对不对,那OK,我把它注释掉啊,先注释掉,不要蓝色,我们只看这一个。
05:13
红色边框看到了吧,确实是有对吧,但是呢,在移动端才说了,它肯定是要缩小一些的,不可能是这么大,所以这里边我需要对它进行调整,也就是说它默认这里边我给的这个宽度是没有问题,但logo里面是不是有以内点,那如果说你看好了,我说刀了。刀了logo下边的1IMAGE,这是不是对这个图片进行设置,刀了1IMAGE等于多少呢?等于这个WDT就100%的宽度,这个100%跟随谁是不是跟随它的负来对吧,那你看现在他来走你。你看这位是不是就很小了,那咱们也就不能这么小吧。对不对,哎,所以它这块啊,注意这个宽度,我需要干嘛,需要给它进行一个设置,比如说我设置一个20%对吧,让他再干嘛,再逐渐的去变大啊,让他逐渐的去变大。
06:00
好了,这里面我看一下20%可能有点小,30%吧,让它这个宽度是30%啊来整理。OK,这么打差不多可以对吧,不算太难看啊,不算太难看啊,这样可以啊,不算太难看,因为我们没有这个具体的这个尺寸,对吧,只能是按照我们自己的想法来去做啊好了,那这块完以后,商城这个完事以后啊,咱们再来看我一样这个这个页面啊,那么往上。你看到我大瓶是不是也没问题对吧,哎,小瓶小小小小小小。小平是不是也可以对吧?哎,包括我这里边的IPHONE6,这不都没问题啊,哎,那包括啊,包括这里边我可以干嘛呢?我还可以给他进行一些其他的设置啊,比如说我不给百分比的设置,我给什么呢?我给那种相对的设置,比如说re啊,这些都可以啊,好了,那咱先这样先给他设置过来,既然这个宽度已经设置到100%了,对吧,那这个宽度呢,我又给它设置始终是占占了这个30%,所以这里边不管我是给它这个拉大还是拉小,它都能是站位这些。
07:04
没错吧,啊,都能占为这些,那剩下的是什么呀?就是我这个右侧的内容了吧,那右侧的内容先不管它,我们还是一样啊,这个我不需要压,不需要拉,我来调为678,那么针对右侧的内容进行设置,那我们就要去找到对应右侧的内容,那么右侧的内容,注意,这是右侧的内容对吧?这是大屏上右侧的内容,我们先不管它,那咱们先来看小屏右侧内容有什么东西啊,是不是这里有三个图标,对三个图标呢?这里我就可以给三个图标,比如这里。CTRLC。微微微对吧,我可以这么给他这三个图标,我也可以怎么样,我也可以给他这个A标签也行啊。对吧,比如说给他一个A标签,肯定CVV,咱们总共三个图标嘛,我用这个占位了啊,123好了,然后咱们来看,现在我们还没有图标啊,我只是先给他做一个单位来吧,123在这儿了,对吧,但是它的样式是什么样式呢,我们也不确定,那这里边呢,它有一个这个。呃,LG hidden,我们看一下这个LG,我们昨天是怎么设置的啊,找一下这个LG hidden。
08:06
LG hidden没有LG he哦,LG he在这呢,对吧,在这块是设置的隐藏,那么隐藏我们没有给它设置它的显示对吧,那OK,我在这里边继续还是一样,我就点LG hidden对吧?其实这个叫点LG hidden有点不太不太好,这个属性啊,我们应该尽量干嘛呀,尽量跟他用的有关联,你比如说这块大家都知道我是顶部的右侧内容对不对,所以这里边我可以干嘛继续给它起个名,比如说叫做右侧的内容IG,然后这里置。这个样式对吧,我先给他一个框,实现红框,大家看现在。诶在这呢,对吧,那么它的宽度我是不是也可以给啊,对不对,你看人这边是不是占的也挺大呢,所以这里边我也可以给他的这一些宽度啊,那比如说在这里边咱们也一样给他一些宽度,比如说它的这个with,它的总宽度最重呢为五十百分之五十啊现在你来看刷新。
09:04
看是不是大了对吧,哎,同样我也可以给他这嘛,同样我刚才说30%让它对应的减小,那走你你看是不是也可以对吧,包括比如说我不给这个了,我给什么呢?我给他这个,呃,16乘以。一个是16乘1010 re10rem是多大呀?这rem是相对于谁?是相对于我们的这个HTML的大小,对吧?HTML的这个字体大小啊,默认是16像素啊,你看那十个这个16像素是不是就一百六看到了吗。这里是不是一百六啊,哎,那么也可以干嘛,也可以设置它对吧,包括我们这个em me是不是相对单位对不对,也是个相对单位啊,那么相对什么也是相对于十。40%啊。
10:00
好。刷新OK,那现在有了这个,那接下来是不是就里边那三个小元素了,对吧,那三个小元素也就是点top down right里边的selection。哎,没加上吗。呃,它点top red下面select ex so这块咱别给这个红色了啊,换一个换一个这个blue蓝色好了,那我们现在先看一下可不可以啊。刷新。哎,没有selection哦,咱们是用的什么,我是不是给标签改了,改成I标签了,所以没有selection了啊。来给它改成I。再来刷新,OK,是不是这样的了,哎,因为它本身就是什么,本身就是这个行列元素,所以它可以并列在一行,那我肯定要据它的位置进行什么进行调整,所以这里面display为伸缩格,我直接给设置伸缩格设置完以后,接下来呢,它的这个主轴,主轴让它干嘛,我让它这个呃。
11:07
Space around对吧,两边留有空白,中间留有空白,然后纵轴呢,就是侧轴呢,叫做。At times为center啊,垂直方向也就是居中对吧,那现在来揍你,你看是不是就居中了,那居中以后,接下来这三个位置我要放什么东西,我要放呢,是不是就是这三个图标对不对,那我要找图标,图标怎么找呢?咱们现在就用先用在线的图标啊。在这里边大家如果不知道这个地址,我告诉大家怎么搜啊,直接百度。百度完以后输入这个啊,我们用这个里的字体图标,那么最后等我们把整个项目的所有图标都找完以后,我们再把这些图标下载下来,然后我再教大家怎么用这一个下载下来的图标啊,因为现在我们是做一个加一个,做一个加一个,所以没有必要是什么,没有必要说先下来,因为下载下来每下载一次再加一次很麻烦,对吧?除非是什么,除非先把这个项目中所有用图标都先提取出来,然后再下载,这可以对吧?那OK,那么哪种办法都可以啊,那现在咱们进来以后,你自己上这里边去登录啊,我这里边默认是登录的,登录这里边呢,你就可以去找了,比如说在这里边你可以搜索,搜索什么,你看你需要什么,刚才我们有一个什么导航的对吧,那比如说我这里面直接搜索一个这个导航图标。
12:19
导航图标OK,你看一搜索这里面是不是就有导航图标对吧?哎,你搜索什么,你需要什么呀,包括你就直接打导航的更多,你看这种这种是不是都是导航啊,诶怎么用呢?在这里面你直接添加购物车就可以了,看到了吧,添加一个购物车,添加完以后购物车里是不是就有了,在购物车里面直接添加到添加这项目,然后点击确定这就可以了,这就到你的下面来了,到了你下面来以后,这个时候注意啊,我们用的是在线的对不对。然后你可以在这里面去查看它的在线的链接啊,在线链接,然后只要因为我刚才是在这里面更新了一个代码,对吧,所以它这里面提示有这个更新进来啊,那我这里面就点击更新代码,但是我刚才好像是乱点的,那我就用。我看啊,用这个导航图标,用这个导航,我看人家那个图导航图标是哪个。
13:04
是这个对吧,那OK,我这里有。来这里面是不是有这个导航图标,哎,那您说了,那我就更新一下呗。好了,就这你每这回就无所谓了,你每加一次在这更新一次就好了,然后你把这个CS引入,这样会比较方便啊,在我们测试和这个书编写阶段是比较方便的啊,那我直接这里边去引入它那HTTPS号斜线,把这个例子放过来啊,那我多打了两个斜线好了,那这个CSS我就加过来了,加过来以后,接下来咱们说要这个图标对吧,那我复制一下这个图标代码复制完以后。放到到哪里,我哪需用哪需要我放到哪,你看我是不是最后一个这个三个里边了,那我给它定义一个class等于什么,等于这个导航一叫icon导航一对不对,那好了,那现在你看我来刷新。诶看好了,它什么是不是一个口啊,就一个口对不对,乱码了,其实它是不支持这个字体啊,我们要想用它的话,我还需要再加一个属据什么呢?叫做I固定啊,我们在线的用这个用标叫什么名你就加什么,好,那这个时候你再来看走你。
14:13
你看这个是不是就好了,对吧,然后呢,同样这个三我们就不需要了啊,这个三就不需要了,然后我给他再来一次,你看这个小图标是不是就有了,哎,那么有了,注意我们这么样设置的,它是怎么看,你看啊,我点这个I。I里边是不是有个冒号before啊,看到吗?它是通过什么,通过before,也就是说在这个A的元素的内容什么内容之前,是不添加了这么一个元素,所以我想说我要给这个,比如说我觉得这个字体有点小,我想给个S的字体,比如说我们看我直接放size给100挺大了,对不对,那现在你看好了来刷新。我所有的它是不是都能变大?对不对,但是这一个100P啊,因为它是相对于我么,相对于我的这个手机端的对吧,那你看它宽高确实到100对吧,所以这里边我们不要给它这么大了,我小一点啊,这个给。
15:08
20。给他。11.1.2吧,1.2re啊1.2r e1.2rem是多大呢?我们这个默认的情况下啊,默认我们字体大小是多大呀,是16像素对吧,那1.2呢,就是。16乘以这个1.2倍,对吧,那就是19给他19.2对吧,那我也可以给他多少,给他这个1.5啊1.5倍。好了,你看是不是有也在大啊,也在大啊,OK,那给这个就行了,然后接下来呢,也一样,我需要给他设置一下这个字体图标的颜色吧,它现在是默认是黑色对吧,我们这个好像是灰色是吧,那OK,这里边咱们就给他设置一下啊,直接给他一个,不能这么给了,因为我如果要给他color了,比如说我给他设一个九号CC啊先先这么样啊,我们先看。走你OK,你看里面所有内容是不是都变了,哎,所以不能说在这里面加,但我现在先加的也行啊,但是这个颜色我们换一个,给个井号666吧。
16:05
刷新一下,OK,颜色有了,颜色有了,接下来是不是这两个图标,这一个什么,一个是呃小鱼,一个是购物车对吧?那OK,我们把小鱼和购物车也拿过来啊。小人跟购物车小人。哎哟,小人跟购物车我们都没有看到了吧,都没有,那我去搜一下吧,啊,来一个这个小人。小人。这小人的人。那看一下这里边哪个跟他像,咱们就用哪个吧,对不对,来看一下人家原来的那个是什么样的,在这里边找到人家这个就是一个小圆圈带俩撇对吧,那一个小圆圈带俩撇,这是不是也是小人啊,那OK,就把他直接加到购物车对吧,这是一个,那我一起加了,因为我们刚才已经看到了,还有一个谁还有一个是这个,呃。小人和购物车是吧,那OK。
17:01
来再加一个叫做。购物车。好了,购物车一样,这里边有各式各样购物车,那就找一个跟什么跟我们这个比较相似的购物车,它就上面带俩圈对吧,上面一个带俩圈,上面一个带俩圈,那就这个吧,这个我觉得挺像是吧,那随便啊,这个你看第一看人家要求用什么对吧?如果没有要求的话,那我们就自己去选择一个贴近的这个对吧,人家我们要是招的话,那人家给你这个要求,你就得有这个要求啊,好了,那我就更新过来了,更新过来以后,那这回再来看啊。这里边是不是就告诉你了,下方有新的图标来对吧,然后呢,怎么办,我们是不是还得更新,那你就再更新一下啊,这样起码不我觉得会比这个线下比这个下下来下下载下来的这个本地版本啊要要好一些啊。所以咱们在现在编写阶段,我们先用这个在线的,等我们这个都编写完以后,这个再传到再下载下来啊。
18:05
好,那我就把这个代码复制过来,复制过来以后那么一样,我们需要去把这个。更新一下啊,直接从这往后的对吧。哎,每次啊,注意每次只要是有什么有变动,这里边内容就需要更新啊,这里面内容需要更新,好,那那在这里边一样,我们再返回来,呃,把这两个小人和这个购物车给加进去,对不对,那OK,我们先去找一下小鱼购物车的图标,我们先给它复制过来,在哪呢?在我的这个。第二个is购物车对吧,那给它删掉了,叫做class等于,等于什么?等于icon icon,然后把这个图标加进来,那么同样这个class。等于icont,然后再加一个。再加一个刚才是购物,现在是小人对吧,小人是给他提示用户登录注册的,对吧?哎,好了,那这三个加完加完以后,现在我们来看,我再回到我们这里边来刷新一下。
19:06
好了,你看啊,我们刷新完以后,注意这三个是不是都是一个颜色,而人家那个是不是两个是红色,哎,所以这里边我们需要干嘛也把这这两个变成什么,变成一个颜色,没错吧,那OK,那这里边我们就要进行对它一个设置,那我可以可不可以这么找啊,可不可以找他俩呀。也可以吧,哎,你看我找小人啊,这是不是可辣类啊,那找可辣类,你看我找这小人可不可以啊,我现以一个为例来在这里边。找到他。给它设置一个。叫做color字体的颜色为什么为红色对吧?哎,那现在我们来看刷新。刷新刷新刷新刷新有变红吗?没有吧,哎,注意啊,你看在这里边我们点过来啊。点过来以后,我刚才说了已经是的对吧,我们看这个样式。你看小人before是不是content,是不是这是小人的这个字体啊,哎,所以我要想这样给小人设置颜色的话,怎么办啊,来刷新一下,那这个时候我就得这么去改变它了。
20:07
怎么去改变呢?在这里边,那就是冒号b before,然后。再来刷新,我是不是少打一个冒号对吧,但也行,是不是变过来了,哎,但你这么变会比较麻烦啊,因为后期我们把这个图标都下下来的话,那这一切我都得重改对不对,一切都得重改啊,所以不要这么变了啊,但我只是跟大家说,你要去调的时候可以这么去调啊,好了,那我们怎么变呢?那我们可以通过标签直接变,因为我现在通过标签是不是已经可以直接设置了,那直接设置我就通过标签直接进行变呗,那这里边的第一个Li标签我们知道是什么样的,对吧。呃,再往下来。叫做。点top I冒号叫做NTH,不用n th last的第一个。Last last是最后啊,Fire first了,好,这是不是找到第一个Li,找到第一个Li干嘛呢?我让它的颜色变成怎么变成红色,那现在你看我的第一个能不能变。
21:08
没问题对吧,那第二个是不是也要变红了,所以这里边直接再加一个叫什么,再加一个点top I下边冒号叫做的。呃,NTH-q child的第二个对吧,那一样,它们两个都变红,那走你。是不是就可以了,对吧?哎,那在这个小人我们用的是本身就是用一个粗体啊,所以它会比较粗,那OK,剩下的其他的所有展示带红色边框了,我就不需要了,对不对,整个这个top right我不需要了,那我让他。这个红色边框去掉对吧,然后还有什么,还有这个以面积这个我也不需要了,我给它干嘛注释掉,这叫什么卸磨杀驴吧,哎,不需要了,就给它注释掉了好了,那至于外层这个红色边框需不需要呢?我还需要,为什么?因为我们还需要去做它的。移动端啊,你看我现在放放放的再大,它一旦隐藏以后,是不是移动端就要显示了,对吧,你看诶诶对吧,包括你看我放到这里边放的越大啊,我这块几个距离是不是就越远呢?对不对?来咱们把这个再调一下啊,来找到这个right,因为这个宽度我给的是40%对不对,来刷新。
22:19
你看啊,我这里边小的时候这么大,它是40%对不对,那我大的时候他也,诶别太大了啊。你看我大的时候它也是40%,看明白了吗?哎,所以越大的时候,它的这个距离会越远,那要想调一下怎么办?那这个时候就不能给百分比,那该怎么办?我就得固定给它什么,固定给他大小,比如说我就给他多少,就给他这个10RE啊10 re10re,咱们单个的一就等于16,像数十个就乘以十乘以十六一百六吧,那我再来刷新,你看它是不是就这么大,那一样我就会缩回来,你看。除非是给他说,那咱手机也不可能这么大屏幕对不对,诶你看正常的,比如说你看我这么调啊,来IPHONE678的是这样效果,这就没问题了,对吧,因为我们做一切都是以IPHONE678为主的啊,然后再往下来,你看我说说说上上上是不是都行了,哎,那OK,那这到这的时候是不是就开始到大屏内容展示了,那好了,那大屏内容展示的话,那这块我就用它了啊。
23:15
大屏内容展示的话,我们怎么办?来把它,呃,不用了,大屏内容OK,大屏内容在这呢,对吧,我们要写到这里边来啊,那咱们来看。找到我的孩大屏内容展示在这呢,对吧,叫MS杠海,那么同样我这里边可以再给它起一个名叫什么呢?叫做LG大屏的。可以吧,哎,大屏的右侧也叫LG啊LG,那好了,那这个LG right,当然这里边我可以改成我刚才是写的top right对吧,那其实我应该叫什么叫Ms RA或者SMRA是不是更好一些对吧?那这块要改了的话,那我这里边就要。要搜索一下了啊,CTRLF。把这个。Top。
24:02
哎哟。我改这一下干嘛呀。手动改吧,来这块应该改的是SM吧,你看。Top red s right对吧?那所有的都是什么s right,我不应该改这个哈,改先改改吧,来s right,这只是一个名字对吧?S们right好了啊,那现在完事了,完事以后一样,我们先回过来刷新一下,看看有没有变化,来未来没问题对吧?没问题没问题,OK,那这个红色边框咱们先给它去掉了啊,这个就是缩小的这个红色边框,因为咱们已经没有用了啊,那它的红色边框在哪,在这呢?OK,给它注射掉好了,那再来。返回到这里面来刷新。那以后接下来我们说是不是到我们大屏的,那大屏的时,咱们大屏这个右侧容展示们给叫做LG对吧,那这里边我们先找到它叫做LG。杠right。好,然后给他一个BD包,一项数实现的红色对吧,那现在我们再回过来去看它。
25:07
对吧,它在这呢对吧?那么同样它的大小我是不是也可以给他进行一个宽度的设置对吧?比如它的这个宽度我给他百分之50%对吧,咱先这么给的啊,现在这个有宽度再说啊,别跟里边内容大小是一样的好了,宽度就这么宽对吧?那么一样,它再大,不管多大,你看它的宽度,只要只要是扩大,宽度是不是就一直在增啊对吧?哎,注意啊,我跟像素已经很大了啊,这里经很大了啊来就算哪怕给它缩小调来缩小调。诶缩小掉好了,你看是不是一直在大,当然啊,这个图片你看啊,因为大图片是不是也放大图片我给的是什么,你看图片我是不是给的百分比啊,然后图片上面一层呢,上面一层我也是给的百分比,对不对,就是这个叫点log这个啊点咱们来看一下,要么它不可能会这么一直在大,点log.log在这里边我是不是没设置,所以在这里边点log,我可以给它进行一个设置啊点logo啊点logo怎么设置呢?注意你先看我们小苹果是怎么设置,小苹果是不是就直接设置了一个宽度等于300啊30%对吗?那好,那这里边我也可以给它进行设置,怎么设置呢?我说这个让它这个logo占30%的宽度,Wid ph30%的宽度,这是没有问题的,但是我还可以什么,我告诉他最大的宽度只能是多少呢?只能比如说是这个200 ps2百像素最大宽度,什么是200像素,那现在你来看啊,我再来给你刷新一下。
26:32
你看是不是就缩小了看哎,为什么,因为这个家伙,这个家伙你看图片现在是不是就就我给的版本,但他是200了对呗,哎,同样你看我返回来啊,现在是这样的啊,你看我来说。说说。他说肯定没问题对不对,哎说肯定没问题,但是我一旦大的时候,你看一旦大的时候诶。来来来,你看它再大再大再大对吧,再大不管,但是不管它大到多大,它只要是达到200以后,它就不会再变了,看到了吗?哎,他只要达到200以后,我就不会再让他去变了啊,那当然这个移动端的这块,我也可以给他进行设置啊,移动端这里边。
27:11
在哪呢?在这里边对吧,我只给了一个百分比,那我是不是也可以限制一个,比如说我说你最小的或者是最大的能达到多少,是不是只都会在这个范围内,哎,那OK,那这块完事以后,我们继续一样,先去管它啊,不管它了,来看它,看这边给它放大,放大以后这边有什么有登录注册对吧?然后你看啊,这是登录就是注册对吧?然后这个呢,是什么?咱们的这个放表单带搜索的没错吧,然后再往后还有一个注意啊,这块内容来我先给你选中,你看看。这是什么?这是不是一个小图片?看到了吗?哎,这是一个小图片啊,再往后这三个是不是又是图标了啊,又有三个图标了啊,那OK,那一样,我们先去给它做一下啊。来那找到我们的这个。这里边。
28:00
大屏右侧内容对吧,先是有一个selection,那这里边是两个A标签,一个叫做登录。一个叫做注册。就是注册。好了,一个登录一个注册对吧,然后这里边我可以给他一个什么,给他连一个空格按NBSP。CTRLCCTRLV,其实这两个我给它排一下啊,放到这里,OK,现在我们再来看啊。返回到我们自己的刷新。登录注册是不是有了,哎,有了登录注册注意啊,人家登录注册这里面是没有下没有这个什么下划线的,对吧,那我们是不是也要去掉这个A标签的自然样子,那继续找到这里。我们把A标签再加上来,对吧?A标签的自然价是什么?叫做takes到script为E。
29:00
没错吧,然后不需要设置它的字体颜色啊,不要设置,单独设置它就好了,因为没有那么多需求。好了,这回你看就变成这样了,哎,那登录注册这块有了以后,接下来还有什么,还有他的form表单嘛,那在这里边直接写他的form表单,找到我们HTM这里边啊。这里比如说继续,我再加一个secretm selection,然后这里边是什么?是它的form表单,FM直接给他一个input,叫做search,我们学过这个search对吧,那内幕名也叫search,这是用来干嘛提供搜索的吧?哎,那好了,那search之后接下来什么,它还有一个这个名,这个图片是吧,那就是input。等于image I m,然后src去引入一张图片去啊,这里面咱们来看一下有没有这个这个这个小圆圈的图片啊,找到LA4里边,Image这里边有一个搜索的小圆圈。这里边这是不是有一个,哎,再看啊,它是红色的对不对,因为这是图片啊,注意我们我们没有办法改变图片的对不对,哎,所以我们继续找看有没有搜索的啊。
30:06
呃。OK,叫什么ss.png吧,那OK咱们就引入过来啊,叫做当前目录以面积下边的ss.png好来,那这一块完事,完事以后一样我们再来刷新,瞄一眼走你。好了,在这呢,对吧,不管它,因为本身我们select就是什么,就是一个这个叫做呃,什么东西来着。一个块状标签对吧,他会这个读在一行啊好了,后面是不是还剩三个小家伙,哎,这三个小家伙同样我再给他一个什么selection,然后三个小标签就C,对吧?因为现在我是写到这个里,那未来我们要下载下来的话,我是不是就可以写到这里来了,那OK,继续啊,叫做呃,C LAS class,那么它每一个里面都需要有I,对吧,然后再来class,等于I。I因为咱们第一个项目这个已经接这种线的,对,就是把这个字体标下来,那么在我这个版本,我们最开始就开始接触什么接触在线的啊,也让大家知道在线的怎么用啊,好了,那加了这三个放的以后,那接下来我们就要去找这个图标了,对吧,第一还是小人儿,然后第二个是什么呢?是这么样的一个图,然后是一个购物车,这是个二维码对不对,然后是一个购物车啊,那好我们去找在这个。
31:28
图标里边。购物车咱是有了小人,小人咱换一个吧,这个小人是不是天然加粗啊,对不对,哎,然后这还有个还缺个二维码是吧?来搜索一下二维码,哎,二维码的小图标,二维码小图标这里边是不是有有很多对吧?哎,那比如说随便找一个啊,在这里边我就用它了,我觉得它挺好看的,那我就给它添加到购物车对吧?然后还缺一个小人,我说我们换个小人是吧,来咱们再换个小人啊,小人。那别打小了,就人吧。
32:06
好了,这个人我用它啊,用它来添加。OK,两个图标对吧,两个图标,那我们直接添加到我们的项目里面,然后确定,确定完之后,这里面又说更新,那我就一样继续更新,只要这里面加我们就更新一下,加我们就更新一下啊,然后点击复制代码啊,然后在这里边。把它。嗯。再拿过来好了,那保存完以后呢,接下来这里面是不是就放这几个图标就行了,呃,三个图标,先是小人,然后再是二维码,再是购物车对吧?那OK,我们来看啊,先是小人,也就是他。复制,然后拿到这里边,这是第一个,然后再是什么二维码。复制,然后这里边就是第二个对吧,然后再来还有谁,还有他的这个第三个购物车,OK,把它再放到这里边来好了,那现在我们来看,再来刷新一下我们的页面中泥。
33:07
这么卡呢?再说好了,是不是过来了,哎,汤仨也过来了啊,那么汤仨过来以后,其他我们先都不管他啊,那么接下来第一件事干嘛?他们几个是不是得先给我做到伸缩呀,对不对,那好了,那先让他们变成伸缩盒,在这块我们继续去找找谁呢?这回我要做的是大屏的,那直接是调到大瓶子里边,对吧,大瓶的这个right让它base play变成什么,变成S。对吧,哎,一块一块来做啊,那他现在先变成横了,对吧,横了以后,那接下来是不是它三个里边三个这个子的元素啊,那开始进行调整吧,Just content,为什么为这个,比如说为这个。Space between对吧,最后尾一个让它靠,靠在这个最下边,我看它这里面靠没靠。也没靠啊,没靠,如果没靠到这边,那我就不要用比特了,我就用什么SPC around就可以了嘛,就两边留有空白对吧,哎,行了,那切过来就刷新一下吧。
34:05
哎,两边留有空白。看到了吧,然后。在干什么?在做垂直居中吧,叫做等于center,哎,侧轴方向在让它居中。好,这不就过来了嘛,对吧,那过来以后接下来是不是咱们就得挨个去设置一下了,那首先是这个登录注册,那你看您的这个登录注册这个字也是比较小的,对不对,诶咱认咱说了网站中的字体是不是。六像素对吧?那OK,如果我在这里面的话,我给它设置一个,设置一个什么呢?设置一下我的HTML,然后默认found-size比如说我让它14像素啊,让它小一些,因为它大屏我不怕对不对,那刷新你看字体是不是变小了,哎,字体变小了啊好了,字体变小以后,那接下来我们要去调这块字己这个这块内容我不用怎么调了啊,他这块只是我们差距是我中间给空格,他中间没给空格而已,对吧?哎,那不要紧啊,然后再往下来什么,再往下来是调这一块内容,注意第二个select,那OK,我们去找第selection,先看一第个selection是。
35:09
是不是这个,哎,那这里边我也可以给它继续起名,比如说这里边叫做class,等于什么,等于这个LG大屏的对吧,杠top。或者大屏的RA杠设吧,是不是大屏右侧搜索,哎,那CTRLC拿到我这里边来,直接在这进行来设置大屏右侧搜索。LG。对吧,那右侧搜索我要做什么,那先不管做什么,我们先给他一个边框,先看一下啊,先给他一个红色的边框,然后我们返回过来刷新。刷新没刷上,没刷上。呃,大屏top。这里对吧。这里面叫LG red search,我没给上是吧,那好,我们来给它重新加一下啊,这里面少什么少点啊好了。
36:04
刷新。那OK,看是不是在这呢,哎,在这以后,那接下来注意这里边是不是有两个元素。对吧,那我是不是得调这两个元素才对呀。哎,因为你看哈这里边啊,它这个你看它的这个图是不是比较小,他俩好像在一行,你看到了吗。看到了它俩是不是在在在一行一样啊,哎,所以这里边我给它进行一个稍微的一个微调,那它就放在这儿了啊,同样这里边比如说pad。ADD,比如pading姆给了一个3PX啊,让它距离下边有一点距离,那现在中你看下面有点距离了吧,有一点距离以后注意这个边框,谁的边框,整个这个叫什么,这个叫做。叫啥呢?这个叫input啊,整个的input的边框我们肯定都得去掉,对吧?但是你要注意啊,这里边还有个form呢,看到了吗?是不是有个form form里边是不是才是这两个家伙,所以我要想让他们两个进行调整的话,我需要干嘛呢?给form也要做一个效果啊,咱们先来看LG杠。
37:07
Right,设这里边有一个for对吗?那么咱们给他一个边框实现so。给他一个什么井号000吧,黑色啊。我们来刷新看一眼,你看这块是不是的边框,哎,整个它的边框啊,那么一样,这里边form,如果我们不确定它有没有什么,有没有这些样式的话,我是不是可以继续往里面加,因为我们确实用到不一样的标签了,对吧,包括我们用到的I标签是不是都可以加到这里边,哎,那现在你来看再往里面刷新一下。好,没有任何变化对吧,没有任何变化,咱们说了让他这两个东西呢,也得去设置一下啊,怎么设置,其实我不用再去给它做深钟核了啊,因为他俩没有那个必要了,直接就把这个form里面的这个input取消掉就行了,那这里边有一个叫做input中国号,那咱们是普通文本域,不是普通文本是要T,呃,Tap对吧,Type等于等于什么,等于这个search的是不是搜索框啊,哎,现在你看好了,我让它的包ER,为什么呢?V no。
38:11
现在你再来看啊。注意啊,Form这是在form,现在放这个黑边框就不会有了啊。刷新。你看是不是变成这样的了,然后呢,注意啊,这只是给它包着为no ne了,它还有什么,它是不是还有背景呢?你看人家原来这里边啊,人家原来这里边背景是不是都没有,哎,没感觉出来像是一个什么,像是一个这个输入表带输入域吧,但是它实际确实是个表带输入域,知道吧,啊,确实是确实是啊,所以这里边它的背景BAGR背景的话,我们也得给它干嘛。也得给它进行设置一下,不然的话肯定也不好使,那背景我给他设置个什么颜色,我看一眼啊。嗯,返回来咱们这个颜色。叫啥来着?这个颜色颜色fe啊fe OK。
39:03
井号一,好了,那现在我们再来看啊。走,你。OK,这回看不出来了吧,哎,这回看不出来以后,接下来干嘛,我再同样摆这个,我是form也行啊,还是我现在就这个LG也行,我这里边是不是还有LG设这个设置呢,我直接让让他的这个button。杠,Bo To Button等于一项数实现的红色,这个时候你看啊走你。诶。又打错了。杠啊,好了。这回再来。走你你看是不是只底下只有这一条线了,你看它这里边是不是也只有这一条线,对吧,那银的线是什么,银的线是黑色的对吧?所以我这里边需要给它换一下,就井号000,然后这回我们再来。小心。没错吧,哎,然后中间已经有内容提示啊,那那这个内容提示就不是我们这个CI的样子控制了,而是什么,而是由他的这个police hoer对吧,Police叫做police police hoer,然后提示的内容叫什么名。
40:09
叫做。热搜热门搜索对吧,然后后面来个内容对吧,那OK,直接来个热门搜索,然后后面来个西说。细说PHP好,那么这回我们再来,回来出来看一下。好了是不是就有了,有了以后注意啊,这个内容是不是有点太靠前套开太靠前的话,能不能让他往往后面来一来,你看人家这块是不是在这呢?哎,那直接干嘛,是不是给他判成值就可以了,哎,所以在这里边直接给他一个PAPA。I down对吧,比如说我给他一个十像数,那好这个时候我们再来回归到自己这里边刷新。你看内容是不是就相互了,哎,好了,那接下来剩剩下什么剩面是不是就这三个图标,这三个图标了,注意我这红图标还用动了吗?你看我这红图标,红图标不用动了吧,哎,他们两个的距离也差不多对吧,只是我这个是放大款,比它大一些啊,你看。
41:06
放大点啊,只是大一些而已啊。那不用太不用再动的了,如果动它的话呢,干脆我就这块不给他这个八的话,它是不是就好了。是不是就下来一些,你看这是不是就离得近一些了,哎,那OK,那这里边一样,我比如说这这个东西。这个东西啊,它跟这条线挨的,比如说比较近了,那怎么办?我是不是也可以直接设置它把它的这个pad ing杠杠什么杠八对吧,距离底部比如说三像素,哎,让它单独的去调一下来刷新。啊,它不行,它俩在一行,它一条给它也影响了,对吧,那OK,那就就这样吧,就调成三项数吧,啊好了,那接下来什么,接下来是我这三个小图标,这三小图标注意你看这三小图标跟前秒图标是不是保持都差不多啊对不对,哎,所以这里小图标的大小我肯定也要给它这什么也要进行一个调整,那小图标在哪呢?那一样在最后这一个select里面吧,那最后的一个select我们给它起一个名,比如说叫做class,等于LG杠杠这个icon。
42:12
返回到这里边来,继续点。点好了,然后这里边不管怎么样,我们先给它一个边框先看对吧,不用着急for the right好了,那这时候我们再来看周NY。是不是有这三个,哎,有这三个,因为它现在本身就在这里边,已经是实现这个居中的了,所以我接下来只需要针对它进行一个什么,进行一个放大是不是就可以了,所以这里边我就直接是杠,嗯,哎杠size,比如说我给它十六十六像素,因为我默认字体是不是14像素啊,那它变成16像素,你看是不是大一些了,对吧?哎,再来比如说我给他20像素。因为人人家那图片是不是也二次像素,这里边,比如说我也给他二次像素走你。是不是又在大呀。看到了吧。
43:02
这里面ii,我看它有没有一些其他的设置啊。每一个I这是ion设置的对吧?哎,对于我们来说,现在你看它这里面是16,对你看我加加十七十八十九二十,这才20对吧?哎,你看好了啊,我这么去给他设置这些有没有变大,有变大看到了吗?二十二十五二十二十五。看到这才这才有变大啊,那我再刷新回来啊,刷新回来以后你再来看。点过来。你看多少?点到这个I。I的大小是不是还是16,哎,我不是设置20了吗?啊,这不是我设置的对吧。Select是我设置的啊,我直接设置谁设置10SELECT根大小呢?看到了吗?哎,所以设置它没有用对吧,我应该怎么应该是s select里面的I吧,哎,所以这里边的I标签,I标签给他设置found size红色不要啊好再来。走,你。OK,这回是不是就对了,哎,对了,以后一样,那么让他们每个人之间都有一些距离的话,我是不是就可以j margin-marin marin-lab每个人这个距离左侧五像数对吧?那再来刷新。
44:14
距离是不是也拉开了?哎,好了,距离拉开了,美没了,那我们就应该把这个边框该去掉的就得去掉了吧,红色的不要了,然后找到所有为所有我们设置包的。对吧,包子,其实我们在设置边框的时候,主要目的干嘛,是不是就是为了让我们看这些样式对不对?哎,我就这么两个吗?就一个吗。还是我有上面有隐藏的,有隐藏的对吧,这还有一个呢,好,现在我们来看啊。刷新。OK,这回没问题了吧,哎,你看缩小。对吧,放大。哎,你看啊看。到这个位置的时候有没有问题,有吧,看到啊到这都有,再小再小,我们应该是七多少,七五几749。
45:00
来吧,这回看到了吧,也就是在他交界那个地方是有问题的,看到了那交界那块哪啊,交界那块是不是就是在我查询这块750啊,哎,那也就是说如果在这块你看好了,我直接给他手动能不能改上750啊750。看好吧,在交界这块,我是不是让它有足够的才行,看到了吧,哎,足宽度和调谁是不是就只调这一个最外层呢?最外层你看我这块宽度给多少,给的是50%对吧,那好,如果再交接的话,我再来大百分之六十七十七十六五十五,再来再来,再来再来。看啊。是不是到这样才可以,到71的时候才可以对吗?好,就在70的时候是没问题,对不对,这是我们现在分析的啊,那不要紧,我们就先给他一个70,你看好了,来找到那个50的地方,我们就给他个70%。你会看到一些。不一样的效果来刷新。好了啊,现在是这样的,对吧,起码来说不会乱了,然后我放大,你看放大放大。放大放大,你看我越放的越大,他们距离是不是就越远?
46:03
对不对,哎,所以这里边我可以干嘛呢?我可以对它进行一个再进行一个设置,什么设置呢?我告诉他你的这个为50%,对吧,还是50%,但是我告诉你什么呢?你的最小宽度,我是不是可以给最小宽度,最小宽度刚才我们看到了它在七百五的时候是不是不行啊,所以最小宽度我告诉你,比如说我我给了一个800,最小宽度是800啊,那现在你来看刷新。我是不是直接就拉开了啊,你看啊,我放大就是没有问题了。有。我好像给给反了吧。来把它先去掉啊,我们先还原默认。刷新一下。好了,这是正常的啊,咱们来看这个组的50%。这里啊,给的太大了啊,这里是多少,我给的是800了,你这里面多少,你这里才498,也就500了,对不对,那OK,我们也给他改一下啊,最。
47:05
小宽度500好,那也一样,它也会拉啊。刷新好了,只有那么一点点的,诶。这是什么鬼?什么时候出现了水平滚动条?行,先不管吧,我们先说小看啊。看缩小缩小缩小,诶你看最小宽度是不是给它限制住了。看到了吧,到这儿啊。是不是回来当然啊,我们在驻房做的时候,肯定不可能会出现这种效果,对不对,因为浏览没有任何一个设备,就是这个移动设备,手持设备能让你在这没事,这么这么拉缩的这么拉这么深,这么让你这么去玩对不对?哎,只有什么,只有我们在这里面调的时候,我们才能看到啊,所以既然我们已经看到这个问题,那我们就给他调整一下,对不对?哎,包括你看这个图片,我在缩小的时候,这个图片有没有在变化,是不是也有在变化,你看好了。这个图片多大,是不是才这么大,哎,我是不是也可以给他做一个什么最大最小的限制,对吧?所以咱们这时候就看到了,其实我们在布局的时候是有问题的,什么问题呢?就是实际上我们这两种像素是不符合的,对不对?哎,那不要紧啊,在这里边我先这么做,到下一个阶段呢,咱们这个下一个阶段老这个老师会给大家去讲这里面的像素的规则啊,像素的规则啊,好了,那既然这块我也给他设置500了啊,那这里边这个图片既然它也在缩小,那我这里边也给他设置一个了,这里面最大的宽度是200。
48:32
MN最小宽度1198PX,嗯,我只让它上下浮动两项数就可以了啊,来刷新一下吧。好了。刷新一下啊。IPHONE678看。M678哟,看到了吗?我的这个完全超了,看到了吧,这里边。
49:01
谁抄了这个top top,我给了什么东西看一眼。Top的宽度。诶。没问题啊,怎么抄怎么回事,刚才刚才是没刷新过来吗?没抄啊,来重新刷新一下啊,然后再来回来好了,这回对了对吧,刷新一下,然后现在我们开始M678完事了,我再来调整它,让它开始进行放,但是一大的话,它确实有诶。是我的电脑在卡吗?还是怎么样?你看啊这边的这个,因为你注意啊,它不可能是有这个这个这一点,你看这边我因为我设的是100%平对吧,我的总宽度你看我是不是设的100%,你看到了吗?我勾选勾选你看我这边的宽度是不是就没有了。就是他。
50:00
哦。还是这个问题啊。我的这个宽度给它设置的500这个啊,最小最小宽度不要500啊,最小宽度400啊。刷新。好了。缩小。没问题。放大放大放大放大,这没问题对吧,再放大再放大,再放大再放大,哎,这回没问题了,对吧?哎,这回没问题了啊好了,那通过什么通过了,这个叫做。这个东西给它设置了,那同样我最小宽度,我是不是也可以给他设置最大宽度,最大宽度也给他400,是不是就给它限制这个宽度就是你。按照百分比来走没问题对吧,但是你的宽度始终都是什么都是400对不对,那这个时候是不是就没问题了,哎,好了,那一样,这个这两个A,这两个A标签我们还没调呢啊,咱们把这两个A标签调一下了,那一样回过来找到这个大屏的。第一个selection,这也不是第一个select,我们压根就没调,对不对,那就是。点LG。
51:00
下边的right对吧,它里边的for selection冒号first to,第一个selection里边的A,它的字体颜色要为井号666。好了,刷新。OK,字体颜色也变了对吧,那你看现在这里边是不是也是这样的啊,它这个是黑色对吧,那我们这里边给的是灰色,那就给他000也行啊,给他000。对。走,你。是不是就过来了啊,过来以后来。这都没问题了吧,这都没问题了吧,那现在我的这个顶部是不是就搞定了对吧?哎,这叫什么头部啊,我们网站头部就搞定了,但头部搞定了这里面还会遇到一个问题,什么问题呢?就是当我们这个叫什么导航,当我们一点击导航的时候,这块是不是导航一点,导航是不是要便利导航出来,也就是头部里边是不是也有一个导航啊。哎,所以这块有个问题啊,我们需要把这个导航的样式要给写出来啊,因为我们本身默认就要什么,我们说了要兼容移动,所以我们先要这个导航才可以啊,好了,那这节课我们先到这里,下节课我们再来写这个导。
我来说两句