How2j仿写天猫前端学习笔记二

今天完成了导航和轮播

导航和轮播

轮播用的是BootStrap框架完成的，具体含义现在还不知道，百度也没度出来，等以后有时间了在研究吧。 data-[]属性不是BootStrap首创的，这是Html5新特性，是给用户自己定义的属性。data-ride="carousel"这句代码的意思是表示轮播在页面加载时就动画播放。

了解了line-height是行高的意思，跟元素一样高就可以实现垂直居中了。图片的大小一开始我就想错了，让他宽度和屏幕一大就行了。但这样图片两侧还要放其他链接，显然是不行了。用的是相对定位，里面放绝对定位。

再把绝对定位宽度设为100%，高度和图片高度一样。距离顶部的距离和导航栏高度一样。设置
z-index: -1 这样就在文档流也就是图片下面了，不会遮挡图片。图片高德和轮播div高度一样

设高度时加上**!important优先级高的意思，因为我是先设的轮播高度，在html里面是顺序读取的，图片高度就可能执行不到，设了就行了。
29日 13:33更新

分类和推荐产品

这个是要和是要和上面的导航轮播结合，覆盖在上面的。要使用绝对定位，不然覆盖不上去。
因为我上面使用的有绝对定位，所以要自己在设相对定位，再把绝对定位覆盖进去。不然就是基于整个窗口进行定位。

还要把就对定位设为1.因为这样才能让这个页面在导航轮播上。这里主要是使用定位，才能发挥作用。整体就是div套div.

---

30日15:20更新 产品列表

产品列表

分类列表里面产品很多，就先写两个分类各写五个产品。
点击图片变亮用的是opacity:(0-1)透明度来实现的，括号里可填0-1的数值1是完全透明。

每个分类前面的绿色小树条，在html里用的是div表示，文本内容为空。在设置css时，怎么都设置不对，小树条总是在分类的上面，不能和分类对齐。让我很头疼啊，苦恼了很久。后看了站长代码后，加上display: inline-block正常。

思索一下，明了。这句代码的意思是改成内联元素，即不换行并且可以设置大小。这不正好和分来在一行了嘛。vertical-align:top和顶点垂直对齐的意思，这样小树条就向上长了，如果改成bottomj就向下长了。

---

5.31日 11:25更新轮播分类结合一起
先说下导航栏上面的猫耳朵

猫耳朵

昨晚没更新，我还以为一天没更新了呢。以后不能偷懒，学会就立马来更新。温故而知新嘛。
昨晚一点多本想吃掉一半的西瓜，结果吃了一半的一半肚子就撑的不行了，看来不能太贪心啊。不过，西瓜吃的真爽，今晚继续。哈哈哈哈哈啊哈哈哈哈哈！

这是2016出的教程，当时的天猫点击导航栏上面有猫耳朵出现，离开就没了。我刚看了下天猫官网，好像去掉了猫耳朵。为什么去掉，猫猫那么可爱，你竟然抛弃他，没天理啊。额，这都说了些啥，谈正事吧！

要实现猫耳朵的出现与隐藏需要用到jquery,实现交互。猫耳朵出现的地方有天猫超市，天猫国际，平板电视，电热水器。这四个地方。这些都是用span包裹的。实现原理就是使用鼠标进入与离开span，来显示和隐藏猫耳朵。

先计算出span的左边和上面的位置，用函数position(),这个函数会返回元素的左边和上面位置，在用的$(this).css("width")获取当前元素的宽度，在用左边位置加上宽度位置的一半，这样就会在当前元素居中了。不过我没有居中，而是在右边边缘，在减13px就居中了。可能我哪没设置对吧，jquery中代码如下。

---

鼠标悬停商品分类显示对应的详细列表

鼠标悬停商品分类显示对应详细列表

首页有很多的商品分类，每个商品分类又有很多的详细列表。详细列表必须是隐藏的，因为要显示图片，不隐藏就看不到图片。那这就是交互，和猫耳朵一样，也是用jquery来解决的。

再设计分类和列表是都自定义了一个属性cid，每个分类cid对应列表cid。需要设计两个函数，一个显示列表，一个隐藏列表函数。在用鼠标进入，离开分类和鼠标进入，离开列表分别调用显示，隐藏函数。调用函数时会传入当前元素的cid值，函数再根据cid值设计对应分类的背景色，链接颜色。

设置颜色和css鼠标悬停颜色一样，在显示列表。隐藏函数也一样，不过设置颜色时，设置为css设置的普通颜色一样。用hide()方法隐藏。一定要写鼠标进入，离开列表。不写的话当你离开分类时，列表也隐藏了。列表要紧接分类，这样才更好。
交互代码如下：

---

把轮播和分类放一起

轮播分类放一起

按理说，这个也没什么难的，久吧分类代码复制到轮播下就行了。可这花费我不少时间，主要问题是在分类里，设置了两个相对定位，导致画面不协调。分类在轮播下面，不能在他表面。

删除这两个相对定位，并把分类z-index设置比他们大就行了，增加这两个相对定位就注定不能和上面的定位在一起。