00:00
对啊,好嘞,那咱们是不是现在把这个头部给它画出来啊,那先把这个结构完整的设计一下吧,而且你会发现我们这个间隙是不是是是不是稍微有点大啊,因为我们默认样式还没清呢啊,咱们把这个默认样式也清一清,然后以后我们写CS34就好写啊,不会在拿之前写PC项目的时候,那会很痛苦吧,那写CS太痛苦了是吧,你看现在你想改改哪个区域干嘛合起来。找吗?是吧,一会就能找到,可以讲,那比如说现在我们默认样式的话,一般我们都干嘛写在顶上啊,或者说默认样式可能放码之后会有一个单独的CS文件让你去定的,对不讲,那暂时我们这个CS文件,我们CSS我们写在这边吧,好不要用不要用新了啊,我们在写项目。下呃。一般我们HTML是不是还有什么body ul?H2H3用到H4已经差不多了,是不是,那比如说还会用到,你可以把你基本上你想到的会用的标签在这边先干嘛写一摞呗,是吧,还有什么D肯定会有。
01:13
那可能批标签我们用的也比较多。还有什么A标签是不是,那像我们这边有表单的是不是,OK,那这些标比较多吧,基本上是不是,基本上这几个标签就已经够了,说实话我觉得你给我这几个标签我就够了。是不是基本上什么东西我都能都能写了,其实你只要给我三个标题我就够了,你给个div给我那就行了。啊,那当然我问的语好一点的话,我们可能会啊会用会会用到这么多标签是不是当然那你写默认钥匙还还得写一写啊,这个的话相当于也是一个默认钥匙了啊好有钥匙当于什么。List等于no,是不是还有A标签什么taxation,为什么now是吧,还有什么?
02:06
High什么,想想。想想比较狠的A标签input,还有什么BT button,他们三有个什么高亮的问题,记不记得杠八杠,什么tap tap,什么tap杠,还有color一般是一个什么rgba 0000。是不是只有你,还有什么一个默?要是八八,有时候很过分。是不是其实给他们写到一块也行,写到一块也行,有什么we干什么,记不记得表现嘛,Parents。是不是这玩意应该也为那是不是,那其实这个A标签跟email讲,他们想还有还有问题呢,你们的display最好为lo是吧,因为有三条空西的问题嘛,OK,那display也玩有没讲,那差不多了,以后我们再遇到问题,我们再再再再来这里面填嘛,没问题啊好这里好,那么来看三写完之后的话,我们把这个。
03:19
东西我们稍微的来写写这个less的这个头部的布局的话,我们之后来写一写,OK,我们看,呃,这个结构是不是现在还差了一大摞啊,这边是我们的logo区域吧,是吧?有logo就会呃,有了logoo面试么?面包蟹导航吗?那爱奇艺下面应该是个什么面包蟹导航?好,那这边应该来来个什么标签就行了,J AVA c pd。是吧?
04:00
Javascriptd是不是OK,找你里面应该去什么?Image是吧?来看这个image是谁?是不是他妈?八是吧,大家想,现在大家想,哎,我得问,我得问你一个问题啊,现在我们是不是要去写一些路径啊,这个路径是跟less,是参考less文件,还是参考这个CS文件。我用的CS有可能的文件跟C文件干嘛不在一个目录里面呢?懂懂,因为我们可以调整这个的输出目录,那么讲以后学到工程化时候的话,他们很有可能就不在录里面了,懂,这个路径一定以CS文件为准,能理解吧,哎,这以那应该是体交了什么,那现在我们都没问题吧,以卖体现了什么?偏激吧是吧,加上比这个一标线体度行不行。
05:04
想想待会我是不是做切换的。是不是我们说切换的话,你不要改这个S号。改压酸是不是稍微有点烦啊,诶我把它做成背景嘛,我感觉会稍微的好一点是不是啊,OK,好,那这是面包线导航,那除了面包线导啊,后面是不是有个按钮盘,OK,来个按钮盘吧,好,那这时候我写这种S标签设计的时候,应该有一个整整体的设计吧,然后再去考虑吧,那这种这种功能你们得有了。啊,这种就是功能啊,能力啊,克拉是为什么。Button OK里面几个A标签,三个A标签,嗯,983就LC听过了吗?干掉CTRLL23开启好,所以搜索登录加注册搜索。
06:02
登录and组成。好,来看一下。好,现在起丑是不是好把样式写一下,那这个样式的参数啊,都在这边啊,我不带你们去量了啊,这两个工作实在有点吓人啊,那这个这个信息极其重要,跟我们视频方案是有关系的啊OK,好,整个页面的背景色,整个页面是不是有背景色的。啊,你们看到啊,我点的这个位置后面你看不是白色吧。我点的位置后面是不是有一个灰色的,OK,这是整个英文的背景,那我应该给谁啊?外外面应该有个什么白色光的color了是吧,就不光了嘛是吧,杠一一嘛是吧,所以你来看一下。刷一下问题不大是不是啊,好这近那再来看这个,我就要它等吗?适合我们这个屏幕,好刷一下,OK来看一下,嗯,好再来看,那这边就比较简单了,头部上半部的高度135,我们说移动杆数布局能给高度尽量的高度。
07:15
啊,我说这句话大家大家应该能想到吧。移动端的布局能给高度尽量给高度。Fantastic。是不是啊,能给高度尽量给高度的话,就不会出现自己过大的问题,是不是啊?还有一个能给高度尽量给高度,你可以上,让你的整体布局固定下来,尽可能少的触发成果总排,因为很多容器的高度是靠内容撑开的。内容有变化的话,可能这个高度会怎么自动生态来,那这个时候重重温重坏的概率会大,所以移动的布局能给高度尽量给高度,能理解吗?OK,那注里头部上半部分谁啊?你这个外里面是不是had had里面应该有几个部分。
08:03
看一下我们的。结构吗?Head里面是不是有had拓法had button是吧,那我们说你这个H结构的话,就得映射到我这个文件里面。是吧?OK,还得里面才过吗?Logo吧。OK,你logo底下是什么?Logo底下是个一般吧,这个没问题了是吧,然后呢,这边是什么A标签嘛,A标签我们也给class啊,这样给他来个标明叫什么。面包蟹澡啊,卖六八啊。Menu button OK,你好,Logo跟logo平级的有几样东西啊?我们看一下跟logo平级的几样东西啊?还底下logo buttons总共三,总共是不是三亚啊,有个什么,这这是一个还有什么。
09:09
点。八乘四,你看这个结构是不是集体良好,OK,走,你好来看一下,好看有什么参数,全部拎过来。我们把先把这部分写了吧。按钮容容器,我们先把这部分写了吧,就把C贴过来好,一般我的习惯是会把设计图翻译成一个发down,这样的话我比较编码是比较好写好,看一下这里零到这边来写好。头部上半部分高度135应该给谁?头部还是托吧,上半部分其实上半部分135,下半部分也是135,整个头部高度270。懂不懂要不要把腿部高度给它固定死?要能能固定就固定是吧,那这边给个嘛,看多两百七天是吧,这能没理解啊好,因为我现在没有解读式嘛,所以说他给我保持正常是不道OK,那还分呢。
10:10
看干嘛,高中的三呗,是吧。幺三五一百三十五除以二二呀,这面讲好,写完一条干掉一条啊,OK,然后呢,Logo部分图片大小二四零乘以88,我就给你做完了,你要是不放心,你再写个看出来是不是,其实它是会支持的,这个就不用你买了,是不是OK logo部分。左右那边就为十十七片是吧,应该给谁啊,Logo的左右那边去是不是左右看一下啊,这个应该在设计上会。给出来了,大家看到其实这个爱奇艺是干嘛顶在前面的。那没讲是不是啊,这不是我们整个。爱奇艺吗?他有一个叛逆的啊,给多。
11:03
左右17码,那拍干嘛?上下为零,左右17。除以一个二呀是吧,上下多少?二十六二十一吧,是吧,上段26。艾一个阿上右向下多。21艾特一个R,左是17艾特一个R,那这边是不是。干掉是吧,OK,我们现在看看。KKS来看下。刷下问题不大。是不OK,好来看一下浮动啊。你看现在干嘛站满?整行的吧,其实这三样东西应该都干嘛动啊是吧,只不过他们俩是往左,他们应该是往他们爱盘是往右吧,也就是他干嘛,为什么right是吧,他们俩应该特为什么left OK,你logo这边。
12:15
是吧,好来看一下,说一下好过来了是吧?OK,来看这个安钮盘应该多大。菜单按吧单干嘛是是谁啊是不,这个马塔你浮动了是不可以是高分了,要乘以三外幺啊129129艾一个阿呀走你还呢,135问你,你现在写移动那个样式跟PC是不是一样啊,是不是啊,只不过咱们准备工作做的有点多而已嘛。能解吗?应该越来越简单了,其实呢,OK,那水平柱的大小要要不要空一下。你这个你这个里面是不放那个背景图的,背景图的大小你干嘛,你不指定的话就干嘛,你原图大小塞进来了吧,那不行吧,是不那怎办。
13:07
白光什么赛?是不多少,82艾一个,然后呢,233艾一个,那讲OK,那默认是不有量的,因为是一个切换吗。呃。这不是一个切换了,为以后的坚持做一个准备吧,是吧,咋想?默认情况之下,是不是有一个白色光的什么。可到。升往上走16是是啊,这个值我不你去量了,升的左右的吗?居中吧,是不是16开应该是往上走往下走。往下走吧,网上是付吗?是吧,来认我们先先先看一下。先看一下走你。
14:03
怎么没有?没有给背景吗?Ul叫什么?啊,这个才这个时候才在里面去引入这个路径嘛,啊刚刚是在什么HT里面吗?啊,刚刚好像好像有点二好一麦就接了是吗。嗯。应该要出来一层,是不是应该得出来层点点出来层找到image几层,哎,它是不是有了OK,这里应该是no repeat看一下这里尚下是不是在这有没有看到OK,然后呢。是不是我们得给个什么点,我能这么写吗?我我能直接在边写点X9吗?能懂吗?按的符号点a.X是不是,嗯,想想是不是。
15:07
是的吧,CTRLC。好,来看下。背景图,看着这张图吧。哎。嗯,说想看。是不是现在我们看到的是它是趋域在这吧,你要看到它怎么是往上拉,应该左右负子吧。是不是肯定得走个负值,我们看这个值为多少。嗯,这个知道。负的一百二这里。好,那这个给它干掉吧,这个好CTRL好,呃,应该是负的120。是吧,这里看一下刷一下怎么测呢?OK,来看一下。是不是加个QA啊,你看是不是没问题吧,OK,然后后面再三他们三也得浮动啊,是不是OK,现在是不是处理这个八啊,Logo写完了。
16:11
他也写完了,是不是来写他了是吧,这里好来看一下。是不是这都是按钮的一个信息啊,CTRLC全部贴过来,CTRLV。好慢慢写嘛,是不是好,按钮容器做的时间是不是就这个893是吧,是按钮容器上内边距为21,按钮容器是不是有一个上内边距啊。啊,对的,因为上一个顶在上面的吧。看见没有,OK,那这个其实一般在设计图里面,它会给你标出来的,不讲啊,咱们现在没有这种标注图嘛,所以说我带你们看一下好吧,OK,那它应该有什么。他应该有一个尼ma上那边去嘛,21AT一个是不是OK,那是不是就看底下的登录注册按钮了,是不是,咱们看登录注册按钮的话,是不是有三个,嗯,这个最好给一个什么。
17:14
因为它的样式跟其他不一样嘛,你发现这个搜素跟其他不一样嘛,然后看什么sea设计。是吧,OK,走你然后它底下应该先写代码,不给我们给这个什么A码,那他底下说的A标签嘛,是吧,首先我们说按钮的话,统一给这个尺寸是不是可以的,待会登录注册按钮的话是干嘛。登录注册钮不对啊啊,这个是小数,这个是大数。看到没有,那首先说的尺寸跟他们一样嘛,是吧,但我们班再调吗?那怎么办?大小外到首先标签能不能定高宽的。他们反正要互动的是不是OKY111艾特一个R是吧,是at特呢,78AT特一个发向行高long t是78AT一个方向啊,这些值都会给给你们的UI,为什么。
18:20
杠什么背景色吧,啊,这色有点污,这CTRLB来看一下还有什么。自体颜色吧,那个嘛,来一个color color多CCCTRLC啊,CTRLB啊,你如果想想细的话,你自己拿洗一洗啊,反正我是不想细,右外边距,右外边距吧,他们都是有一个右外边距的吧,右外边距给多。Caning right,右外宾给啊右外宾句,那应该是马in为15P哦,一个I呀,是不是还有什么字体大小方方S是吧?Fot方差S42问你这个东西设置,再想咱们I识别的时候的话,是不是会把S秒标器的方向给改掉的啊,所以说一般我们给这个外部上描会来一个什么。
19:26
放在重置回来,重置成。吃掉。那同一个发一下能不能理解,OK,那我再再往下走好文本居中怎么办?Text啊,这个对你来说应该是小儿科了是吧,圆角波圆是注意这是在移动端,所以说一般我们直线PX值。At一个R能问解啊,那这一这一次是不是全部搞定啊,找你好来CTRLX好找你肯定,哎这个又浮动给谁了。
20:08
给给他的吧,那现在玩。嗯,这个先给他做一做,OK,来看这个浮动干嘛,一到这个好可去了看一下。走你,哎,是不是还可以啊,怎么有点小啊,我感觉。你喜欢?圆角好像真没用上来,哦哦哦,是不right form干什么好看一下是不是就约掉了,好OK,然后这个搜索按钮有点特殊吧,那单独再来处理它,怎么单独处理它。我在这么写搜索吗?你既是A标签,又得有色情,是不是色情,是不是这么写的?
21:01
啊啊,当时学,那你们忘了啊,稍微回忆回忆呀,是不是那写了你既得是A标签又得干嘛这个格拉嘛,那这个特殊性不就提上来了吗?写在这里面的样式肯定会覆盖这里面的样式。你讲那按钮大小干嘛?130艾特一个二码。喂,88艾特一个码是吧,走你行高狼CAT88走音艾特一个有没讲好字体颜色color这个设计是不是A,这设设计是A表情吧,是不是字体颜色,我们说这个字体颜色一般要给到给到A分身上的吧,不然它就是有一个默认颜色的呀,是不是你的默认,默认比你这个基层的。要来的高吧,是不是走你来看一下好。右上是吧,你看他是不是稍微往下偏一点的是吧,那怎么办。
22:05
右好就行了,Marin right多少?30AT一个R,还有什么上marin top是不是3AT一个二呀,是吧?字体加粗干嘛方差?位置是吧,折点是吧,加速到管理了。是吧,或者说干嘛不的更大一是吧是吧,圆角不德钢。是多少12艾一个二呀,是不是好这边全部干掉。CTRLDCTRL好干净很多了吧,是吧,来看一下刷一下完美。差不多吧啊,这个背景是有点污啊,不是污干吧,有点不干净啊,感觉什么什么东西都那么污,看多少2323吧是吧,我们我们这个背应该给谁啊,整个害的吧是我刚这个聘刚给谁了。
23:12
找一找,你看现在就比较好找了是吧,拼我们刚是不是给了这个,哎,这边呢,应该是谁啊2323这个颜色吧,刷一下走你好可了是吧,而且我是适配了是吧,你在6PLUS嘛,我在五嘛是吧,M5的百分百吧,好来看一下好现在是不是就差不多了,OK,那这边开是不是可以合起来走你然后呢点had。波特是是好看海德波特,你们这个S结构有没有设计吗?还没呢,是不是这里,这里面应该有些啥。还的合起来肯加那上面吧,这边我先不用管是吧,咱们先不要好嘛,然后上面边干嘛,咱们也先在这里来。
24:11
搜索是吧?走你这边上来呢,文本框input,来个text是吧,OK,你I value咱们不要,应该来个什么,Please hold please hold叫什么?P,是不是干嘛?请碰我一下。管件OK,找引好,那这边是不是就出来了,来刷一下看是不是在下面啊,你看这个文本框样式就积极的扯,是不是,那处理它的样式还蛮麻烦的呢,我告诉你啊,这个我看到它,我就你看。边框高亮了吧,怎去这边框高亮,我笑一下,咋笑啊,拿刀销啊,咋整啊拿要想。
25:10
奥特曼。忘忘干嘛,基本上所有的你不的是吧,或者说这个发嘛,就一样就给他们来什么。禁止边框高吗?奥特曼应该什么?那这里刷一下,你看我现在点的是不是有这个变高了,我一刷还有吗?没了吧,是不是我们再来看,好那把这个尺寸给他们拎过来。这个CTRL。这这么一道图呢,CTRLC直接定过来好在哪边写啊,是不是在这边写,OK,找你好。但你没看到。我说,注意不三养也。为什么要注意不三阳?首先先看这个数索区是谁啊?
26:03
整个搜索区啊,不就是我这个开的吗。波特,是不是看这个括号不要搞错了,好到这边给他先做起来好搜索区域是还的什么,它底下有什。凤吧是吧F是吧?OK,表单大想我这个高度应该给谁啊?我们说给最外面应该把它给定死了是吧?他们上面是不是我们上面135,下面也是135啊,你看高度103上下那边去32加上去是不是正好135是吧?那给他来个135艾特一个二吧,是不是底下呢?上下左右那边就都会16吧,上下左右都会16。哦,那确实是哎。啊对,确实是,你看这个区域里面是不是上上下左右都有拍的是吧,那这里那干嘛来一个拍多16艾特一个。
27:10
哎呀,是不是,那他的话这个高度的话,宽度不用管啊,高度的话应该是白板。是不是?我来个背景颜色background pink看一下。哎,大家看到。高度有点吓人。购物车多少?百分百不应该,就拿这个他的办法。把他。想想。哦,这边是多了,这个多吧,103是不是啊。啊,这边有规格里面就是什么103嘛,是吧,所以算一下差不多是不是OK,然后呢。好,这个是不是就完事了,是不是OK,然后我们看跟这个form是不是有关系了,Form加什么input吧,是不是跟这个input的种类是不是太多了,那怎么办。
28:13
Input干嘛?我说你的tap要等于什么?TEXT。嘛,因为我们现在是不是就只有这两个还比较好控嘛,最好给class是吧,咱们这两个的话还比较好控好然后呢,他的嘛,大想为什么说要注意不相,大家来看一下。好,有量这些框的时候,你看它前面,你看我这个前面是不是有一点他的,可是他不会这么量啊,他不会帮你把这个宽度开,他不会帮你把这个宽度干嘛,先量出来,然后再去帮你量这个宽点,他不是这样量的,知不懂他一般怎么量,他先帮你整个去域个嘛。全部量出来,然后告诉你里面这个排比大概要多少。
29:01
好,这个时候我们最好的和模型是不是应该啊,能不理解啊,好,也就是说所应该是这个什么应不吧,它的books s应该为books OK,宽度呢,892高度啊。103高速103会不会出问题?不贵是不是,因为你前面那个高度就是什么103嘛,是不是,那这个为多少103艾特一个R嘛是吧?OK,宽度呢外别段829啊艾特一个阿呀只眼背景色八光的,为什么杠999折,你还什么上下那边距五左右那边十上下为五左右给十好然后呢。有一边框吧,哎,这个边框还是有有一个缩头,大家看我这边写,你看有没有发现有个内边距啊,啊不是那边距有个内阴啊,那边框的内怎怎么把它给干掉。
30:08
好,你给边框,你给这个input的内衣,怎么干掉它?你给input加边框就可以把它给改掉啊,比如说我们来看一下是不是这个它啊,你看我给它加边框波。Bo为epx LD。爱是什么?So吧。So,是不是,你看是没有这个内因了,所以说一般我们边框上面,而且只要你有这个玻璃钥匙就可以,比如说我把它改成到也。你看这就没了,懂吗?就说边框上面还有一个玻璃样式。啊波的为什么啊啊,这里面的目标有点多了啊,那这些都是些什么细节问题,自己要注意一下。
31:08
好CTRLS好求一下,好这里你看是不是就没有就没有了,好这里我们再来看,好那我们说这个边框是不是干嘛,其实它是有个有个什么一项是边框的啊不的干嘛EPX的。呃,其实这边我为什么写ex呢?因为EPX的话,你再艾I的话,它没有什么大的必要,所以说一般我小于3PX的话,我就不会去艾特I了,懂不懂就说写个P就行了,对不讲,那UI如果跟你纠结这个事情的话,说实话他看不出来。懂不懂一五下数它也量不出来,除非三说很明显的,他让你写一五下数,那你就做成一五下数啊,他会给你标出来的这条线做成一五下说,你就做成一五下数,懂不懂不做业务下说的时候你干嘛?你不要觉得自己很厉害,我要做个义务下说啊,你不要这么干,低调一点啊,路还长。
32:02
别太慌,好这里好,那自己大小呢,41码对吧,方他个嘛,41艾特一个,哎呀是不好,自己颜色开了回报333好,然后呢,圆角玻的个。比杠P是不是一段十五二一个I是不是的好干掉好来看一下L好,这里面有些东西要说一说。呃,这个粉色是给谁的,这个圆角是不是现在四四边都有,你看我们这边这个圆角是不是这两边没有了是吧?OK,好,那这个东西还不是我看出来的,好,那是不是上跟下右上右不上跟左吧,上右下左吧。向右向左那怎么办?上右向左顺时针转一圈嘛,是不是走你们来看一下。
33:04
哎,我们也是这样的,这边有这边没有啊是吧,那再来看还有什么东西大家看,请碰我一下,这几个字一样吗。好像大家看我们这个color现在是不是三,比如说把这个color换成第一盘PI,我们来看一下,你看这个颜色有没有变没有,你看我往里面说的文字也都没有变,也就是这个color能不能处理到的。不能是吧,那怎么办?那怎么办啊,你想处理到他的话啊,有一个约素,你可能不知道叫什么杠,We k,想想叫杠有没有。没有刚的,也没有想。呃,我自己写个过去,看能不能算什么东西啊,嗯,底下有一个。
34:09
呃,这个我得看看啊,这个忘了还真忘了,我记得我们之前讲过吧,是不是在哪边讲过C3里面。是的,现在在在讲哪一块,讲什么,讲讲那个最后的那个什么。哦对,讲H讲H5标签的时候,最后讲这个标签的时候应该在这了是吧,这里面我们说有一个疯狂的表单嘛,是吧,里面是不是有个新增属性的,你看y input干什么,Pleaseco的,我应该没记住啊,是不是它OK ctrl c。是不是这个这个玩意儿折你他应该什么,他认为什么是不是跟他一样的,比如说默认是pick,我们来看一下算一下,诶看到没有,是不是我们之前给的什么杠333。
35:04
好,CTRLC-333。Control,好,来看一下。好,现在是不是就可以了,OK,好,那我们继续下一个,好,那这个东西完了之后,我们看这个就完了,完结给它合起来,底下是谁啊。他不什么方面什么。是不,它是不是也有一个样式,好,这应该这么写,高宽啊,这就宽短203艾一个I,找你高度呢,103干嘛艾特一个I是吧,好清除边框,因为你也是个一度的嘛,所以你也得清除边白,其实我们上面已经写了吧,是吧,问你经清了吧,背景颜色光。是不是这个颜色啊,CTRLCCTRLB好,然后呢,字体颜色啊看了。
36:00
杠FF方啊,好像这个放在都是11吧,啊,那不管了,反正我们就应该是放在头上面去重拾一下,可能会比较好一点。嗯。不到十五二等一个I呀,CTRLS好,这边是不是九啊,好来看一下CTRLGCTRL好,那这个也写完,好来看一下样式,So。哎,是不是差不多啊,可是你有没有发现其实他们俩对的不是很齐,在基线上面。是不是那硬部的元素本身就是有这种问题的,那怎么办啊,一般我的做法是让你两个吧。不是两个音input的嘛,是吧,我让你一个什么特为啊,因为是在两边的嘛,是另外一个什么,把你们和模型改成浮动的啊和模型,那他们就会稍微的好一点,我们来看一下好。
37:02
刷一下你看对上来了吧,这个线就上来了,对不对,那这是一个可能是一个小技巧,自己稍微记一下啊OK,好把这个粉色盖掉。粉色,我给谁这边吧,干掉你。好,这不就出来了,大家看这个搜索按钮是不是这两边没有原则了。看到没有,OK,那干嘛?是不改改改,是不是这个没有圆角上15这上这么写行吗。行吗?上右如果这么写的话,是不是中间代表什么左右了啊,不能这么写啊,是不是还是得什么四个给他写完,好好我们稍等一下。
我来说两句