how2j网站前端项目——天猫前端(第一次)学习笔记2

今天早上开始首页内容。首页除了公共页面,还有许多自己的内容:导航和轮播、分类菜单、推荐产品展示,最后还有js的互动。

一、导航和轮播的学习

  在自己做图片的轮播时,还是没有一次成功。存在了好几处问题:

问题1:在最外层的div中id没有写对,data-ride没有写对 最外层div中的id应该只写成carousel-of-product,自己多加了一个carousel 还有把data-ride写反了,写成了ride-data  
问题2:在ol层中的li中,data-target没有写对   在class="carousel-indicators"的ol层,里面的li一个属性data-target,我写成了target-data,也是把属性记错    
问题3:在class="carousel-inner"的第二层div中,少写了role属性    
问题4:在
层中少写了一个属性值
中,class属性少写了值carousel,img应该这样写:how2j网站前端项目——天猫前端(第一次)学习笔记2_第1张图片

自己尝试着加上CSS样式:

how2j网站前端项目——天猫前端(第一次)学习笔记2_第2张图片

二、分类菜单的学习

纯html页面:

how2j网站前端项目——天猫前端(第一次)学习笔记2_第3张图片

尝试自己加CSS样式:

how2j网站前端项目——天猫前端(第一次)学习笔记2_第4张图片

光看样式觉得还可以,但是这个右边的详细分类其实是应该要隐藏的,how2j站长为了显示效果才这样设计的,后面还要再加上功能。这个分类菜单分左右两部分,两边都是采用绝对定位的形式,而且z-index应该要设计为1,分类菜单才可以覆盖轮播。

 

三、推荐产品展示

上一次就是学到这里,心情开始烦躁起来,这次要好好学习!:)

自己写的简单html,效果如下:

how2j网站前端项目——天猫前端(第一次)学习笔记2_第5张图片

尝试自己加上CSS,效果如下:

how2j网站前端项目——天猫前端(第一次)学习笔记2_第6张图片

现在觉得学习的时候,不要想太多,不然会觉得压力很大,很难学的感觉,这样容易产生放弃的想法,简单一点就好:)

cursor鼠标样式,cursor: pointer就是鼠标样式是手指头的

 

四、JS交互内容

首页的互动效果主要是猫耳朵的出现,以及在轮播部分显示和隐藏产品列表。猫耳朵是指在导航栏上鼠标悬停在某个链接上,上面会出现一个红色的猫耳朵;显示和隐藏产品列表是指在分类菜单中选择某个分类时会弹出更加详细的分类。老实说,我不会这个。我先看看站长怎么做的。

1.站长先设置猫耳朵图片的display属性为none,将猫耳朵隐藏

2.然后通过一段

你可能感兴趣的:(how2j网站前端项目——天猫前端(第一次)学习笔记2)