H5实战(三)：路径图页面布局

最新推荐文章于 2024-05-15 14:20:26 发布

weiweitb8

最新推荐文章于 2024-05-15 14:20:26 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： html javascript css

本文链接：https://blog.csdn.net/weiweitb8/article/details/77989731

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个路径图页面布局，包括左侧阶段标题导航和右侧课程展示。通过创建div和span元素，利用CSS边框技巧制作导航轴和箭头，结合jQuery实现鼠标移入时的动画效果，完成了一个动态的路径导航页面。

摘要由CSDN通过智能技术生成

1.目标效果

实现一个不同阶段的导航布局，如实现学习的各个阶段的路径导航页面。有一条线为轴，左侧是每个阶段的题目，右侧为相应的学习课程的展示。

2.实现思路

1）首先制作左侧导航部分的效果，是为标题导航部分，使用div的左边框作为轴，并以span边框显示为正方形作为轴上的点，将整个装有标题的div移到轴的左边，并用span标签制作三角形的箭头，制作箭头的方式是设定宽度和高度为0，设定border的大小，此时四个方向的border都是三角形的，将想要显示出来的两个方向设定颜色，将另外两个方向颜色设置为透明。至此，导航部分制作完毕。

2）然后制作右侧课程部分：导入图片并添加文字，设置相关样式，记为页面一。

3）制作鼠标移入的页面，可设定top值为原来div的高度，而原div在溢出时隐藏，设定其样式，记为页面二。

4）jquery实现鼠标移入效果：监听mouseover事件，当触发时，找到页面二，使用TweenMax制作动画效果，使其top值改变，也可以为页面一设置样式；鼠标移出时，页面一样式恢复，top改变为原div高度。

3.代码实现

1）html部分：

 <div class="coursecontent w-1000" >
        <div class="lessonlist">
            <div class="learn-lessonlist cf">
                <span class="stageicon"></span>
                <div class="stagewaring-box">
                    <span class="jiantou-right"></span>