00:00
好开始,哎,这个视频怎么还在外面进去?好,那好,终于可以换我们的项目了啊,来看一下。好啊,咱们这个预热就算全部完了啊,然后现在是真刀真枪的去检验一下。好,这是一个four配角是吧?OK,大家看是不是没有滚动条的啊,你们差不多也知道这个样式应该怎么去写了上来是不是,是有套路的是不是?好,那我们就废话不多说,直接写了。好好。再不写,我估计你们要炸。好,嗯,我先把这个图片全部拎过来。好,我们先把这个骨架给写了。PC项目。好PC项目股价。
01:06
好啊,我把图片先全部贴进来啊,搞一个index。好啊,我们在写这个东西的时候啊,我要我要问大家啊,我们要做到什么,不能只在我这块电脑上面,它显示是比较好的吧。是不是我们要考虑分辨率啊。啊,一定要考虑分辨率,我我现在这个分辨大概一般我们主流的分辨率啊,你看我这个电脑是不是800到一千九呢,是吧,可是现在我们一般主流的电脑的话,其实。都是在1360比较多是不是,所以一般我们考虑的区域在哪里啊。呃,一般啊,做PC的话,一般是1220~2000。啊,这这个屏幕这个这个阶段这个分辨率还是比较多的,特别是像现在我们是不是高清屏比较多啊,就是说分辨率在2000左右的还是蛮多的,特别什么在我比如说像我这个分辨率是191920,或者什么1680,在这个分辨率的区间段的这个电脑是比较多的人没讲,可是一般普通屏的话是不干嘛,1360居多,或者说1366居多。
02:16
能理解吗?啊,所以说我们做这个项目啊,我们考虑这个分辨率的范围啊,考虑的分辨率范围,分辨率范围在111200~2000啊,这是我们要考虑的一个分一个什么分辨率范围,懂不懂,那高于这个分辨率,低于这个分辨率怎么办?响应式啊,我们有三个系统吗。懂吗?啊,我们可以用什么me嘛,慢慢去给它进行修改嘛,那么理讲好走,那这个应该怎么去设计。怎么设计?好,首先大家看我是不是要画这样一个页面,好,嗯,首先上来你们看到几个区域。
03:06
看到几个区啊。最直观的应该有两个区域啊,一个头部,一个内容区嘛,外面有个包裹区域嘛,是不是有三个就先写先先写嘛,写写嘛,我来个什么三个行嘛,是吧,干嘛是什么。雨化标签啊。不就是我们那个div吗?一模一样的吗?是吧,OK,干嘛,我们说给个ID吧,叫什么包裹吗?是吧,里面有什么。诶,这里面就得好好的看一下怎么去设计,但是呢,我们如果要考虑分辨率的话,大家你们可能屏幕大小不一样嘛,屏幕大小不一样,可是问你你能看到这个主体区域的大小可能变吗。你们想想平常你们上网站。主体区它会它会不会变。基本不会变,只是说两边的留白是大是小。
04:01
你屏幕比较大,两边600比较多,屏幕比较小,两边600比较小,也就是说你拿到的P端的设计稿的话,应该是一张固定尺寸的设计稿。懂吗?能不能理解设计稿肯定是固定尺寸的,你你不固定尺寸我怎么去画?懂不懂,只不过这两边干嘛,可能留白的大小不一样,如果你屏幕大一点,留白就要大一点,屏幕小一点,留白就要小一点。能不能理解啊,所以说哎,其实跟我们不知里面学过的概念特别像,里面这个叫做固定布局。外面这个叫什么。流体布局。还记不记得什么叫流体布局啊,百分比布局。是不是OK,大家看,其实我慢慢缩小。或者说我这样变小的时候,其实你看当中这个趋势不可能被干嘛缩掉的。
05:01
懂吗?你只会看不到。能理解吗?或者说你看我慢慢干嘛,缩小的时候。大家看当中这个区域干嘛,其实。一直都是占这么多的,两边的留白现在比较大了而已。懂不懂它的它的它是多少像素,他一直在这么多像素的。懂吗?只不过两边的留白会慢慢变大。能不能理解,OK,那我给他重置到百分百是不是,那想想那我们是不是需要一个流体布局,流体布局里边包裹着一个固定布局啊。是不是那个嘛,我们怎么写。是不是会有一个head he ID啊head的是吧?OK,因为我们也给ID吧,因为这是最最外层的一个信息嘛,是吧?OK,问你这个head应该是个什么布局啊。这个还是个什么布局。嗯,这个还的是个。是这样的,是不是这样的,41块。
06:03
这里面干嘛,又是一块。懂吗?相当于我这外面要干嘛包一层的。这也要干嘛,包一层的。啊,这种设计能不能接受?是吧,那我们应该。抓下。这个开的应该是个什么布局啊,这是最最最外面这个。包裹区啊,这个包裹区最终就是什么,就是我的一个适口区域,你不要管了,就是用它来充当适口的是吧,问题这个应该这个应该是个什么。不应该是个流体吗?最外层是一个什么流体啊,是不是啊,里面应该有个什固定的固定布局是吧?最外面是个流体布局好,那我是不是还得需要一个D,是不是这个就可以给plus是什么?看到没?是不是主要区域嘛,那解吗?这个是一个流体,最终要给固定的PHX值啊。
07:14
懂吗?OK,而且这个值我们来看一下,我在我这边是有信息的啊,门户练习是不是有个项目,项目里面有一个完整版,完整版里面是有参数的啊,把这个参数先拼过来,这是我们的骨架参数。好,看这个国家参数,你看主体尺寸,我们给的是1100到。520吧,因为我们考虑的分辨率的范围是多少。一千二嘛,一千二开始嘛,那所以说我们当中这个固定区的话,我们就给一千一嘛,总得给人家留一点六百吧,我们给人家留100是50乘以。50嘛,最小的时候就是什么50 50乘以50嘛。能不能理解,OK,拿走好,那我应该怎么想好,把这个参数就放旁边好,好,其实这个就是这个问题,这个它的宽度应该为多少。
08:05
一千一是的,OK,好走,看头部的高度为多。头部高度为80嘛,你看主体内容的宽度为一千一嘛,头部的高度为80嘛,能理解吗?好,那我们先稍微干嘛,把这个结构我们给他们写完吧,好,大家看那这个头部里面应该有些什么东西啊?现在我们就写这个头部。好,头部应该长这样,这是我们的那个流体,是不是,流体里面是一个什么固定尺寸是不是OK,固定布局,这个固定的容器里面应该有什么。有一个logo。有一个导航,还有一个小尖尖。是不是小姐姐是不是也算过图步内容主体是不是有有三样东西啊,一个导航啊,不一个logo,一个什么。
09:01
导航还有一个小尖尖,还有可能是不是有一个播放列表,那播播放列表暂时我先不考虑它,我放到最后来做啊,这个音乐我放到什么最后来做好来看一下那应该那该咋整,应该给个什么logo怎么改。如果给发肯定要给个码。Logo吗?是不是啊,Logo不要用这个来包的嘛。是不是啊?Logo不是一个网站的标题吗?是不是一个网站最重要的信息吗?搜索你去扒的时候就把这个什么。爱奇艺嘛,懂吗?OK,然后干嘛,这是不是有一个logo啊,OK logo里面是一个什么,很明显是张图片嘛,而且你看我鼠标放上去肯定是个链接图片,给个A标签干嘛,JSCRPT是吧,冒号我们先不先不要给这个链接好然后干嘛,我们说这个里面是什么,一麦讲S到哪一张图片,Logo图片吗?看能不能找到logo图片。
10:10
你不知道logo?有没有logo?哎,是不他OK,找到这个logo是不是点上来,好,那点到这个logo上面去的时候,我们看一下。现在应该长什么样?应该比较丑吧,是不是这样的是吧?大家觉不觉得有问题啊?是不是暂时我先先把这个结构干嘛,结构先搭出来吧,OK,那有了这个I之后,我们还还应该有什么。导航吧,是不是?嗯,想想导航怎么写,下面来个什么never是不是叫什么,就叫never是吧?OK,这个never里面应该是个什么。啊,这个这种导航肯定是个列表是吧,OKOK,而且看这个列表。
11:02
列表上面有没有动画?有这动画我们有没有做过?做过类似的东西,能不能想到?你看是不是我每次浮上去的时候它都干嘛。有一层东西把它盖住的。是不是啊,想想是不是,其实上面本身就应该有一层黑颜色的,只不过默认情况底下他们的外围。零嘛,我喝不上去的时候,把它的外变成百分百了。你们能想象,你说这个导航其实干嘛,它盖了两层,上面那一层的宽度,它它干嘛。变成零了是吧,然后我鼠标慢慢浮到导航上面去的话,我看慢慢干嘛变成满吗。懂吗?你看这种效果能用透明度做吗?这种效果能用透明度做吗?你看它是不是慢慢的从这边划过去的,你看下嘛,我慢慢的从这边划过去的嘛,你要是用透明度做的话,是不是干嘛整体的慢慢的出来的,是不是我需要你有个向右的慢慢的一个滑动过程吧,那是不是我们只能控制啊。
12:15
宽度是吧,让他宽度一开始干嘛没有宽度,慢慢的这个宽度干嘛展开了。懂吗?能理解吗?OK,那就你那我把它给设计出,那我问你这个LY是不是就代表每一个导航总共几个。五个吧,OK,这里15是吧,总共是不是五个,OK,那这样总共有五个12345,问你这个五个里面的结构应该怎样。上面层下面一层是吧,而且因为是一个链接可以点嘛,那肯定是个肯肯定是个肯定是个A标签减r I pd冒号问号是吧?这里面应该什么?有两层是不是有两个div是吧?一个div class给阿尔法。
13:11
是吧,另外一个点位。是不是大家想想这个up里面应该有什么?这第一个肯定是张图片嘛,后面是不是干嘛文字啊,OK,那up里面应该是干嘛,首先第一个里面应该是张图片是吧,找一麦叫什么。看有没有home。是不是啊,可是上面那个应该是什么黑的吧,是不是看有后杠B的问题。嗯。Hoi,你厚吗?啊,这个吧,是不是OK,只有你,然后呢,下面是不是还有一个。CTRLCCTRLB,这个应该什么。
14:01
改成这个home是来来看一下。大家没有看到是不是,是不是在这边是不是啊,你看是不是有有这些点点啊,是不是有什么事情没有干啊,没有轻松末样是吧,好,但我们写CS时候上来第一步就干嘛轻中波的样式,好这里那下面呢,一模一样的吧,CTRLC,只不过里面它现在跟的是图片吧啊。跟着治吧。第一个什么。Cos cou啊是吧,CTRLCCTRLV,好好再把这个复制一份,好,其实把这个干掉吧,好还有几个123是吧,还有什么works。Workswork。Work about。A Bo about。
15:04
好,还有什么?好,这里我们来看现在页面长什么样。比较丑是吧?啊,不管OK,我们待会肯定得把它画好,OK,那结构是不是暂时就设计成这样,有logo有导航,还差一个什么结构?箭头吧,是吧,那也给个class吧,叫al OK,好,那是不是干嘛,头部的东西就已经齐了,好,那我们是不是就直接写样式了,好,那这一次我们这个样式啊,我们还是要原生下去写啊,然后音乐台的时候的话,我们就会要let去写啊,然后反过头来,等我们讲完工程化之后,你们要把这个PC项目自己重新的去构建一遍啊,这是你们以后要去做的,所以说我们这边还是设计用原生来写,那上来第一步CSS么?是吧,OK,那这个CS下啊,比如说我们CS的开始,OK。
16:07
结束。OK,也就是说我现在用原生给你们写一遍啊,以后这个项目你们要重新自己去写,用我们音乐台的方式去写啊,好,来看一下,呃下我应该有一份下啊,直接给你们拎过来看一下,这个下里面我们做了什么?首先禁止的系统滚动条是不是?其次把一些market pen给它清了字体我们定了14PX的未来氧A是不是A标签下滑线清掉,Display变成block,为什么把A标签变成display为block?因为很多像链接图片一般成立标签就会有三项数空隙。是不是就是说A标签的行为是不是很诡异,所以说一旦把它十倍变成block的话,他的行为就会干嘛好一点。能不能理解OK,然后把LY的什么。点点去掉image display也变成lo,因为image的行为也比较诡异,懂不懂,所以image a标签我们是不得统一把它调成了。
17:07
布洛卡。能理解吗?好,再往下走,好,还有一些公共要说。CSS,好,比如说清除浮动是吧,那像这种公共样式我们也放一个地方好,那庆祝浮动代码怎么写?啊,这这个这个不需要写了吧,需要C啊这个我们稍微快一点啊OK,那肯定吧是吧,你看这个代表一个哈克嘛是吧,OK,好好,那我们干嘛下来是不是就干嘛,应该设计五是吧。头部了,头部样式开始,OK,头部样式啊,结束,好,我们来看一下这个样式应该怎么写。首先问格玛。
18:00
你这个head咱们先就不管了,让你直接是一个流流体布局嘛,是吧,你这个headman我们干嘛,我们来看一下是不是这个had的底下有个什么点had没OK好,这个玩意它的外形应该不少1100。是吧,OK,走,告诉应该不到80PS啊,这些东西我不带你们去量了,这边都有。啊。一千一八十码是吧,OK,然后呢,我们来看一下,给他来一个背景颜色拼,看一下他在哪。走,你是不是在这让它居中是不是就可以了?OK,怎么居中,Marin上下为零,左右凹嘛,让它居中好。就中国来了,是不是以后你的浏览器再快一点,反正我就占,就占这么多像素,是不是我只占一千一像素,其他东西你干嘛两边给我放。
19:02
放牛白就行了,能理讲OK这里,然后呢,我们来看一下,好,然后我们怎么设计这个logo。想想这个logo never跟这个箭头,这个箭头咱们是不是可以暂时不用管,因为他现在不在位嘛,是吧,里面没有任何的元素,那想想那现在我们应该去干嘛,这个logo跟这个never干嘛?左应该浮动起来吗?是不是想想你这个logo不浮动,我这个never我能上去吗?首先我让这个never自己先干嘛,先去一行吧,是不是在底下什么点。看着卖吧,他底下的什么?嗯,这样写它底下的这个never是吧,找到这个never好,它底下这个never里面它有什么,我想这个导航干嘛自己去什么。一行嘛,是不是它里面有什么。Ul吧,那给class吧,叫做list是好,这里面是一个一个的。
20:05
LY。OK,我要这个什么,它底下的什么类的,底下的所有的LY首先应该干么?弗特为left让他先起来走,你是不是就过来了,现这个logo跟这个导航是不是应该也干嘛。浮动起来问你logo不起来的话,这个导航他能上去吗?他能上去吗?肯定上不去的,懂不懂那一个往左一个往右,OK,谁。谁啊?还卖底下谁啊,是不是点logo,是不是点logo福洛特,为什么。Left是不是,然后呢,Never?福特为right。
21:01
整理看一下,刷一下是不就过来了是吧?OK,来看一下现在是不是干嘛,位置上面有点偏差是吧?OK,看这个位置偏差上面是不是有马,这上面是不是也有马娜好看这两个马分没有多。OK,这两个写掉30跟50吧,OK logo什么?Top为3POK,他怎么给top为50P,你看一下。下来了是吧,差不多位置吧,是吧,OK,来看是不是每个之间都有什么间隙,大看这个间隙道。为多为事实统一给吗?给那子吧,OK,是不是他们都有吗给。Left为多少?40PX,所以你看一下。是不是就分开来了,是不是OK,然后呢。
22:01
然后这上面一排的颜色都应该是黑色。是吧,嗯,上面这一排我有没有给,是不是就二是吧,图片是不是黑的,这没问题吗?是不是这些字我没有给啊,你说么?LY下说的二和他的color应该都是啊。什么他们底下的只要是什么填阿尔法这个颜色对应该是什么颜色。是不是应该是黑色。教你都应该是。刷一下好像没有起作用吧,为什么?因为你必须要给到A标签上面去吧。啊,不对,懂吗?不能写这个符号吧,这里。是不是就变成黑颜色了,然后我让黑颜色干嘛叠到叠到蓝蓝颜色上面去不就行了吗?怎么让黑颜色叠到蓝颜上面去,我问你这个是不是一个L。
23:00
是不是这是一个L,一个L里面放了一个A标签吗?A标签里面放了两个吗?是不是,那想想那我能不能让你让你这两个D称作我这个LY来定位啊。可不可以啊,那我让所有的LY干嘛定位定起来可以,因为什么相对定位吧,是不是他们是参照的是不是二什么。问你,我up定位起来的话,这个当时不是自己就到下面去了是吧,那我直接让让这个up干嘛。不输入为什么,可为什么二八输入,他看一下只有你,哎是不是直接就上来了,你看是不直接就在下面,是不是默认情况底下,上面这个黑的应该干嘛。没有,能让它透明吗?调透明行吗?你看这个效果,它这个宽度上面一个变化吧,是吧,那怎么办。
24:02
谁啊?也就是说所有的阿尔法应该怎么办?Y为多少为零是不是Y是为零就行了吗?Y是为零,它这样会干嘛?溢出的吧,你一个容器,你的Y为零了,里面内容就看不到了吗?比如说现在我一个容我一个容器,我的外就是为零是吧,可是我里面有一张背景图片的,或者是我里面放了一张image的,Image会不会溢出啊,会的呀,你你想他看不到干嘛?欧服必须要干嘛是吧,So,你。看一下是不是过来了,然后你每次放上去的时候量干嘛让他的外变干嘛,慢慢变大不就行了吗?是不是你你在谁身上后啊。LY吧,是不是只你是不是在这个LY上面干嘛,CTRLC在他身上后面的时候让谁。
25:00
让他提交了谁。阿尔法。是吧,是你在喝状态的时候,让你底下这个up的应该变成多少。百分百吗?百分百吗,是不是小姐看一下。说一下。走走走,是不是出来了,可是应该有一个。过度吧,谁要过度啊?Up嘛是吧,给up来个什么,全来个几秒。一秒吧是吧,给谁这个这个重不重要,给谁重不重要,重要,不然的话你其他属性也会干嘛,有动画的要给谁。是吧,走你看一下刷一下。走走。走。这。是不是就可以了,然后差不多是不是头部这个效果已经达到我们的预期了,然后干嘛检查一下跟你的预期干嘛是不是一样啊,之后你看一下这个logo,首先我外部有一个流体容器,其次这边是一个固定容器,固定容器里面首先有一个H1,是不是再有个never。
26:15
还有一个箭头,箭头是不是还没做啊,镜头我们待会再来做,来看一下这个never里面来看一满不满足。满不满足你的预期啊?不满足,虽然说对你样式展现不会有问题,可是你拿GS去获取一些东西,这个去进行效果的,效果的什么,就是去进行效果的,并且水说啊,很有可能这个UR的高度,你认为这个UR的高度撑开来了吗?可是他现在没有成干了吗?懂吗?因为你没轻浮动啊。因为它下面LYY都干嘛。浮动起来了,那干嘛一定要轻一下浮动嘛,那怎么办?怎么轻浮动啊,加什么fix。只刷一下好只好一般你看它是不是就起来了,好看这个LY没问题。
27:05
是不是啊?满足了吧,现在。OK,现在是干嘛,整个就出来了啊,大家想想是不是。下面干嘛,还有一个。这会是不是要做这个小,要做这个的小箭头啊,那下面这个容器我先勾一勾。啊,我们先暂时先干嘛做在嘛,小箭头,我们下节课再来做嘛,啊OK,那这个东西的话里面的话干嘛,你要注意两个点,一个什么流体柔气。固定容器是吧,另外一个就是说这种嘛,这种效果一般套路怎么写的。能不能讲?
我来说两句