00:00
好,那我们继续来上课,那么这节课呢,我们将以我们项目的这个首页啊,使用这个深入和方式进行什么布局,那么一样,我们这是响应式加上什么加上三成合的布局方式,那么这节课呢,我们开始利用这两种技术结合去布局我们的这个页面,注意啊,我们只是布局它的大框啊,好了,那现在我们来看一下,在这里边我新建一下,新建一个这个文件,比如说叫做这个。首页布局实战好了,那么这里边也一样叫龙呢,叫做这个,比如说随便起个名字啊,网站这个商城啊,商城首页啊,商城首页布局实战,注意啊,布局不是你写里边内容,是把它大框给勒出来啊,那么咱们来看这里边啊,我们就以这个移动端为例,因为咱们说了,我们再去做响应式的时候都是什么,以移动端优先对吧?然后是什么?然后是这个pad端,然后是这个PC端啊,就是也就是说最小屏的优先啊。好了,那现在咱们来看啊,在这里边第一个是不是它的头部啊,对吧,头部在最小瓶的时候呢,我们先来分析一下,你看好了啊,这里边有这么大的一个元素,这个元素的背景颜色是这样的,然后会分成什么,分成左跟右这两边的这么一个元素,对不对,而且呢,咱们还要看它的这个中间放置的比例跟下面是不是一样的不一样。
01:19
哎,这不是。这个才。这个太小了啊,这是大小瓶啊,好了咱们看啊。嗯。它会比较小,看到了吗?它会比较小一些,对不对,哎,当推上来以后,你看这个这两边的间距啊。这两边的间距是不是就会大一些了,对吧,那OK,那这样我们先不管了,因为现在推我们还不会推呢,对不对。哎,那咱们来看,那既然是这样的话,我们肯定要有一个头部标签,叫做什么hier hier里边会包含什么,包含一个selection标签,没错吧,然后在selection标签里边又会包含什么,一左一右的select,什么CTRLCCTRLV,对吧,这块我写上我就直接写文字了啊叫左部,不对,不能叫左部啊,叫左侧图片对吧?然后呢,这块呢,叫做右侧内容,这个别的叫图片了,这叫什么,叫做logo吧,Logo logo logo啊好了,那现在我们来看我们的页面啊,肯定不是这样的,对不对。
02:20
来,你看好了。这不都是这样的,那我得干嘛呀,我来给他设置一下吧,来我们这里边直接去引入外部文件link下边的当前目录,比如说叫做style.css我们通过它来进行设置,那么右键这里边新建一个CSS文件,叫做好了,那在这里边,那么我们先是说要以移动端优先,对吧?移动端优先,那怎么叫移动端优先呢?就是你以移动端布局。就是你以移动端布局啊,什么叫移动端布局,就是这个窗口啊,你不要开太大了。你就直接。给我来这个就行了,好了,现在你看第一件事,这里面的小字你能看得清吗?看不清对吧?我们是不是必须要保证他们两个的宽设备的这个宽度是一样的,所以我们需要给它设置一个mate标签,然后给它定义什么呀,这个name属性等于。
03:12
VPD对吧,Report,然后content的内容,一个是它的WT宽度要等于什么呀D。呃,叫DDV-WPH对吧,这是第一个属性,另外呢,是不是还要控制什么,控制它的这个叫什么缩放嘛?哎,那就是这个init inital等于SSC,呃,Color s sc啊缩放为1.0,好了,那现在咱们再来看,再来刷新一下。诶,这回文字就好了吧,哎,咱们网站默认文字是16像素啊,默认文字是16像素,OK,那现在不管这么多了,然后接下来我们回到这里边,那第一件事干嘛,我们用到了这个body,我是不是要把body里边的pap。
04:02
啊,不得是pad先清零啊对吧?键marin清零对吧?注意你不要上来把所有的标签都写上来啊,因为你用不到那么多对吧?比如未来我用ul用Li,那没问题,你就再写就行了啊来这回再来看刷新,刷新以后是不是都清零了,清零以后我们先把这个hier,也就是我们头部样式啊。头部。标签。头部样式吧,头部样式设定啊,设定好了,那咱们来看啊。叫优先叫移动端头部样式,应该这么说对吧?移动端头部样式好了,那这里边直接设置he he开给它设置等于什么呢?叫做这个宽度WT是不是等于100%啊,它是100%宽的对吧?高度呢,高度肯定是根据里边内容对吧?它现在内容多宽我们也不知道,那么咱就给了这些,然后我们先给个边框看一下包点一像素,给他一个blue蓝色,那我们先看一眼来刷新。好了,注意啊,看有没有超出啊,你看是不是出现水平滚动条了,看到了吗?哎,因为什么水平滚动条,因为我们说了宽度式的100%,然后又加了边框,那么我们这个普通的核模型,就标准核模型是不是它的这个元素大小会包含它的什么呀,内间距和什么和它的这个边框,所以我需要对应的减掉才行吧,那这怎么减,我给他百分比没法减对不对?所以这里边怎么办?Set等于fo是不是给它设置成怪一盒模型,怪一盒模型是不是就不会占据什么,占据边框了。
05:32
哎,那OK,这个时候你来看是不是就没有水平滚动条了,哎,好了好了以后接下来干嘛呢?这里边咱们也一样,我给他点拍顶啊,比如说我这里边。Pad pading,嗯,上下左右为五像素,呃,别给了,直接干给个paing-top呃,20像素得了,对吧,因为人家你看人家这个页面上面是不是也有一段距离啊,哎,所以这里边来刷新是不是过来了,哎,二值要小,那你就给30呗,对吧,然后给他一个背景颜色BCK加und井号。
06:02
那是什么颜色,谁谁谁嘛,就给个谁谁谁吧。好。刷新这不有了CVC好那什么呀,一吧,F7F7F7。走,你这个是不是有点太浅了,F1F1F1。OK,这样可以对吧,那有了它以后,那这个边框我是不是就不需要了,好了,让它还原刷新,OK,那么接下来是什么,是不是这里边的这两个内容了,这两个内容那看好了,我在这里边给他定义一个。给他父类定义一个啊,定义一个什么呢?定义一个class,或者我定义一个ID叫top都行啊,定个class叫top,然后在这里边继续。点top,我给它一个包的等于一项数实现的红色,我先让大家看它在哪,看好了,它是不是尾随着父类而来的,那么好它既然它的宽度会随这个继承它的负类,那么宽度我肯定不能让那么宽,我要给它小一点,比如说90%对吧,然后呢,让它干嘛呢?让它妈上下为零,左右自动驱动。
07:08
来这回你再看是不是居中了,哎,居中以后注意,那它是不是需要干嘛,需要做成伸缩核了,所以这里边我给了一个this play等于什么呀,等于这个fle好了,只要它一变成深和两个内容是不是一左一右。对不对,然后接下来干嘛,接下来给它设设置这个主轴的方式吧,怎么个方式,是不是PA-between两边对齐。走你两边对齐吧,哎,那么同样我把这个top啊,你看好了点top下边的。呃,Secretl selection,我让它的边框也起来。呃,红色好。来,你再看,换个红色吧,别用红色了,来个蓝色。走,你注意啊,这里边有什么问题,你看两个内容,因为我们做成生成盒呢,它会根据内容大小而去增大的,这个减小对吧,那你看这里边啊,现在图片已经是这么大了,来我放放放放放。
08:02
你看当我放大的时候,图片是不是更大了,哎,也就是说越放图片怎么样越大对不对?哎,而且注意了啊,当我放到这么大的时候,这边显示的内容跟我刚才手机端的是不是完全不一样啊。对不对,哎,所以这个时候怎么办?我是有两种选择,要么我把这段内容单独做成一个标签对不对,要么干嘛呀,我就开始对应的去减少一些,所以最主要是什么?就是比如说这个页面我是一个标签控制这三个效果,那么等到这个页面的时候,我又是一个标签控制这么一行的效果,这样是最好的啊,然后先看这个图片,这个图片是干嘛,是不是尾随着我的这个宽度在增加,它的图片会变大,对不对,所以这里边你看了。我这为什么给个边框,我给边框的目的就是看我在缩放它的时候,它会不会变大,我是不是要求它变大呀,所以这里边我需要给它进行一个设置,那怎么设置呢?咱们来看在这里边同样我给了一个class叫什么叫做点logo。然后style这里边叫做点logo,它的WDT也是宽度流量,比如说等于20%。
09:03
15%也行,15%,15%OK,注意他给15%的时候,那现在你来看好了啊,我来刷新。咱不能这么小,手机也没有这么小的啊,来刷新一下啊,那OK,看它会不会跟着跟着内容去增大去增大啊走走走走走A宽度没有吧,点logg我写的对吗?来看一眼啊,加了个点。刷新看这个是不是大了对吧,你看越来越大对吧,因为图片你注意图现在我们没有高度,都是什么扁平化了对吧?但我这里面只要加了图片,是不是图片会存着宽度,让它随着这个元素变成满屏宽,100%的宽,对不对,那宽度只要一增加,图片是不是也会变大,那你看缩小缩小缩小缩小缩小。你看内容是不是在变小啊,哎,那OK,那现在问题不在这儿,问题在哪呢?咱们说了我这块实际上有两个元素看到了吗?第一个也就是说在小屏的时候,这个元素是隐藏的,显示了这个元素对吧?显示当前我们看到的,这就相当于一个div了,对不对?一个元素里面包含了三个什么小图片嘛,是不是这个意思,哎,那么如果放大以后,放大放大放大放大大再大的时候,那个元素什么是不是就消失了,那个元素消失了,这个元素是不是就显示了。
10:18
对不对,哎,所以这里边我需要干嘛呢?再给他做一个标签啊,再做一个ec select叫什么呢?比如说这个叫做大屏右侧内容,好了,那现在你看我们的啊,这里边我们来刷新,你看默认这个是不是就有了,有了肯定不对吧,这个大屏右侧内容是不是得隐藏啊,诶,所以这里边咱们来看我给他一个class等于什么呢?AC。Clss class啊,等于LG-H,呃,LG-hid hidden啊,LG代表大屏的意思,大屏hidden是不是大屏隐藏?不能叫大屏啊,咱们MS吧小瓶啊。MGMSSMMSMS杠开的啊,这是这个小瓶的时候它是隐藏的啊,来咱们来看。
11:04
找到。样式这里边我要给它设置隐藏嘛,那点MS等于什么,等于H,呃,Display-n na是不样的隐藏,那现在你看它一隐藏来是不是就变成左侧右侧内容了,哎,那你看这都正常了,对吧,但是当我达到一定屏幕的时候,是不是它就要显示出来了,右侧内容是不是要隐藏掉了,所以在这里面干嘛呀,我继续。给这个右侧内容也定义一个class clss,比如它叫什么呢?它叫做mi,不对,叫LG-hida,也就是大屏的时候它隐藏对不对,哎,小瓶的时候是他隐藏,没错吧,那OK,那这里边。是不是就检测大屏了,那ADD的me me啊,这里边我就检测一个就行了啊,叫做scc screen and。安的什么条件呢?MN最小的宽度在多少呢?比如说在750像素的时候啊,最小宽度到七百五的时候,就走到这里来了,走到这里来我要设置这个的。
12:07
比如说我设的header的背景颜色,我们先看啊,等于红色,好,那现在你来看好了,来刷新。现在是不是变红了来缩小?缩小你看到七百五了以后,是不是就开始变红,变红是不是就符合我这个要求,我在我的检索是不是检索到了。对吧,哎,那检测到了以后,那么第一件事干嘛,第一件事我要把它的top值给它缩小了,Top的WDTH宽度为60%。60%。因为你看在人家原有的这个里边,你看如果人家换到大屏的时候注意啊,哎哟这个。我再拉大点啊好再来拉来你看是不是人家这个宽度很窄对吧,很窄,你看它下面是跟它对对齐的,看到了吗?哎,这个是跟它对齐的,所以在大屏的时候干嘛换成了60%的宽度,那现在我们来看我们自己的啊。这里面。刷新你看是不变成了这个这么样一个宽度了,看到了吗?哎,大屏幕现在都已经131306了吧,哎,你看你看你看。
13:08
对吧,到小瓶的时候是是又放大了,哎,大屏的时候是不是又缩小了,哎60%,比如说有点小,那我们就给多少赔个70%呗,只是干嘛,只是改了他一下。这个属性70%,好,现在再来刷新是不是要大一些,哎,但大一些条件是什么条件,是不是这个家伙得隐藏啊,所以这里边应该叫什么点。这个MSLG拍的这个到大屏隐藏的时候,它应该是d play为no隐藏。所以说吧,那现在咱们来看走,你隐藏掉了,隐藏以后是不是那个要显示那点M。S hidden是不是this play为b block让它显示吧,那现在你看刷新大车大屏左右侧内容显示对吧?啊,右侧内大屏的右侧内容缩小缩小缩小缩小,你看小的时候是不是就右侧内容了。看到了吗?哎,一直是右侧内容看到了吗。
14:00
哎。诶看到了吧,那我头部是不是就搞定了,好了,那头部这块布局完成以后。那接下来什么,接下来是不是就开始导航了,那么导航大家注意看啊,这个时候导航是在这个位置,如果我在缩小缩小缩小缩小,你看到小屏的时候,导航还有什么,导航是不是就没了?哎,那也就是说在这里边我需要有一个什么,有一个导航标签吧,那NAV对吧,叫这是导航啊,那么有了这个导航以后,在style这里边,同样我在这个位置需要干嘛?头部现在是不是设置完了,相当于诶,那我就开始设置导航样式啊导航。样式导航在我们小屏里边默认是什么?默认是不是就是。隐藏的对吧,所以直接为这次play BIS,这次play等于什么,等于no na啊让它隐藏,那么当到大屏后呢,到大盘大平以后,是不是这块也一样叫做。导航样式当到了大屏以后样式啊,就是不是就NAV让它变成play。
15:04
Dis Dis play为什么为block让它显示吧,那现在你来看好了啊,我再回到我这里边来定,现在这是导航有了对吧?缩小缩小缩小缩小缩小是不是没有?哎,又来了,那大屏导航肯定得有样式吧,那我们开始去调整它的样式啊,那这里面都有什么样式,我直接在这个外面调整好了啊AV杯是不累是杯字不累了,大家都咱们能想起来它的宽度是啊70%对不对,哎,跟上面肯定是比较一致的,然后呢,比如说马丁上下各为十像数啊,左右为零,左右为自动啊什么为零自动让它居中对吧?那OK,然后这里边比如说给他个拍顶pad的ID,拍顶上下为上下左右都为十好来刷新。看是不是过来了,哎,过来以后一样,我们给的导航一个边框嘛,来buildd border移像素实现的这个blue来这边框好。你看导航是不是有了,哎,那么一定要注意啊,这个导航你看我给的是70%的宽度,是不是超过这个宽度了,为什么?因为我这里边有十像素的边框,不是边框有这个十像素的内间距吧,所以我要给它设置什么,设置成,呃,不是杯子,是box,是杠size,给它设置为这个外一核。
16:15
好了,这是不是就一样了?哎,那OK,那导航你看再缩小缩小缩小缩到最里边是不是没有了,哎,好了,导航完事再往下面是不是就这张图片了,你看啊,导航缩小缩小就没有了,接下来是什么是图片对吧?那图片的话也一样在这里边。我们直接给他一个叫做ec select井号等于BN banner啊,这叫什么叫做banner图片。反正咱现在没有占位就行了。班的图片啊好了,那么有了这个班的图片以后,我在这里边继续设置导航已经完事了,对吧?哎,这里边继续来叫做B呀班的图片。搬的图片,这里面直接井号BN班的,我让他的这个。
17:02
哎,它的宽度是什么?它的宽度是满屏宽哦,你看啊,小屏的时候满屏宽,大屏呢,大屏是不是也一直都是满屏宽,看到了吗?哎,那OK,那既然是满屏宽的话,那我的这个width宽度应该等于多少,是不是应该等于100%。对吧,然后BC加用D井号,我还给他一个颜色,让他做单位就行了,高度我随便给一个,比如说he I he ID,我给他一个400单位啊。好了,给个400占位就可以了,那现在再来还有什么in,上下为十像素,左右为零像素,它需要自动吗?需要居动吗?不需要,因为它是满屏宽的,对不对?那现在咱们再回来看周尼。导航是不是满屏框的有了看到了吧,那一样,如果给加给加边框以后,这个元素我必须干嘛,必须给它设置为box杠。Size为。这个怪一盒对吧,这样加边框就不会对我有影响了啊好了,那搬到现在完事了以后。这个斑点我给的400有点大是吧,给他200吧,小一点啊。
18:03
好了,班ner现在完事以后,那你看啊,一样放大放大放大这都不影响对吧,这里边的班ner也是一样的啊,这个不要了啊,来这里边你看这里边的班ner放大放大放大放大是不是也没有影响,哎,但是呢,它这块还有这个定位的属性,那我们先不管它啊。好了,那再往下什么,再往下是不是就是这块的内容了,这一块内容呢,我们就得看一下了来。诶。是不一样,看到了吧,大屏的时候它是什么,它是这样的对不对,小瓶的时候呢,小瓶小瓶小瓶,你看小瓶是什样,小瓶的时候是不是这样的,也就是说这里边要要有一个什么,要有一个吧,有一个div装的什么装的这是应该这该是一张图片,今日秒杀,你看是不是图片,诶是一个1IMAGE对吧?哎,也就说这里边有一个div你看。装着再往上是整体的对吧,整体的这里面有个div div里面装的是什么?装的是我们的这个图片,然后再往后呢,装的是我们的什么呀,装的是我们的这个呃,叫叫叫叫小商品呗,对不对,那OK,那我们再来。
19:05
注意啊,这些都是小瓶的对吧,那这叫什么,这叫秒杀吧,那来一个叫做今日秒杀。好了,那今日秒杀这里边我们也一样需要给他再去加标签,SEC叫做ID,等于。秒杀。今日秒杀真元。热销热销,秒杀秒杀,秒杀的英文怎么说呢?百度我们翻译一下。翻译在线。淼。上。好了。叫做。Cle是吧,那OK就用它了啊来定义的是cle好了SSEOK,那记住啊,那在这里面他说了它是有上下两个div的,对不对,那也就是在这里边有个select,这是我们杀的顶部,然后还有一个这个ec select做秒杀的底部,对吧?那这里边我们可以通过来设置这个,比如说叫做SSE-top是不是顶部的,然后这里面继续class叫做SE。
20:26
CL叫做b button,这是不是底部的,哎,一顶一上好了,那我们设置一下啊。来接着秒杀,注意啊,我没在,我没在这里面是不是都没写大屏的,我现在都是说我们说了以小瓶为主,我们先写小屏的啊,小瓶出来以后再去干嘛写大屏的,来先看小屏的效果。好了,小平台还是比较简单的,对吧,有一个精准秒杀,然后这里面诶这个。哦,不对,哦,这是一个。这是一个。
21:00
好,我是怎么分的啊,我看一下我们的布局啊,我的布局。TOP8没错啊,Top就装了这个今日秒杀的这个内容,八本就是底下时间加上这个商品嘛,对不对,那OK,那在这里边一样,这个叫做什么。今日秒杀图片。秒杀图片。对吧,然后这块呢,叫做。今日秒杀时间。啊,不能叫截止秒杀时间啊,它应该是CTRLX。然后selection,接着秒杀时间,然后下面就是我们秒杀的商品,这叫秒杀商品,秒杀的商品。是不是这么样的一个划分呢?哎,好了,那现在我们先看我们这个样子是什么样的啊来走你。一定是很难看的,对吧,因为我们还没有设置的,那现在我们开始来设置的,那么在这里边也一样的,找到这里边今日秒杀点点S。Q。
22:00
然后哎,不对,我们应该是井号Q对吧,然后给它设置一个这个叫做WTH,注意啊,它默认的时候,你看在这个移动端的时候,它是不是也相当于是满屏的,这是不是都是满满屏的效果了,哎,只是这里边内容看着跟它有点是对齐的,看懂了吗?他应该也是给满屏的,我觉得。来我们量一下啊,看看是不是满屏的,你看是不是也是满屏的。看到了吗?哎,所以它这个也是满屏的,那OK,我们就也给他满屏的了啊,那它的这个宽度就不需要去设置了,它就可以去继承它的这个负类了,对吧?那么这里边我直接呃给他一个什么呢?让大家能看出来的,嗯。我小屏好像不用设置的是吧。来吧,给个白为红色,别红色了啊,来个黄色吧,今日秒杀我们就给他一个背景颜色了啊,咱们来看来东尼背景颜色有了对吧,有了以后接下来什么?接下来就是这个今日秒杀的图片的处理吧,图片是不是在哪在我的点秒杀啊,不对,是S。
23:05
Top这里边对吧,我们给他,比如说W给他们给一个吧,给个big background或给个border也行啊,来BD border1像素实现的井号000,给一个黑色,那么它没有高度,我们先随便给一个高度,让它进行占位,那现在咱们来看走你。有了吧,有了以后让这里边的内容做一个居中,直接给他一个takes杠和那等于center是不是可以居中,因为这里边我们用伸盒直接内容居中的,哎,那OK,那你看这里边第一个秒杀这块完事了,那接下来是不是下面的这些内容,下面这么有一个这么大的一个区块,对吧,然后有背景颜色,然后有这两个东西,那下面呢,就是这个点SE。Button对吧,它width,比如说不需要啊,给直接给四个高度he g,我比如说我先随便给个200像素的高度BCKGRD为井号fee,好了,现在咱们来看啊,在这里边刷新。
24:01
OK,是不是就有了,有了以后一样秒杀时间,你看你秒杀时间是不是也是居中的,那也就是说在这里边。秒杀时间是不是就是点。Top下边的select冒号lasted,不对,是first第一个对吧,Fired firsted,给他一个什么?给他一个这个叫做呃。T杠和等于一个center,好。让他也居中对吧,居中完以后它可以干嘛呀?Mar马井距离上下,比如说十像素,上下左右都像素来走,你是不就下来了,哎,下来以后为什么这个黄色也下来了呢?我的背景颜色有黄色吗?没有吧。哎,那OK,那这样的话。我们要怎么给他一下呢?我们给他一个边框,看一下来包的移像素实现的红色边框,我们先找一下。总理。看到了吧,是在这没错吧,哎,那OK,因为它这里边,因为这个今日秒,今日秒杀图片,这里咱们看一下我给他设置什么了,今日秒杀图片是他吗。
25:03
宽高,然后给黑色,那就是他啊,是他。背景颜色。诶。他给的是黄色。啊对啊没错,因为他一往下来这块是不是有块背景是这个。空白的了,对吧,因为我给他父类的背景设备是什么,设备是黄色吧,哎,就是整个这个元素设是黄色,然后呢,里边的子类我又设了一个什么,设置了一个这个这个灰色对吧,那咱别给黄色了,给他一个什么呢?就正常的白色吧,来或者不设置了啊。但是咱们。W。Hi。好,这个没问题对吧,哎,有了精日秒杀,精日秒杀完,接下来下面是不是就是商品图片了,那也就是说在这里边的点s SE button下边select的last,然后直给一个这个呃,就不需要了,就吧是吧,直接给他一个框嘛,包像素实现的,给他一个GR绿的框,然后。
26:10
让它变成怪一盒好了。在这呢,对吧,同样我高度还有多少,比如说我刚才定义了一个高度是400对不对,是400还是200 200对吧,那OK,我给他一百八吧,180。走,你。高度是别过来一百八有点多啊,因为它上面还有十呢,就再减点给他170。好了,现在你看好了,我复这个这个东西是不是设置好了,那么设置好以后一样,我在放大放大放大放大的时候它可就不是这样了吧,放大的时候什么样来。看这里边。这里边啊,看好了,放大放大放大。这都没问题对吧,放大放大放大放大,哎,你看一放到这个时候它就变了,变成什么了,是变成这个两排了,对吧?哎,第一排什么,第一排是这样的,然后下边是这样的。看明白了,那也就是说当我在放大的时候,这里边。
27:04
看好了啊,是不是它。需要有一个,我还需要有一个准备大图的吧,哎,不叫select selection对吧,然后这里边我也再来一个。哎,秒杀商品我看一下啊,秒杀商品商品始终都是这样,我缩小呢。缩小商品都在一列对吧,那确实是需要更换一下啊好了放大回来吧,那这里边就相当于有首先先有什么左右两个。是这样吧,哎,左右两个两个div啊,左右两个div应该是还是一样啊,这块是一个没问题,下面是左右两个,上面也是左右两个啊,还是分两个div吧。来,你看好了,这块叫做大屏。显示顶部。对吧,然后呢,再来一个selection,这叫做大屏。显示。这个秒杀。
28:00
商品内容秒杀商品内容OK。好,那现在咱们来看啊。默认刷新,你看好了,我的样式基本上已经乱了,看到了吧,大屏顶部对吧?然后大屏秒杀三屏在这儿呢,那正常来说,如果到大屏是不是这俩家伙都在呃,都在隐藏呢。哎,这几个家伙都在隐藏对不对,那所以这里边我要直接给他设置了啊,也就是。呃,我的样式还没失效吗?没有。Selection。它确实保持了第一个这个lesson,我用的是last child。啊,没有用的,他俩那没问题。这里面来给它设置class。可。Class等于叫做LG。呃。T。大屏的时候它要显示叫LG-so吧,啊LG-so,大屏的时候它要显示嘛,对不对,然后再来还有什么呢?还有一个。
29:07
这个也给了一个class,它叫做LG。杠大屏显示。哎,大屏它俩显示,我看我那个隐藏,他俩默认隐藏的,默认隐藏的,我上面是不是也做了一个隐藏的,你看LG的时候hidden就是隐藏,小屏的时候隐藏哦,我有个小屏隐对吧,那OK,我这里面一样,这是不是小屏隐藏MS-hidden对吧?这里边是不是也是小屏隐藏的MS-hidden。哎,那么同样他们两个是什么?是不是大屏隐藏,那就LG hidden,你看我就不用写了啊,直接LG hidden好了,现在咱们来看啊。刷新有没有隐藏,他俩是不是隐藏了来小瓶小瓶小瓶,你看这回是不是对了,看到了吗?哎,我剩下是不是只需要什么?哎,我这咋这么小呢。秒杀时间,这秒杀时间我设置什么了。
30:02
你看这花声怎么这么小?我刚才给。高度。秒杀时间秒杀时间这里看first child takes center margin啊,给了个margin,看到了吗?哎,那marin就给零就行了,不是上下给就行了,左右是不是就不用了,我说怎么变小了呢?来找到这个马径,上下为十,左右为零。啊,不能让你小了,对不对,你原来什么样就什么样好了,那你看啊,小平面是这样,大大大大屏,是不是那个隐藏了这两个显示了,那这两个显示了,那该怎么做会了吧,那是不是我们就继续往下调就行了,这里边。当然啊,你不能再调这个属性去啊,你不能调这两个属性去,我是不是因为它是class嘛,我是不是再给名让他写就行了,对吧,这里面我是不是给了一个,呃,他隐藏,他隐藏的话。它显示对吧,它显示它是内容吧,那这里边我给他一个什么SE。KSO,商品呗。
31:02
CTRLC,然后还有一个他。对吧,同样给他一个SE,这个不能叫stop了,这个叫top吧,顶部。没有重名了,哎,有重名的对吧,有重名的就不行了是吧,那它应该叫做嗯。Top咱给给一个LG,哎,标注一下这大屏的这个也一样LG。这个我都可以不叫so了,我叫beauty。保持着一样的命名法,对吧,方便我们再去写的时候一个记忆啊,好了,那再来点LG。杠top,这里边我们直接给它一个包的移像素实现的红色,好,我们先看它。有有了吧,有了以后注意它是整个的一个嘛,肯定是你看好了,在我们大屏这里边,它是不是也是居中的相当70%啊,所以这里边第一件事先给它Mar g,然marin设置为呃,零左右AU to凹凸自动对吧,然后WDTH宽度是不是70%的宽度,那现在再来看。
32:08
这呢吧,中立。没错吧,跟他们是对应上的了吧,那你看这都没问题,大屏显示,当然这里面会包含左右一左右就可以了吧,那你看这里边大屏显示这块啊,大屏显示顶部。那我就得给它切一下了啊,Secret一个大屏显示顶部。然后EC2个。这块也叫大屏显示顶部,诶好了,那么给他是什么?是不是设置成深着盒,那就是这play为呃,Block吧,Block不对。Flex啊。这回你再来刷新大屏,显示两个顶部A。点LG下面的这个,我play。怎么没好使啊?
33:00
杯子,Play。Refuse。没好使。因为它是大屏下边做显示的。因为它是大屏下面就显示的,你看这个属性有没有生效,来点过来啊,点过来它的上一级是不是这个,你看this play block。是不是把我的这个类给我。你看这把它给失效了,哎,因为这里边有个this play block了啊,那要想让它为主的话,我需要干嘛呢?加一个这个属性,那么这个时候就以它为优先走你。总理还是不行啊。不行,整个都给我干嘛,整个都给我去掉了对吧,那OK,那既然是这样的话,我就不能在这里面进行什么进行编写了吧,因为这里面编写的话,我一旦block整个都给它去掉了,对不对,所以这时候怎么办呢?嗯。哎,有办法了,给他俩换一下呗。
34:00
妹子,我挪一下啊,看看可不可以。来,索性。也不行啊。不管是谁,他都会。那怎么样?先设置的对吧,正常一项数,然后零,然后宽度这都没问题,然后移到这里的时候,你看好了,直接什么N这个,诶我没有设置什么吗。我给取消了是吧,来再来一下子这次play,但是没用啊,因为我这个那什么了,我设置data play隐藏和显示了,所以我再设置它是不是冲突了,那肯定是冲突的啊,那冲突的话怎么办?不要紧啊,我们一会儿再设置一下呗。再设置一下啊。嗯。他。你看啊,我们用的是这两个属性,所以它一个this play block,一个是这个,这肯定没问题的,人家是没有错的,只是我们这块再去设置的时候就不行了,我top,我再看一眼top里面包的东西啊,咱们来看top里边包了这两个东西,我们想要这两个东西做伸缩,做成伸缩盒,对吧,这两个子元素做成伸缩核,那么由于我们设置了。
35:11
这个家伙,他就不能去做珍珠盒了。那怎么办?我们就把这个家伙删掉吧啊,还是让他给我做成神州盒才行,先不让他隐藏了啊,来刷新。这里。给他play withs。走,你。好了,非以后接下来继续content为between,是不是一左一右啊?哎,这两个家伙是一左一右的啊。就一左一右,然后再看啊,你看人家原来人家可能占70%,他只占30%这么大小,对吧,所以在这里边我们可以直接给他设置了啊,给谁设置呢?给这个点。LG。Top里边的selection,然后冒号first got to,第一个selection宽度跟它占到70%对吧,那剩下是就30%了点LG。
36:06
LG下边的select冒号last-child,它的WDTH就等于多少30%,30%,好了,那现在我们来看啊。这里边。走,你。没错吧,哎,这回都有了啊,一个70%,一个30%啊,那咱们一样不能你要给他这个边框也可以啊,比如说这里边呃,我给他边框BRD啊包的个,但是要给的话就需要给一个box么样,那给D啊包移像素实现的呃格。然后box size等于啊。好了,现在你再来看总理。这两个是不是都有了,哎,这个颜色可能会浅一些啊,好了,那这块完事以后咱说了,那他小平的时候,你现在看看看小明是不是还在啊,那小明书是不是得让他,让他干嘛,让他隐藏才行啊。
37:03
对不对,所以这里边默认的情况下哪去了哪去了这呢吧,默认的情况下它应该怎么样,注意你看同一个属性啊,我再来设置一个na。你看他们两个。是不是就不行了,哎,也行,对吧,隐藏了看到了吧,哎。大屏的时候也是隐藏了啊,因为我默认大屏没让它显示呢,是吧,注意啊,我不用它了啊,咱就只设置完了,是不是现在就差这一条属性,只要这条属性出来是不是就可以了,所以这个时候我让他干嘛呢?直接是隐藏的,现在小明是隐藏的啊。好了,你看小屏现在是不是它是隐藏的对吧,大屏它是不是也显示了,那OK怎么样,它调显示啊,大屏的时候这个名直接拿过来给它设置什么,设置data play为这个不就显示了吗?对不对,哎来这个叫什么叫做秒杀。秒杀。秒杀怎么呢?它叫做this play为。
38:00
哎。我不设置block,它不也显示嘛,对不对,现在你看好了,是不是大屏显示对吧,这都大屏显示啊走走走小屏的时候它是不是隐藏了,这是不是也是正确的,哎,那OK,那搞定以后接下来什么,接下来是我们的这个内容吧,那内容的话,咱们看起名叫什么叫的叫的是这个。那么同样他也会遇到这个问题吧,那OK,这个MS我就不要了啊,不要以后我还是先来设置它。继续拿到上面这是什么,这是这个秒杀。秒杀大屏底部商品。好给它设置一下,这里边一样是点点对吧,然后呢,给它设置一个BD移像素实现的红色,我们先看一眼啊来先看一下周尼。诶。这就错了吗?点怎么又top了呢?应该是Bo Bo吧,那现在再来走你。
39:05
OK,在这了,那么同样它也需要跟它是对应的,对不对,所以它的宽度width宽度为多少,为这个70%吧,应该是。啊,高度我们最少给一个,比如说给他四百三百也行。典型的口是心非,来了吧,来了以后是不是还要居中,要再给他居中一下来?叫做Mar Gin Mar上下为零,左右自动,好了,让它居中。那再来看。OK,居中了对吧,居中完以后这里边是不是还是两个元素跟着上面的元素对应起来就行了,那你看好了,在这里边。这里边。大屏展示内容这里是不是还是一样EF selection对吧,复制一个,然后CTRLCCTRLVV是还是两个,两个以后在这里面需要干嘛,你看好了啊,我还是把这两个都挑好。其实这两个跟这两个是不是一样的,一样的写法呀,我就直接写到这后面了啊来咱就C。
40:00
逗号CTRV,但这里面得换一下它是什么?Button下面的BOM对吧,这个也一样。CTRLC逗号CTRLV,这里边也是什么button下面的吧,哎,那把top就删掉啊,BOT Tom OK好了,那都完事,也是一个70%,一个30%对不对,哎,那好了,那现在我们来看啊。刷新。你看没有伸缩盒对不对,哎,这里面也不能给他伸缩盒,怎么办?我就直接隐藏就好了。直接play。为na隐藏什么时候显示啊,是不是到了大屏的时候点LG-SSEL-BOT To Bot Tom给它变成display为sandro对吧?那现在你再来看走你。大屏。底部,呃。我的底部内容呢。秒杀图片,这是小瓶的,对了啊,诶。
41:03
我写错了吗?怎么没有了?这次不累喂。点SEL杠。我没有这个属性吗?DRLG啊,扫个什么,扫个LG吧。我选个RO了是吧,来LGOK,那现在再来看啊。整你你看大屏的这个是不是有了,哎,比如缩小缩小缩小到小屏,小屏小屏的时候,小屏时候就变成这个了,看到了吧,哎,是不是就变回来了,哎,当然我们没有做什么,没有做兼容pad端,我只是什么最简单的移动端和PC端对吧,那同样再往下,下面的内容你看好了,下面内容是不是就是一块一块的,这就是都一样了,对吧,你看看小瓶的,我们才说了以小瓶为主嘛。来,小平是不是这样一个为你推荐,下面就是一堆。商品没了是吧,那也就是说这里边有两个元素,那首页这里边再来再来就是我们商品区域了吧,井号secret叫product Du,产品啊,那么产品这里边我们会分为上下两部分,Select,一个叫做class,等于比如说product b b-top对吧,一个top,然后一个底下内容,产品内容啊,叫做button b DOM好了。
42:23
先管这两个,因为你看这里面是不是有一个为你推荐,这是不是上面的,下面产品是不是就下面的,哎,那OK,这里面整个背景颜色也都是这个颜色啊,那我们就继续在这里边秒杀完事了。这里边。继续叫什么呀,叫做产品。产品对吧,那产品的话,这里边咱们起的是井号pro product吧,那product直接我给它BGR,井号fe FAE f fe啊好了,那基本上没有什么东西了,给他一个边框吗?EPSLD给他一个GR,绿色还是给他个蓝色吧,然后B。
43:01
Box杠,好了,那现在我们先来看一下产品啊,来返回到我们这里边来刷新。返回来。是不是蓝色的,这因为它没有内容,所以它没有高度嘛,对不对,在这里边同样叫做叫叫做刚才叫为你推荐是吧,为你推荐。为你推荐。推。然后这个呢,显示产品。显示产品好了,那现在各位你来看啊,刷新一下,你看一个为你推荐一个显示产品都有了,对吧?为你推荐我不需要怎么动了,显示产品我们是不是要要处理一下呀,哎,为你蜕变这里面它就这样挺好了,我们就给他个边框就可以了啊来找到这里边它。第二。点它对吧,给他一个什么BD包的移像素实现的红色边框R间marin,让它上下为十左右为零。然后给他一个什么,给他一个这个box-size box-size等于border box好了,来为你推荐已经有了,对吧?为你推荐完事以后该是下面的产品展示了,对吧?那产品展示再往下来,那就是井号。
44:12
Button。啊,那它呢,我们要怎么来控制呢?比如说这里边一样啊,我先呃给他一个边框吧,EPS sod啊不这个蓝色对吧,然后呢,Box-size等于包box,然后同样我们先给它一个高度啊来200乘数。先给他一个啊,刷新一下来看好了,这里边是不是就要显示产品了,哎,不管几个是不是,这里边每一个显示两个,每一个显示两个对吧,大家都要注意到大屏的时候可就不是显示两个了啊,你看啊,小瓶的时候这里面显示两个,这没问题对不对,大瓶的时候你看可就几个了,那就是。因为我这里这个做pad端了啊,这个做pad端了,所以不用管它大屏的时候是不是相当于这里面就是能摆多少尽量摆满了对吧?哎,小瓶的时候呢,那就是固定好的两个就可以了,所以这里边我需要怎么去设置,咱们看好了啊嗯。
45:03
Ctrl X SEC t selection这里面叫做什么显示商品,那么它有可能显示多个商品对不对?哎,显示多个商品,那接下来我就直接在这里面进行设置了,怎么设置看好了啊,点2PRODUCT这里面的select SE。下面的selection,那它我需要怎么设置呢?到了W不用W了啊,我直接啊不行,我得给他一些宽度啊,因为它什么呢?我这里面什么东西都没有啊,比如说最小的宽度,比如你为200像素啊,然后max最大的宽度不需要了,然后它正常的宽度WDTH为48%。好48%中间留点像素啊,中间留点像素好了,给他一个BOARD1像素实现的红色红色大眼一些对吧,然后外面我让他不用了,不设置了啊,我们先看效果。刷新一下看啊。那小平是不是所有的东西都在这儿呢?我是不是要一个一个页面展示两个对吧?所以一个页面展示两个,这里边我需要怎么办?那就是这次play为那你现在看能展示两个不。
46:12
诶,现在咱这几个,咱这三个对吧,你看都得超出了,看到了吗?因为什么都没让他换行,所以这里边我需要给它进行什么进行一个换行为挖。啊,好了,让他换行,OK,这是不是一个两个了,那一个里边两个是不是左右各一个对吧?哎,左右各一个啊,就是有点什么,有点距离,那这里边就是just。Gut杠,Center等于什么?等于一个,呃,不是center等于这个呃,集。刷新你看这个是不是一左一右啊,哎,那一左一右一样,那我上下要不要有距离,你看啊,它这里边其实我不应该用它,我应该用什么呢?应该用这个around SPC around,因为它两边有点距离会好看一些啊来走你。但是用鹅状了,你注意,你说如果剩一个三品的时候,它是不是不行啊,哎,所以还不还是不能用,应该怎么还是用这个比between吧,那要用比吞的话怎么办?我就拍顶呗,拍顶的话,这里边每个上下左右你都给我距离五像数是不是就可以了,来走你。
47:13
这样是不是好看一些了,好看一些,那每一个产品之间呢,每一个产品之间你是不是还要有点距离,所以这里面我再给他一个Mar Gin margin也为无相数或者是十项数,但我给十项数会不会超呢?咱们来看一下啊,来刷新超了对吧?所以我给五项数啊,因这就是刚才我没有给50%的原因啊,五项数可能都超对吧,咱们应该给的45%。来走你好了,这位什么就没问题了,哎,你看这里边是不是也是这样的。看到了吗?哎,在左右的话,其实我们没必要给了,我就只给上下就行了,对吧,所以这个马景上下为。十左右为零啊,左右为零就可以了,来回来走你。看到了吧,这是不是就可以了,那这回宽度我是不是也可以放大了,这回继续48%,就这么任性,你看是不是就可以了,那OK,小瓶可以了,那大屏那大屏走走走走走你看了。
48:10
大学能这么显示了吗?不行了吧,大屏的话,它是不是就尽有可能展示多个对不对,包括小屏我说说说你看啊,说到这一定程度的时候,他是不是又开始换行了,那也就是说我这个最这是靠什么,靠最小宽度了,我这里是个最小宽度了啊,如果最小宽度要是100的话,那你看啊再来刷新。这回你看说说说看到了吗?这是不换行了,如果小于100,你看又换行了,看到了吗?哎,所以这是跟我最小宽度有关啊,那么一样大屏的时候,我们就需要干嘛需要让它。这个宽度就不能是50%了吧。对不对,第一宽度肯定是不能50%了,那第二呢,它的这个要进口能力多,对不对,所以这里边。这个宽度。导它CRC。我就随便先给一个啊,因为我没有商品,他实际上我们不需要给商品,对吧,直接给他一个什么,直接给他一个这个。
49:06
商品啊,直接给他这个内容就行了,因为咱们这里现在没内容,所以只能给他这个宽度啊,宽度给它变成变成多少,变成30%。30%,好了,接下来其他的都不用动了,刷新。诶。小屏没问题,看到了吗?大屏的时候有问题吧,诶你看中间为什么断档了,因为我用的是space这个between对不对,所以到大屏的时候,它的这个负类点product button应该是怎么样了,是不是just content。为这个。Flex star ST是不是这样会好一些,那现在你再来看刷新对吧,然后接下来干嘛,再调它里边的间距吧。对不对?哎,这样再调它里边的间距会更好一些啊,那么这个间距怎么调呢?那咱们就直接给它一个pad pading啊,Margin吧,Margin Mar margin left,比如说每一个给十像素好了。
50:06
OK,这是不是拉开距离了对吧,但是呢,跟这个你看跟这人家这个啊,这个这个这个这个诶你看人家在大屏的时候你看。你看啊,人家每个是不是都很很都设置很一样啊,哎,那是怎么设置呢?我们也可以这个宽度其实是多少,我大屏想摆几个,你想摆几个你就设置几个,比如我想摆六个,那好C。啊,干嘛计算属性,比如说它的宽度是不是就100%,100%除以六。啊,100%除以六,就是它的每一个元素的宽度啊,每一个元素的宽度,然后这个时候来你看好了。返回来。刷新,你看是不是六个放出来了。对吧,哎,那同样,比如说我这里面少放点啊,刚才我们放了几个四个,那就放四个啊,100%除以四来走,你你看。哎,这里面怎么没放到四个呢。100%除以四,我给什么了?
51:07
四个没放进来,没放进来是因为它有边框。它的边框是谁给的呢?是我们这里边给的对吧,所以既然给了边框包size。报到,刚才好了。OK,这位是不是上来了,哎,上来以后你看其他的都是正常的。看到了吧。都成了吧,哎,那一样每个商品之间让它有点距离的话,那是不是我这里边可以继续,但是我这里边给的是四啊,我应该给五,然后呢,Mar金刚。Lap。距离左侧十向柱是PX好了。走,你。十有点大呀。十有点大呀,我看看啊,它这里面的。我总共是一两三四五,哎,我总共五个元素吗。我不记得有六个吗?五个啊,总共咱就五个元素,看到了吧,那总共五个元素,我就一行显示五个。
52:05
一行显示五个也没有问题,那么一行显示四个,然后再给四项数。又下了一个。这样吧。还原还原还原不给它设置它了啊,还是现在正常干嘛正常。为几个,为四个就为四个了,来刷新好了,正常为四个,但是它这个四个是你看啊,这四个是多少啊,是一百分之一百嘛,就相当于100除以多少,除以这个四一样啊,我是四个吧,就100除以四,它的最小宽度,你看这里面还设了一个最小宽度啊。这呢啊,用他给代替了,看到了吗?哎,他给代替了啊,这就100除以四,你看我给他缩小看到了吗?哎,那这里边我们要想给他。给他,让他做一个。中间有隔洞的效果的话。
53:03
给他一个什么属性呢?给他一个。呃,Just。我应该给一个。S。Around around是什么?头尾,头尾会相隔,这个始终还是居中不行对吧,居中还是不行啊。嗯。刷新一下,让他还是回来,回来以后这里边的位置我不需要动了,就差这每一个每一个产品之间只要能分开一点,是不是就好看一些了,对吧,那这样的话我就还得这个宽度再扫啊。呃,宽度每一个减,每一个减十,每一个减十。像素。他不要这么算。拿错地方了,放里边啊,每一个减十项数。
54:00
好了,每一个减十项的话,这么我妈LEFT10总可以了吧,来,走你。哎,OK,这个没问题了,对不对,哎,那最顶部你看啊,最头的话。还是有一些小小的问题,对吧,你看人家这个怎么设置的啊来。点过来你看研究这个。人家这个是。你看好了宽度100%,然后最小宽度这些,这个不用管它了,然后你看它底部这里面怎么设置margin top,然后both size。然后pending,它是拿pading,它拿pading啊不对,宽度没有this display fix,然后让它变成rap,可以进行自化处理,对吧。这样处理以后,他也没有笔顺。他是把像素算好了。这是之前我写的啊,但是我忘了我怎么写的,应该是么,我把像素算好的事啊,我把像素算好的事,你看乙面积这么大,然后外层元素,看外层元素会这么大。哦。哦哦哦,我知道了。
55:01
真事。人的思做的,对呀,咱们看啊,我知道怎么回事了,我知道当初我是怎么做的了,来刷新,现在你看所有的产品是不是都挨着呢?哎,你看这里面向成I了,但是你就注意我如果在这里边,比如说比如说给它pad pad PA定十项数,上下左右都为十,那上下左右都空出来了,走你。看到了吗?都空出来了,包括包括什么,包括这个刚才我是不是还给了个main值,我记得啊。来外层这里边是不是还有Mar Mar我都不给了,看到了吗?Marin都不用给,直接全挨了,全挨的,现在你看的是挨着的,注意啊,你看的是挨着,但你要知道未来这里边,在这里边我是不是还要给东西呢,对不对,哎,因为这个元素它都挨着,然后什么呢?然后都是什么,都是这个给他排成十,那里边内容是不是自然是排成十啊。哎,所以这样的话就好看,也就相当于一开始这个。你看啊,他的selection你看这么大对不对,哎,那旁边selection呢,你看旁边那个selection他俩是不是挨着了,看到了吗?哎,但是所有的内容,你看里边有的内容都是什么,都是里边缩小的啊,都是里边缩小的啊,所以这样的话就看出就做出这个效果了,那OK,那现在这个完事儿以后,那我们来看小平呢,它现在是这样的,对吧?往里面缩缩缩到到这个超小瓶的时候,是不是就这样的,但超小瓶的时候这个。
56:23
这个挨着的也也没事儿啊,我们一样是不是还要给他个判定十啊,所以这里边啊,咱就直接给拍十啊。Style,我把这个判定池啊,不能放到这里啊,我只是在这个大屏的时候给他一个宽度就可以了。还放到哪儿呢?还是要放到这里的。啊,拍点。给他一个十。这样的话,无论大屏小屏我们都能用,对不对,来你看刷新是这样的吧,哎,大屏走走走走你看。是不是这样的,哎,那OK,那首页我们是不是就基本上快完事了,还差一个什么,还差一个底部吧,底部什么七天无理由退货,这里边看好了来再说一下。
57:02
你看底部到小瓶的时候,是不是它不显示。大瓶是不是才有啊,哎,小瓶桌它根本没有对吧,然后往下往下往下到小瓶的时候你看。报表平时就这么点内容了,哎,所以小明这里边那一样在这一块。在这块我直接foot foot里边有一个selection,这是顶部的对吧,然后再来一个selection,这是select底部的,那这块,比如说我给它起个class叫做O。Top。然后这个也叫class,等于fo o t-b button,就这两个东西对吧,这个叫做什么这个网页。底部上边对吧,大屏。显示啊,然后这个呢,是网页底部下。叫做往。页底部下OK好了,现在咱们来看啊,它默认情况下现在是都显示的对吧?来刷新一下,在这儿呢,啊在这儿呢,那么一样,我们先先去给他设置一下啊,还有为你推荐,哎哟,我们好像做的有点做作了。
58:12
注意啊,我这个大屏的时候,是不是这个最外头的像素没有设定啊,小屏的时候倒没事,是全屏,大屏的时候你得设定一下啊,来直接在这改了。Product product井product在这里边,这是没有问题的,但是。CTRLC把它复制过来到我的商品这里,对吧?来给它粘过来,如果到大屏的时候,它的这个宽度WTH应该知道,应该是70 70%,然后呢,呃,宽度是70%,R g marr,尖Mar上下为零,左右自动。上下为零,左右自动AQ。AUQ,好了。那现在咱们再来看啊。
59:00
刷新OK,这回对了对吧,哎,这回对了啊好了,那网站底部也是一样的,那这里边继续。这里面叫做。网站底部对吧,Foot foot foot,这里面需要设置什么吗?就是需要给它设置一个这个。小平宽度吧,哎,小瓶宽度它应该是应该是100%是没有错的哦,你看好了你家小平的时候啊。是不是100%的对吧,哎,然后是黑色背景BGR叫做。黑色背景。走,你来先给挑小啊,咱们说了以小瓶为主,对吧,小瓶是这样的,那小瓶里边的这个文字呢,是不是就是白色的,哎,所以这里边继续点fo里边的。呃,叫做不用。
60:00
Fo-bootm这里面包含的文字吧,Color这的井号FFF好。找你底下的文字有了对吧,然后需要它居中K-Lin等于一个center,让它居中一下。来有了,然后还有上面那个文字对吧,上面我们也是用文例代替的,那上面的文字是在小屏是不显示的,对吧,所以叫做fo-top,我该设置它,还设置它啊,我现在能color了,井号FF给它字体变白,我们现能看到它对吧?但是咱说了大屏显示的时候啊,注意你看人家大屏显示的时候,它的背景颜色可不是可不是什么,可不是这个黑色对不对,也就这个真正黑色只有谁只有是它才是黑色,所以我这黑色不应该设置给福,应该设置给谁呢?就应该设置给他自己就行了。好,那这个就不用设置白色了吧,那现在你再来看啊。这是他的页面,这是我们的页面。这个是不是就OK了,哎,OK了,咱说说它是不显示的,那不显示的也一样,这里边我该怎么设置,怎么设置,比如说高度,比如我给他个30像素,现在撑起来点啊。
61:04
来,撑起来点吧,三岁的太小,给他50吧。给了个50像素,是不是在这呢?哎,同样我比如说我给了一个边框BB border1像素实现的井号CC,然后box-size给了border box来。现在是这样的,哎,小瓶的时候它是什么隐藏的d play为。No,隐藏。隐藏对吧,那当我放大放到大屏的时候,放到大屏的是不是底部是不是要变了,哎,那也就是就是这个底部我们去找一下啊在这块。叫做继续。网站底部foot foot给他WW。ITH为70%。然后呢,这里边的这个in。为零左右自动对吧,哎,那这个福特设置好了以后,那么同样咱们来看。
62:04
大屏找你没问题吧,没问题,它上面那个是不是显示啊,那再来叫做点foot top this play this play为什么为伸缩盒啊,你不能设置block,因为它里边还有其他元素,你肯定得做伸缩核才行。看是不是就有了,哎,那你看现在首页整个网站的首页我们是不是就布局好了,对吧?哎,无论你是小屏的时候我们是什么样的,对吧,大屏的时候我们是诶首页的头部内容啊在这。你看小瓶的时候什么样的对吧,大瓶的时候什么样的是不都OK了,哎,剩下是不是往里填内容,只要内容一填好,样式不就出来了吗?没错吧,哎,那OK,那么今天就到这里,那么今天主要内容大家就要把这个布局啊,也要给我做出来,然后额外我们还需要去做一个布局叫什么呢?就是我们的这个列表页啊,我会把列表页的截图给大家。叫做。Post list啊,就是这个列表页的布局,你要不准两的小屏的什么样的,大屏的什么样的啊,我们只需要针对两个端就可以了啊好了,那这就是咱们这个。
63:09
响应式加上这个三装盒的。
我来说两句