熠龙时空PC端职教模块

最新推荐文章于 2024-08-10 16:15:00 发布

H～～～

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量103

点赞数

文章标签： javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/IMURLORD/article/details/124588915

版权

**

这次我们写了一个全新的大项目,叫熠龙时空,哈哈!话不多说,直接进入正题吧上图

**
在这里插入图片描述
**

这次的项目分为两个大模块,分别为职教板块,留学板块,

**

职教板块里面是这样的

在这里插入图片描述

头部的标题是可以跳转的,这次的项目是分小组写的,我就写了,推荐院校这一块,话不多说上图

在这里插入图片描述

大概样子就是这样,这里面还有公共组件,所以我写的就很少,就写了中间这部分,

在这里插入图片描述
就这部分是我写的啦, 这部分就上面头条咨询难一点,需要运用css3动画,要让他动起来,因为他是两个要循环,所以就运用了遍历,其他的都是可以运用HTML和Css就可以完成. 好,接下来让我们看一下代码怎么实现.

HTML代码如下

在这里插入图片描述

如大家所看到的, 有重复的代码, 这是因为下面六个院校都是一样的, 所以就有重复的代码,效果很棒,大家接着往下看

Css代码如下

在这里插入图片描述

如图所示,大家可以看到,开头我就写了Css3动画的代码,因为代码由上向下执行,他在第一个,所以要写在开头显示, 其他的也就什么难度了,大家可以看一看, 也可以动起你们的小手试一试

JS代码如下

在这里插入图片描述

这里写的是,头条咨询后面的两条消息,需要设置一个空数组来把它们两个装进去,然后在上面遍历,遍历的代码在HTML哪里大家可以看到,遍历完后再加上Css3动画,这样就可以实现让它动起来的效果, 这段JS代码就是起到了这个作用. 有不懂得小伙伴可以在评论区告诉我.

这就是我写的这一点项目的效果,其他的就是公共组件,引入之后就实现了最终效果

在这里插入图片描述

差点给忘了,我还写了一个在线报名, 效果图如下

在这里插入图片描述

这个就, 更简单了吧, 话不少说, 直接上代码

在这里插入图片描述

HTML和Css代码我都给放一起了,想动手试试的小伙伴,可以动手试试的

好了,这个职教模块我就写了这么多,效果和代码都给大家展示了,有何不懂的小伙伴们,勇于在评论区留言

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
熠龙时空PC端职教模块

**这次我们写了一个全新的大项目,叫熠龙时空,哈哈!话不多说,直接进入正题吧上图****这次的项目分为两个大模块,分别为职教板块,留学板块,**职教板块里面是这样的头部的标题是可以跳转的,这次的项目是分小组写的,我就写了,推荐院校这一块,话不多说上图大概样子就是这样,这里面还有公共组件,所以我写的就很少,就写了中间这部分,就这部分是我写的啦, 这部分就上面头条咨询难一点,需要运用css3动画,要让他动起来,因为他是两个要循环,所以就运用了遍历,其他的都是可以运用HTM
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。