00:00
啊,大家来看一下啊好,现在我们是不是头部功能做的差不多了啊,头部最后一个功能的话,是跟这个头条有关系的吧。是不是,所以说这个逻辑的话,我们得放到滚动胶做完才能什么做完,你看滚动胶是干嘛,轻轻的靠到头部上半部分的时候,这个头部下半部分才出来。是不是还有它比如说上方部分变没的时候,你点这个搜索按钮的时候,它也是会干嘛跳出来吧,那这些逻辑的话,我们只能放到最后就行,懂不懂,因为滚动条是我们最后一个功能点啊,那大家概那今天下午的话,我们得把这个导航的最基本的一个结构搭起来,然后把这个这个导航上面有两个东西比较难,一个是橡皮筋效果,一个是快速滑屏。啊,这个怎么变成慢速滑题啊,可能是我画的不好,停快一点,真慢啊,可能是过渡时间被被我调的有点大啊,就说可能现在就是一个慢速画屏,不过大家都知道应该我们是么快速的一个画屏嘛,是吧,OK。那么他这种东西怎么去写啊,首先呢,想想我们这个导航啊,结构应该跟列表差不多。
01:08
是不是,而且是不是又是一个拖拽。是拖拽,我们需要几个比较重要的结构啊。滑屏需要几个重要的结构。不管什么花瓶。两个一个什么包裹区域,我们可以叫华平区域啊,我们我们定死吧,就最外面那个包裹去叫花瓶区域,里面呢,这做滑屏元素能没讲OK,那这个结构我们得写写好,而且大家想我们头部写完了,下面是不是我们的内容区啊。这是我们的头部嘛,项目。这不是我们内。内容区嘛,头部跟内容区是不是应该干干净净分离开来的,你不能说待会我这么,哎,大家看这样是不是也是个滑屏啊,这个滑冰区域是谁啊?竖向滑屏的区域在哪?
02:03
竖向方的区域是不是应该在这。这是不是你输下画面的区啊,你不能划头部的时候他也多吧。是不,我看一下宝宝。F,我们说行业的标杆是不是就是淘宝好,我们看淘宝。啊,淘宝网我淘我喜欢好看,我发这个头不是你看。他有洞吗?没有吧,你看虽然这边是不是也是没有的地方跟我们一样的吗?是吧,所以这种警告你非得把他干掉干嘛呀,你干不掉的呀,懂吗?这种事情得服务浏览器人家写的,他想报什么错就报什么错。懂吗?好像是他在这边抱一个我最牛逼,那也没办法,懂吗?啊,所以说这种事情你不要去纠结他,OK,再看3W点,还看看京东。好,我们看几种。好,京东,哎。
03:03
这个不让我去点,我们看一下3W点百.2是不是到京东。OK,好,F12来刷一下,只要你看划它头部的时候在不动。懂了。划伤头部是不是动了,所以说。差距嘛,是不是。马云说什么?就是我在拼命工作的时候,刘强东在喝奶茶是不是,那这不就是一个差距吗?能理解啊,啊,那咱们这两个干净,其实好像它的设计就应该是动态。透明也不应该动了是吧,透文明也是黄这边动啊,OK,那我们还是学淘宝。好,怎么做,这两个结构也是,我们画头部的时候干嘛也不能动,那怎么办?也就是说你这个待会内容去的滑皮区域就应该在这。
04:01
他们俩给分离开了,能不能讲好,那应该怎么写,首先干嘛,我们说这边我们是不是写的一个头部的,头部的东西我们放一块。CSSJS。这些都是头头部的参数,我们就放外面了。OK,这些都是头部的好参数这块,这是不是也是头部的算数啊,OK,好,我们看,那我把这个。移动端呃,音乐它可读带到R的参数也拿过来,CTRLC产品规格也拎过来啊,拎到我们这个参数里面来,CTRL02。好,可做出逗号,好,我们来看一下应该怎么去写啊,好,我们要写另外一个导航了。好,那我们来听一个吧。好。
05:00
这三个图全部等全部拎过来啊,CTRLL好,CTRL做导航好,首先做这个导航的布局,第一它好跟布局有关,好看这个布局应该怎么去写啊,那咱们这个考拉里面的东西等一个啊。亲一亲是好考,拉起来。每次用考拉,你烦不烦?反机器的反,我也反,是不是OK?呃,这个东西重新干嘛,等于另一边。拎进来啊,确实说有点烦,工作效率有点低下,好,所以。好,再来看这里是不是图片,好,这是GS是吧?OK,来看这个布局应该怎么去写,这是我们的头部,OK,然后呢,底下是什么?T嘛,那个什么class叫什么C什么T嘛,是吧是吧,好先不要管其他的,问你这个坑,这个区域的话,应该是不是我市口的高度,截去我头部的高度,那是不是得拿GS来空了。
06:03
那我不想拿GS控,能不能做,我们之前是拿GS空了,不拿GS控,我用CSS能不能写出来,现在我这个压力就想给大一点,或者说这个技术上面,我就告诉你不要用底下字写啊,就给我用CSS写,能不能写出来。怎么讲?是可高,你怎么拿拿百分百。百分百剪头部的高度啊。2702,你有这么玩过吗?啊,不要逗我啊,不能这么玩。咋整?想想有没有什么布局手段可以自动帮我们去剪的?想想。有吗?我们来写一写我们该写谁了,Hand可以合起来了吧,看这个括是不是到这只后你点一什么,底下点什么,点CT是么?跟是吧?OK,这个小玩意我们先给它来个背景吧,为P好,来看一下这个小玩意现在是这个嘛,我们给它一个高度吧,来100PX,看它在哪。
07:25
I。为什么什么都没有?Hide是定位的是吧。还是定位的应该是,那怎么办?给他来什么拍嘛马嘛,为两百七吧,还等一个I呀,这里S看一下。哎,是不是在这儿,可是我们说这不符合我们的需求啊,它得咱满整个这个区域啊。
08:02
是真的,那怎么做?我来写写,看你们能不能看懂。好,干掉我不需要好,我说你的position他也为你看我这个外position还没有吗?我要你的行为。好,然后我说你这边来一个啊。Top。270艾一个I,什么I,然后。LEFT0,然后呢,RIGHT0,我说这个区域就已经撑开来了,这里看一下。你看用GS我们要费老大的劲,CS啊,这几行代码能不能看懂,能不能看懂什么意思啊,来看一下,我们把这个头头部给他。
09:04
我C点成零。你看干干净净的,这个时候你在话干嘛,我待会事界会把给这个肯定的了,要不净讲,那是不就是干干净净了懂吗?OK,好,那这是我们一个布局的手段啊,一个布局的小技巧啊,啊有点小心机的一个布局技巧能点讲啊,OK,好好来看一下那底下这个面结构怎么设计了。里面干嘛,滑屏区域加滑屏。元素嘛,是不是,那怎么办?滑冰区域第来拉叫做never没毛病是吧,底下呢来一个ul加I的结构是吧,这个ii结构的话,基本上跟我们上面这个差不多。直接给它扣过来是不是CTRLCL好,还得给它合起来这个吧,直接给它是吧,是不可以了,可是因为在我在我去划吗,说想要这个东西稍微大长一点,那是再加了几个。
10:19
这个没这个没问题吧,OK,走你。好,我们再来加这个。加几个12345加五个差不多了啊好加加什么呢?小飞小飞张是不是好,我们还有谁。啊,金云,金云龙是不是啊,金龙有吧,OK啊,这个老华头看一下底下什么,哎,还有谁啊,邱海峰,秋海峰,来,再来个雄剑吧。
11:08
啊,小贱贱。OK,好啊,这你上课再困的话,那我真没办法啊,最后一个呢,最后还有谁啊?你是吧,好来看一下,嗯,F不是进来好算一下哎是不是在哪,再想想那我们是不是接着去学校去了,好,那我们这个也给个class吧,C class叫做list是不是好来看一下字母完这底下应该这几下用什么结构。点什么点N是吧,这个东西的话,待会应该跟我的布局是够压宽的是吧,那我这个Y是直接可以给个百分百是吧,来看一下他其他的一些参数。
12:05
好,整个内容区两百七的头部空隙我们是有了是不OK,导航高度加纵向拍力加波的一百七啊,不会3亿了,就是你来我们量,我们量量的时候就就这么去量的嘛,量完整个尺寸是177码,那应该怎么写?我就直接可以给什么给这个高度了,一百七干么?艾特一个阿呀,直播干嘛?我可是三以为我不是,有同学说你应该先book,三译为books再干嘛。再来去写个度啊,有问题吗?有有同学你这个高度177,可是这在下面啊,这是CS不是S,没有什么同步同步的东西。写上去他就认了,能理解吗?啊,不要学东西学,学的多了就是什么东西都干嘛揉在一块,能理解吗?好,这里来说一下,哎,是没有背景,搞一个背景,看这个背景应该会是。
13:10
什么颜色?没有颜色。那是字体,好像真没有颜色,哎,我们看一下这个颜色要比背景还深吧。是吧,好,我来给来看一下他在哪。就在这OK,好,而且我们来看它是什么,它应该是有判定的,因为里面内容不可能占那么高的,是不是上30以下14边框为一,这个一什么边框看一下。下面边框吗?上面没边框,下面是不是有个边框,OK,那应该怎么写?先给你上17,上右上右下段十字你是怎么记的,哎,我错了,我错了,上三十一下啊各三分各三分,这里好来看一下这里啊是大小没变是吧,这边是不是干嘛下来了,好然后呢。
14:30
例子老师还是记性好好来看一下是不是有一个边框的下边框啊,怎么办?下品房尴尬,我们之前做的是一个商品房,是不是啊,那我来给他一个匹配模式,拓过这个商品。行不行,可是你调的时候是不是就有问题了。掉就放什么,放拓在哪边。
15:00
哎,好像写的很多,这边吧,是不是来一个匹配模式吧,OK,那再来一个下边。Con性。是吧,这什么BOT是吧,这边干嘛BOT。BOT,对是不是,当然这里面东西你还可以继续去啊,抽象都没任何问题,懂吗?啊这么写也也可以了,好来看一下,那这边干嘛谁要产品框。所要上面话肯的还是这个never never吧,点什么?我们说混合最好放在最上面来掉是吧,因为我们之前要不是最好把混合里面可以覆盖上,不然我们在这我们在这边指定的是应该要比混合里面的样式那个优先级来的更高了啊,是不是放在下面来啊,点什么。一杠PXOK,什么BOT,看什么颜色?
16:03
没颜色,没颜色就黑色。那就不行,好吧,要写我没有全部认值吧,是不是?那最好给个默认值吧。是不是这个问题默认怎么?在哪里?教你。好,来什么black b,这还记得吧?好CTRLC,好CTRLCTRL是不是OK ctrl嘛,是不是啊,这些东西打死都不能忘,好走。好,来看一下心肝应该有一个变化了,应该不知道。是不是在下面有变化了,OK,然后呢,我们是不是考虑这里面的图像,好来看一下这里面东西样式是不是还要写在这,这就可以关掉了,那么解到什么。内有一个点list,好,List的底下有什么,有LY,有LY是不是OK,那这些LY怎么去怎么去弄它。
17:08
好来看来看下这些好导航高129左右,那边居38是吧,高129看到多少129艾特一个R1,然后呢,还有什么。定定是多少?几个左右38上下为零,左右给38。带一个,哎呀,好。刷下是不是的,感觉自己有点小啊,是吧,自己看不到。没给吧,没给一般字体我们就这样,字体一般给一样。我直接写一二行不行啊啊这可以啊,是不是啊这不这是这最简单了吗?是不是来是不是这就这样过来了是吧,然后把这个颜色给它换换干嘛?颜色是LY底下的什么A标签,是不是来一个color好像是黑色这。
18:25
好看,是不是可以了,可以了是吧?这里是不是都在着了,他们去一行怎么办?浮动谁浮动浮那找你好,浮动浮成这个样子,扶不扶?本来就是这样,是不是不服你咬他,我来看一下怎么办怎么去行现在。给幺二怎么办?点二变宽,变多宽呢?是他的多少倍?你看你看我这么瘦啊,你看那么胖,宽一样吗?宽度样吗?不一样能给百分比吗?肯定给不了百分比啊。
19:14
所以说我们一开始轮播图的那种布局方案在这边就不能用了。轮的布局方是500%,你20%是这正方啊,为什么?因为宽一样的吗?每一平宽度是一样吗?反分比好多嘛,那这个咋整。问,你去一行,它能浮动吗?肯定不能浮动,你要是不动的话,我肯定去不了银行。因为浮动肯定会默认换法了,只要你快度不够,肯定默认换法是不是,那想想那除了浮动还有什么东西跟浮动你就上的好,一旦你就会有三了,好在哪掉他。
20:05
历史这边方好。你看是不是就会稍微的近近一点啊,然后怎么办。怎么去?怎么让就是怎么让,历史的不要换行呗,这天无绝人之路上来。哎,它肯定在这边排着呢,不信我们看一看,怎么看呢?给Y和这个O改成o To Ctrl s说一下整理,看见没有,是不是在这排着。完美。是不是这种布局方向给我记住它啊,也就是容器等于外法,是是然后呢,底下全部应量法。那不理讲好,那想想我们说做完布局是不是得去检查一下,看一看跟我们的预期符不符合,来看一下,好,我先把这个凹凸给他嘛,换成台,好来看一下这个布局跟我们的。
21:11
猜测一不一样,符不符合?U2的宽度为414乘以53点几?满不满足?卖不卖装?这个东西为四百一四,我买一不行,一会必须让L给你撑开了。不然会出问题的,有可能。会出什么问题啊,划肯定是划的动的,你划这个点划划动的,我是不滑动,是有一个范围控制的,这个时候范围控制的话是不得到U2的宽度减去点尾的宽度的,你这是宽度减就是零了。能不能理解啊,所以说你的宽度必须要让LY把你撑开了,那怎么办?为什么现在LY撑不开ul?为什么?
22:03
为什么现在LYY车不开油啊?因为你ul是个会计元素啊。纳尼芙蓉器的百分百。我是不是把U的核模型变变就行了?我这边我让这个ul浮动起来行不行。你浮动起来是不是对自己没有任何影响的,对自己的布局是不会有任何影响的,你还在文档里面吗?只不过这个时候你的有量是靠OS来了。也就是说有时候我们用浮动用的有点像一个。能不理讲OK,你看这时候他肯定靠点成分哦,这个是真的让L去浮动啊,并不是啊,这个浮动只是让什么让U可以被啊,把你们记记可以被什么成开难度整理有没有感觉套路慢拜OK,找你好,找你好。
23:05
说一下来看,有百多没问题。是不是在的,OK,好,然后呢,看一下这LY是不是还有个钥匙没有加。总感觉这个LY干嘛,在这里面没有干嘛。居中吧,好像他这边也没说,那怎么办?自己写写吧,Iy居中干嘛给个杭高129艾特一个阿呀是吧,这他就下来。是不是OK,是不是就已经下来了,是不是OK,然后呢,看一下是吧,默认选中时默认字体,默认字体颜色,是不是这个颜色就C给谁啊是不是给他。是不是选中时呢?背景跟你看选中时话,这个背景跟颜色是不是都会变了,是不是,那我们就变一变吧,选中时那给它加什么F,比如说F加给LYY。
24:04
应该没太大问题吧,好,这里,然后怎么办?好,是不是LY啊,而且你这个LY必须得是什么点。X5的是吧,这个时候你的背体是不换化换成什么。换成这种什么很污的颜色,走你。是吧,然后呢,字体颜色呢,是它体现的什么A标签啊是吧,它的看了应该为什么。白色的这个能不能挂,OK,这里好刷一下走,你看是不是在是。是不是在这,现在是不是干嘛,就算脱了那最基本的滑屏,再来写一写。啊,OK,看大家这个画面能力到底怎么样,好,咋写了,布局是不是已经完了,再来检查一遍好。这个区域没问题啊,是不是好never,这个区域没问题啊,410乘以什么50点啊,597都没问题啊。
25:08
是不是再来看底下的。咦,这个笔墨是干嘛的?哦,下划线有没有问题,Ul是那个什么。花瓶元素里面的是每一个。滑屏的子向都在里面哦,是不是好,OK,那我们现在可以去滑屏了,OK,好。导航这边是吗。OK,布局我们搞定。好,搞定这个布局之后,我们把这个最简单的画屏也给它贴上去,好吧,好,CTRLCCTRLV02好加好,咋写啊?合起来闭着一些开玩笑,OK1吧,拖拽的意思吧,是吧,来一个放品。
26:13
OK,就D。是不是好,你们去画一个什么?Y,什么先找什么花屏先什么先找花屏区域是吧?花平均式的肯定是一个办法,等于什么?多特点Q,这个里面这个是谁?找到这个三三,我们去算这个就可以关掉了,是不是写完了把东西装OK好找谁。知道。不对,是这个never never才是我的滑皮区域嘛,是吧,找你干嘛,找到这个滑屏域嘛是吧,在做什么花瓶元素好换一个什么。
27:10
我就找艾,等于什么document.q好,是不是找他底下什么有呀?是不是也叫丽塔?点list。的嘛,然后呢,给谁加时间给外我们说时间肯定加区域的,先加几个,先加两个吧,最最基本的嘛,它是道个它布嘛是吧,To他切它的时候来一个发弧形来套路写起来好,之前我跟你们说过,说写代码最终你从思路套路的话,那就定了是不是好对画一个题,它题C等于什么EB点。
28:07
Change的tos找D0杠是不是,然后呢?然后呢,找到他这怎么办干嘛,我们说这个嘛,元素一开始的位置是吧,元素一开始的位置跟什么,手指一开始的位置好Y一个star s ta rt star X等于零,画一个什么element是不是element X等于零,然后呢,四到X等于什么。他其实一点什么点可能他C能X是不是,然后呢,X等于什么of。
29:13
想想我是啥打补点CSS得去找他了吧,没事想想我不行吗?看一看找一找可以啊,是不是他这里面是不是有一个CS还有个什么。无缝的,我们就用他吧,反正这个无缝知道我们明天也要写吧,是吧,OK,应到什么,应到这个里面来吧,好,你进来。大点加是不是只有你,然后呢。去拿谁的吧,这是滑平元素一开始的位置吧,是不是在哪OK,好,然后呢,Y点什么。
30:09
I listener,他切木的时候,他接木时怎么办?一模一样的外用什么?一个now X等于什么是不是一样的,它C点可能它X,然后呢,一个DX等于什么,那X减去star X是吧,然后呢。达姆点CSS让谁艾特?是不是怎么走X,走多远走多X干嘛,加上电。
31:06
是不是可了,是不用单位,单位都在我们这个组件里面,给你们搞好,外面是不是特别简单啊,好就可以玩了。真的可以玩了。刷下。爽。说一下。没毛病,最起码可以换了,你看移动端所说的逻辑,这个是最基本的,你做你做什么效果,这是最基本的。这种东西能敲出来,移动要落地就完,完成了一半。能解吗?那下一节课我们比较重要的是要去怎么做这个橡皮筋啊,OK。
我来说两句