00:00
首先咱们啊是需要来完成整体网站当中的导航条部分在哪里呢?诶,我现在红色当中所画的这个区域。诶,咱们需要来先完成它的一个整体布局,好,那么在完成这样的布局啊,咱们先来观察一下,我红色的这个条,它是不是占满了咱们宽度的100%,对吗?那么中间它呈现的这个内容。是不是有一个居中的状态,那这样的内容,咱们整体把它叫做什么板心。诶,整体咱们把它叫做版心,那么不难发现,除了当前第一行里边有版心之外,那么剩余所有的内容是不是都有百姓?发现了没?诶,它都是一个居中的状态啊,都是一个居中的状态,好,那么在这个版心元素里边,它是不是又分为了两个部分,左侧一个,然后右侧一个。
01:02
对吧,好在这里啊,首先呢,咱们需要先做一点准备工作。咱们当前的这个项目里边的这个样式啊,咱们已经有一个reset.css的一个公共啊,公共这么一个样式表,那么在公共样式表当中啊,它无外乎就是将一些带有默认间距的,把间距去掉啊,带有一些特殊样式的,比如说像A标签,去掉它的下划线,像列表去掉它旁边的一个符号,对吧?诶,当然还有像什么,像咱们的这个超链接,把它的颜色纠正啊,还有咱们音谱的元素,外边框还有等等这些啊,这是咱们一些初始化的一个样式文件。当然咱们自己来写的这个样式啊,咱们使用的是less的语法,呃,使用的是less语法,好,如果没有安装less扩展的小伙伴,首先你要先打开这个扩展在上方啊,你去搜索Les回车。
02:02
稍微等一下,在这里有一个easy less,当然这个呢,老师已经提前装过了,哎,如果你没有装啊,在这个位置它会有一个安装啊,会有一个安装,然后安装了过后默认它就启用了。诶末上就启用了啊好,那么这个less装完了之后,咱们咋用呢?找到你自己的目录,有CSS目录,还有咱们的诶图片的目录,以及图标icon,还有咱们的首页index.h秒。诶,你说老师这个不是写的详情页面吗?是因为咱们整体的这个项目当中只有这一个页面,所以咱们现在这个页面当中的命名就没有那么的一个强制要求了,当然你把它叫做details也是非常棒的啊,是非常棒的啊,好了。在CSS当中啊,咱们去新建一个文件啊,新建文件给它起个名称叫做index。
03:03
好,对着它原封不动按一下CTRLS保存,那么这个less它的语法是不是就帮咱们解析出来对应名称的CSS文件,那么咱们页面当中引用的是CSS还是lesss啊,肯定是CSS啊。对吧,只不过它的语法会借助于谁的谁的语法,Last语法,诶把这个页面怎么打开,然后在这呢,加上一行link,习惯于啊,我先引入什么呢,公共的这个文件,再来引用咱们自己所写的这个文件。哎,好吧,嗯,是这样的一个引入方式来。想要写好咱们整体的一个项目当中啊,你需要借助的是注释,诶借助的是注释啊。最外层的包裹元素,诶,当然为什么咱们一定要加这个呢?因为后期啊,咱们需要来操作到,诶,咱们不要去操作body。
04:02
诶,不要去操作party啊,所以在这咱们给它加一个最外层的包裹元素,来吧,给它起个名称,咱们叫做red。诶,给它起一个名称,怎么叫做rap。嗯,咱们给它改一下吧,因为这个单词啊,看着有点太短了啊,咱们就给它起叫rapper啊rapper好了,那在这个rapper当中啊,咱们首先需要先来完成的是头部对吗?嗯,当然这里边啊头部你可以把它写成上面这个小灰条的这一行,可以把它叫做头部,或者我在这里把前两行都叫做它的头部,所以呢,我会把头分为有什么上半部分诶这一行和什么下半部分这一行。我把它分成上下两个部分,好,那么在这咱们去给它加点注释吧。来写上这是咱们的头部,这个头部呢,你是可以使用hier的标签,正好它是什么,H5当中给咱们的语义画标签给它呀,也来上一个ID,咱们也叫做hi,那么头部咱们刚刚说到了,我是不是分为上下两个部分对吗?诶上下两个部分啊,来加上上部分。
05:25
啊,上面的部分,那么上面的部分呢,咱们起一个名称叫做hadop。诶叫做head to,好,那么在这个上半部分呢,咱们刚刚提到了它里边的内容是不是居中的呀,对吧,刚这个内容咱们说叫什么来着,版心元素对吧?整体页面当中居中的版心元素啊,来加上板心元素,好那么这个版心元素咱们也给它起一个名称叫做hadop me。A had to me,诶,版心元素写好了之后,很明显它是分为左右两个部分来写上左侧。
06:09
Div DR。当然右侧咱们也可以提前给它把注释写好,诶把注释写好啊,那么在左侧的里边我们发现欢迎来到上优选请这几个文字它是不是比较偏小,而且它还自动加粗,那么大家想一想,什么样的标签能有一个这样的效果?嗯,是不是咱们的H5标签啊,对吧,AH5标签啊,来这我就直接给它粘过来了,那么在整个H5,这是整个它的一个标签对吗?那么右侧。诶,右侧很明显应该是两个超链接。那么在这里啊,我用一个整体的标签呢,来包裹这两个超链接啊,当然这个标签你可以使用div,也可以使用一些其他的标记,那么在这里啊,我用一个P标签来包裹两个A,那么在这两个A当中呢,咱们javascript冒号来上登录来空格,再加上一行注册。
07:18
好,那么登录和注册都有了之后。都有了之后啊,咱们就需要怎么着去写样式了,诶去写样式了,把咱们的lets文件呢,给它甩到一边啊甩到一边好。在这里啊,咱们在写的时候,究左侧的咱们的一个注释是什么,右侧咱们注释就同步来吧,这写上。当然,现在写的都是单行注释,单行注释在lets当中会被解释输出吗?不会,只有多行注释才会啊,因为这块呢,也不需要,嗯。来rapper rapper底下是不是咱们的头部啊?嗯,头部当中井号hier,嗯,井号hier,然后在井号hier当中,里边是上半部分。
08:13
上半部分啊,点一定要注意它前面到底是ID还是class啊,来走版心元素,版心元素点上hiop me左侧。左侧点let。点的当中,里边有H5PP当中啊有这个A,嗯,好,整个结构写好了之后,咱们把它往这边拉一拉啊按一下咱们对应的参数,他说啊,上面整体的布局背景颜色,那这个背景颜色给到谁呀?是不是咱们的上半部分对吗?在这里啊。井号啊,这个EA1A对吧?嗯,给到它啊来紧接着他说啊,高度为30,加上高度啊30像素来,他说主要的内容宽度为1200,但是这个主要内容呢,咱们一般都所属于为版心的元素,因为它居中,嗯,因为它居中啊一千二好。
09:19
那么在这里,紧接着他说所有的竖线的颜色。那竖线颜色在哪了?是不是在这里A标签的后面对吧?好,那这个A标签啊,咱们有两个对吧?那两个当中只有一个的后面有,所以怎么办?所以在这儿咱们去加上and引用当前元素。里边的first跳的他的第一个孩子,A高RIGHT1像素实现。再把这个颜色给到他。啊,把这颜色给到他好来咱们啊去跑一下,看一看咱们整体的这个布局内容差不多,但是呢,少了点意思啊,少了点啥意思呢,内容怎么光写一千二了,对吧,还得怎么着加一个居中margin,上下方向为零,左右方向是为凹凸,此时是不是才为居中的。
10:19
对吧,再看啊,那你现在欢迎来到上优选请和右侧的部分,很明显它俩是不是在一条水平线上。来看这是咱们刚说到的H5,嗯,然后这个是咱们刚才提到的那个P,它俩是不是很明显在一条数线上,那你现在是什么,是平行这样摆,这个竖向这样摆放的吧。对吧,怎么着,诶,还得给H5加一个浮动,然后给P标签加一个腐。诶给它俩加完浮动之后,那他俩是不是都浮到一条一条线上去了,但是整体咱们光有这个。
11:01
浮动,哎,这个内容是不是有点向垂直向上的方向,你得给它搞到下面来,对吧,诶给它垂直居中啊垂直居中好。那整体内容都垂直居中,咱们就都给它加一个LI30像素。诶,都给它加上一个LIH30像素,好,那么中间的这个内容你看请和旁边是不是大概有五项序的之差,来咱们也给它加一下啊,H5的旁边加上一个右外边距五像素。是不是差不多,诶差不多啊来还剩什么,还剩这条线左右两边的间距。看看人家给了吗?诶,人家没有说咱们就可以自己去调整,咱们给到这个A标签,别光加线,还得加点间距,比如说先加一个marin right,比如说五像素。嗯,五像素好像有点多。
12:03
来个三。嗯,咱们得先把这个线的左半边的这个间距给它加进去啊,再来上一个拍顶。拍的话先给他五像素吧。嗯,差不多,然后这个间距呢,咱们再稍微给它写小一点两像素。还得再小一点。一像素。零。是不是完全一样了?对吧,诶它俩完全一样了啊好,那么这是咱们对应左侧的,来在这里啊,写好了之后咱们点击右侧检查一下,你别光看到表象啊,不要光看到表象啊,同志们,咱们得一层一层的去查现在的外per它是不是满宽对吧,有宽有高往下走,Hi也是有宽有高,Top也是有宽有高,来那你看它吧。
13:04
Op me是不是只有宽没有高啊?那你说这是为啥?还记不记得咱们说过,当一个负元素里边有子元素开启了浮动定位,是不是就会影响到其负元素它的高度塌陷问题?对吗?会影响到高度塌陷?好,那你想吧,此时咱们可以怎么着加over for hidden。对吧,诶加overflow hidden。给谁加呢?给到咱们的这个版心元素加上一个overflow hidden,此时呢,你再看现在这个元素,它的高度是被撑起来了,对吗?当然这是一个问题,再有那你想一想啊。后面的布局是不是应该也会有出现,诶,平行布局把高度塌陷,诶负元素高度塌陷的这个问题是不是还会有可能产生,那我每次我都加一个overflow hidden也可以啊也可以,不是不行,那么在这啊,咱们为了让它写成一个公共的怎么办呢?咱们在CSS当中啊,新建一个文件夹。
14:16
写上一个混合函数来新建一个文件,叫做点less。诶,点less,写上一个点fix,那么在它的后面after,诶,最后这个元素咱们给它加上几句话说,清除浮动,让它显示出来内容。为空好,那么现在这个less写好了之后,我是不是得想办法调用到我的index.less文件当中,怎么调来着?文件引入对吧?写到最上面一层at in input空格,你看你现在的这个less文件和你的mixing它俩之间是平级的。
15:04
所以直接写对方的less文件,别忘了每次写完之后一定要加分号结尾。写好了之后,你只需要把这个文件怎么着打开,需要的时候这个函数怎么着啊,搁这调用一下子。你说这跟刚才不是一样吗?好像比刚才之前麻烦了,诶你有点函数思维行不行。当你想GS当中里边功能一样的时候,你是不是也得去封装函数啊,对吧?诶不要偷懒啊,不要偷懒,好这样的话呢,咱们就借助了lets语法当中的混合函数。来再看一下。它里边的had to me高度是不是也被撑起来了,后面的布局咱们都使用这种方式,嗯,都使用这种方式啊,好,这样的话咱们对应左侧,欢迎来到上优选的这个部分,里边的布局以及样式的修饰咱们就完成了,嗯,咱们就完成了,好,咱们下次课程啊,咱们接着来实现什么右侧的导航条部分。
我来说两句