00:00
Hello,各位小伙伴大家好,我是上硅谷前端讲师任安平老师,这次啊给大家带来的课程是尚优选的PC专项本套课程呢,它适合于啊已经学习过HLCSS和JS的小伙伴。那么对于初学前端的同学来说,你可能会有这样的感触啊,明明觉得自己知识点已经掌握的还不错,但是我想要完整的去做一个案例,甚至于一套完整的一个项目,有的时候会无从下手,甚至于没有思路。诶,一度呢,你就怀疑人生了。其实啊,这是因为你没有把你的整体的内容进行融会贯通。在这里你可以去夯实什么,如何去规划咱们页面的布局,以及CSS对应属性的一些修饰,甚至于将JS里边所有重点的部分,像函数以及数组对象的应用,哎,还有咱们一些其他的像实践啊,像盗墓啊,以及报幕等等,太多太多了,这些重点的部分咱们在项目当中都会有所体现,那么在这里呢,不仅会加深了你对这些知识点的一个回忆,那更是提升了如何完成一个项目当中的编程思想,当然在这过程当中啊,你也会累积了一定的实战经验。好,那么咱们整体项目当中的一个架构包含于以下的四个方向,HTMLCSS以及lesss和。
01:54
Yes。好,给大家去看一下,咱们现在整体网站的一个页面在这里啊,当前咱们需要做的是上优选的详情页面啊,商品的详情页面,好在这里呢,有几个比较核心的功能给大家提前列出来了,像常见的放大镜以及它下面缩略图的轮播效果,来大家来体验一下。
02:23
诶,这就是咱们的一个放大镜,鼠标划上来的时候呢,诶里边图片当中的一个位置它会有所变化,底下的这个部分是它所对应的缩略图,你不光可以来进行发生点击,点哪一张你对应的小图和大图的路径都有所变化,而且你的左侧和右侧的这个箭头也是可以完成图片的轮播效果,诶这是其中的第一个。那后面呢,像咱们商品参数数据的动态渲染这块啊,主要体现在了这个位置。
03:03
当然这啊,也是咱们整体项目里边的两大难点。哎,你只要把这两大难点给它攻破了之后,好,那你后面的道路就会变得非常的通畅,诶,这是咱们整体项目当中的两大难点啊,那么在这里呢?比如说我点击了之后,你会发现我点完了这些商品参数里边的结果,它是不是显示在了上面一行,而且它的价格是不是也跟着来进行变化,是不是?诶大家能够看到啊,好,当然这里边还有什么呢?选项卡往下走不难发现,这个位置就是咱们的一个选项卡,右侧也是选项卡,那么在这儿呢,你就需要知道两个位置都有选项卡,我如何来造就一个公共的选项卡函数来满足于所有的需要。
04:01
以及咱们选择搭配当中复选框当中套餐价的一个变动效果,在这里现在它的价格呀,为5299,好比如说我在这里边选择了两个附加的商品,看右侧这里是不是变成了5399对吗?诶,这是咱们套餐价它里边的一个联动效果,如果你取消的同时,它就会把价格恢复回来。好最后一个网站当中右侧的一个侧边栏,当然这个侧边栏啊,里边样式的话咱们就不提了,主要咱们要写的是它的诶这个展开和收起的效果,以及中间的这一块列表,诶这样的话,整体咱们网站当中主要的功能就给大家介绍到这儿,那么后面呢,很多小伙伴你只需要跟着老师的步伐,一步一步的,咱们把整体项目当中的任何。
05:01
和细节都不放过。好了,后面呢,咱们就来开始当前这个项目吧。
我来说两句