00:00
在上次课程当中啊,咱们已经将头部的整体上半部分,诶,它的结构已经实现了,好,那么咱们这次课程呢,将继续来完成头部的下半部分,诶头部的下半部分好来啊,咱们找到对应的一个位置。刚才呢,这有一个上面的部分对吧,嗯,在它的后面接着往后写啊,写上下面的部分。你上面的部分呢,咱们叫做head top,对吧?那咱们底下的部分呢,咱们自然而然叫做head bottom a head bottom,那么在这head bottom当中是不是也得有版心对吧?嗯,咱们说了所有内容当中是不是都有版心元素?那么版心元素只需要上面的这个元素,再加上一个main核心嘛,对吧,嗯,核心当中左侧是logo。右侧是搜索框,是不是还是两块对吧?诶还是两块啊好,那么左侧的logo啊,咱们可以使用div啊,或者只要是个块标签其实都可以,那我呢,就用一个H1给它起个名就叫做logo,然后在这里边你发现这个logo它是不是可以点。
01:22
诶,你看下咱们整体页面右下角的这个部分。是不是这有一个Java的冒号分号,那说明它是一个超链接当中包裹的image元素,来吧A啊,Javascript冒号分号,再来上一个image。嗯,Logo。然后右侧的诶搜索框。首先先来上一个div,咱们就叫做search。Input。里边呢,有默认的一个提示文字,叫做请输入搜索内容,当然我把鼠标放在上面,这个文字不消失,那么它的属性是不是归到place holder上面对吧?诶,如果点完了之后文字消失,是不是就是咱们的value啊?嗯,所以一般提示咱们都使用place holder写上吧,请输入搜索内容啊,请输入搜索内容好,旁边的这个部分呢,很明显它应该是一个value,叫做搜索。
02:33
结构写好了,我就需要来找到咱们的less文件,诶把这个合起来啊。来怎么着把它甩到一边啊,来,这是上面的部分对吧?来接着把它里边对应的注释咱们给它写好啊,这是下面的部分。点head里面的版心。Had to me。来,紧接着logo。
03:02
Logo呢,点上logo里边有AA当中有图片,AA当中有图片啊,然后在旁边这个是咱们的搜索框,搜索框里边是点search search啊点search好,那么在点search之后啊,它是里边有input结构写好了之后,那咱们就要来套用一下咱们的样式参数,他说。呃,总整体它的一个总宽度为1200,一千二给谁给板心对吗?嗯,1200。来别忘了还得加一个什么,上下方向为零,然后左右方向为凹凸,嗯,然后它俩呢也需要做浮动,怎么着啊,别忘了加诶clear fix啊clear fix来继续。Logo它的总宽度。诶,Logo它的宽度是175和56对吧。
04:03
给到妹纸啊,宽175,然后高56,嗯,然后咱们的logo和这个搜索框只需要去加腐就可以了,嗯,这个呢,咱们让它浮到右侧去啊。他说啊,搜索框。嗯,Logo的外边距啊,Logo的外边距在这里,Margin一个是25像素,然后空格45像素。紧接着他说右侧的搜索框上外边距为35,来往下走搜索框搜索框,因为在这里啊,咱们两个都是input,所以怎么办?诶再来区分一下吧,And里边first child是咱们的搜索框。诶,这个文本框吧,嗯,要不然咱们容易混啊,然后呢,这个是提交按钮,提交按钮咱们就需要给它写成last这样好。
05:01
在这写上咱们的box s啊,Border box啊,边框盒子,然后宽度490,然后高度32,内边距拍定零和四,以及它的BORDERDER3像素,再加上实线以及它对应的这个颜色。嗯,好,那么现在这块写完了之后啊,咱们需要给它再加一个浮动啊,因为他俩呢,也是处于在一行上面对吧,那么提交按钮呢,怎么宽度是68,然后高度也为32。再加上一个文字,颜色是FF。然后再来写上背景颜色,背景颜色呢,跟上面这个颜色是一样的,所以给它拷过来啊,过来好,整体内容咱们写完了之后啊,咱们需要给它运行看一下界面。
06:02
内容当中整体已经差不多了,但是右侧边框是不是还得给它去掉一下子,所以在这儿再加上一个包纳。好吧,诶,这样的话,咱们左右两侧是不是只是结构当中写好了,还差最后一个细节,什么样的细节文字place holder的颜色。哎,你说place holder颜色怎么去加呢?在这儿其实很好办啊,很好办,咱们在这个样式当中啊,咱们再加一行。修饰谁的修饰place holder的?啊,修饰类holder的还是这个文本框当中,诶写上web kit。杠,Input g place holder,给它里边加上一个颜色,咱们就叫做yellow green,诶,这个颜色。
07:00
看一下。是不是跟人家的样子一模一样的呀?对不对,诶好了,那么本次课程呢,咱们就将logo以及搜索框的结构布局搭建完毕了。
我来说两句