00:00
在上次课程当中,咱们已经将左边侧边栏整体的结构搭建出来了,本次课程呢,咱们将完善每一个选项卡当中对应的一个内容,来找到咱们对应的一个div,嗯,在这里在第一个div当中啊,我们来看一下它都有什么呢?有上下两个部分,嗯,上下两个部分,上面呢是一个部分,然后底下整体又是一个部分,诶分两块啊分两块都像是一个列表的结构,所以咱们就用ul来进行实现,为了方便来进行区分,咱们给它加上一个诶点儿名字吧,叫做good list。啊,Good list,好,来,再来一份good list2,诶,这个叫做good list1吧,嗯,那么在第一个里边呢,咱们就直接写Li,嗯,手机。
01:02
手机壳好继续内存卡,这个呢,是iPhone的配件。嗯,IPhone的配件啊,来,再来一个是贴膜。手机耳机,嗯,来再来一份,这个叫做移动电源好,最后一块呢,叫做平板电脑,好这个结构啊,咱们先去实现一下它的样式,先把这一块咱们先去搞定一下啊,在less文件当中,前面的部分该收的收起来,好路径。中间诶在goods detail在这个位置。在这个位置当中啊,咱们把上边这块也可以合起来啊div,嗯,当中呢,咱们啊写上一个看一下结构吧。
02:08
把这个甩到一边去啊,甩到一边。好,然后在这个div当中点active啊点active里边分为有ul,但是ul当中呢分两个,一个呢叫做good list1,还有一个叫做点good list2,嗯,点goods list1和goods list2,然后在这里边啊有Li,嗯,有Li,来咱们找到对应它的参数,在这块他说第一个选项卡当中内容文字列表宽度为50%,很明显人家这个内容是不是就是占一半啊。对吧,左侧一半,然后右侧是一半啊一半好,那么咱们在在这儿给上宽度为50%,紧接着。
03:06
他说啊,还有下边框,嗯,来往下挪一挪啊把这个往左来一来,Border-bottom,诶一像素,然后这个是虚线。E,嗯,Hang高Li hat为28像素,嗯,为28像素啊来好了,基本的内容呢,咱们写好了之后啊,咱们去运行看一下。那么打开这个页面之后,怎么发现内容是出现了,但是它没有放到一行上对吧?诶少点啥呀,把这个拽过来啊,在LY的身上再添加一个腐好这个效果咱们是不是就做完了对吧?诶这些没有用的,咱们就给它关掉啊好内容有了之后,但是稍稍感觉这个位置好像有一点点间距是吧?嗯,有一点点间距啊,咱们看吧,内容的内边距十像素,咱们给它加进去了没?
04:08
在content当中的内容十像素,那么这十像素的间距啊,咱们之前已经写过了,对吧?诶,咱们来看一下十像素已经写过了啊。但是写过了,为什么它不好使呢?咱们来对照一下吧,检查应该又是少了什么,咱们对应的清除浮动,因为这个side top高度是不是又塌陷了,对吧?高度又陷了啊,来在这个side top上面加上点clear fix啊,加上点clear fix,好,这样的话,这个间距是不是就已应该被撑开了呀,对吧,A被撑开了啊,嗯。好,那么这块咱们写好了之后啊,紧接着往下来进行继续搭建,把这个先给它关掉啊,在good list2当中咱们也用Li,然后Li当中呢,先是图片,诶咱们来看一下它的图片路径。
05:09
图片路径呢,是属于PART01对吧?好,我把这个给它关掉啊,在这写上images下的PART01,嗯,然后图片完事之后,紧接着是一个标题,好,咱们用span标签来表示。这块我就给它复制粘贴了啊。剩下的呢,还有一个是价格好价格呢,我可以使用P标签来把这个价格咱们也给它漏进来,写好了之后,底下是一个加入购物车,很明显啊,这个位置它是一个这个div块啊,里边是一个超链接,好在这儿咱们起个名称吧,叫做div的button,诶加上一个超链接,嗯,叫做加入购物车,嗯,加入购物车好一共是几块呢?一二三四一共是四块对吧?好,那么把对应的这个1234嗯结构给它拿过来,好基本的结构有了,但是咱们之前在调试的时候,是不是加了一个尾高度啊。
06:18
诶,这有一个1000的尾高度,咱们给它删掉不要啊。好,现在这个内容呢,已经基本内容已经出来了,就差稍微有点修饰了啊来,咱们接着打开它说图片当中每一个的外间距,来找一找吧。来搁到这里边Li,然后呢,LY当中有image,有SPA,有P,有点button,诶,Button里边还有A,嗯,好,它说外间距。Marg,嗯,五像素零和15像素下边框,诶,下边框咱们来看一下这个下边框属的是哪?是一块,一块底下是不是都有一个下边框对吧?嗯,那么这一块呢,属于的是在LY上面,你们在这写啊,Border-bottom下边框一像素实现颜色为ede e,嗯,他说啊,里边的图片它的宽度为152,还有吗?没了啊,只有宽度,然后价格的文字价格在P标签上面,价格的文字属于文字大小是16像素,再有颜色呢,是这个纸考过来color,嗯,这是它的颜色,然后购物车按钮上下的外边距margin top,诶,上下的外边距这是五。
07:58
然后它的bottom也为五像素,还有什么边框对吧?来往下漏一点啊,在这写bottom,然后一像素实现8C8C8C,嗯,然后文字的颜色。
08:19
文字颜色呢,咱们看一下它的这块啊,超链接本身的一个颜色对吧?嗯。Color啊,也是8C8C8C,嗯,那他说内边距ting诶上下方向呢,是两像素,左右方向的是14像素,行高为18,嗯,行高为18,好整体的这个结构啊,咱们写好了,嗯写好了写好了之后呢,咱们去运行一下页面,看一看它的结果。打开之后发现这个按钮是偏长了,对吗?诶,所以咱们应该是把这个内容给到谁身上,给到A标签身上啊,给到A标签身上好,它的文字,它的pading,还有它的Li hat,把这三行剪出来,咱们放到这。
09:14
再看一下内容。还是很长是吧,诶还是很长啊。还是很长呢,由于它里边的这个元素啊,A是行元素对吧,然后div是咱们的块元素,我需要把这个边框啊也给它挪下来,好挪下来之后整体的这个块它就已经写好了,但是内容呢,它需要在整体div当中居中来吧,加上一个啥呀,Tax gun along center,诶,Tax on along center,好了,来咱们对比一下。看看整体的这个内容,咱们是不是就已经写好了,对吧?诶这就写好了啊好,这样呢,咱们就将左侧整体它的一个侧边栏效果实现完毕了。
我来说两句