熠龙时空PC端职教模块
**
这次我们写了一个全新的大项目,叫熠龙时空,哈哈!话不多说,直接进入正题吧 上图
**
**
这次的项目分为两个大模块,分别为职教板块,留学板块,
**
职教板块里面是这样的
头部的标题是可以跳转的,这次的项目是分小组写的,我就写了,推荐院校这一块,话不多说上图
大概样子就是这样,这里面还有公共组件,所以我写的就很少,就写了中间这部分,
就这部分是我写的啦, 这部分就上面头条咨询难一点,需要运用css3动画,要让他动起来,因为他是两个要循环,所以就运用了遍历,其他的都是可以运用HTML和Css就可以完成. 好,接下来让我们看一下代码怎么实现.
HTML代码如下
如大家所看到的, 有重复的代码, 这是因为下面六个院校都是一样的, 所以就有重复的代码,效果很棒,大家接着往下看
Css代码如下
如图所示,大家可以看到,开头我就写了Css3动画的代码,因为代码由上向下执行,他在第一个,所以要写在开头显示, 其他的也就什么难度了,大家可以看一看, 也可以动起你们的小手试一试
JS代码如下
这里写的是,头条咨询后面的两条消息,需要设置一个空数组来把它们两个装进去,然后在上面遍历,遍历的代码在HTML哪里大家可以看到,遍历完后再加上Css3动画,这样就可以实现让它动起来的效果, 这段JS代码就是起到了这个作用. 有不懂得小伙伴可以在评论区告诉我.
这就是我写的这一点项目的效果,其他的就是公共组件,引入之后就实现了最终效果
差点给忘了,我还写了一个在线报名, 效果图如下
这个就, 更简单了吧, 话不少说, 直接上代码
HTML和Css代码我都给放一起了,想动手试试的小伙伴,可以动手试试的
好了,这个职教模块我就写了这么多,效果和代码都给大家展示了,有何不懂的小伙伴们,勇于在评论区 留言
熠龙时空PC端职教模块相关推荐
- 【Android 逆向】Android 逆向通用工具开发 ( PC 端工程分析 | 网络初始化操作 | PC 端工程核心业务逻辑 )
文章目录 前言 一.网络初始化操作 二.PC 端工程核心业务逻辑 三.博客资源 前言 本篇博客重点分析 PC 端 hacktool 模块 ; 一.网络初始化操作 HackCommand::Prepar ...
- 【Android 逆向】Android 逆向通用工具开发 ( adb forward 网络端口重定向命令 | PC 端逆向程序主函数分析 )
文章目录 前言 一.adb forward 网络端口重定向命令 二.PC 端逆向程序主函数分析 前言 本篇博客重点分析 PC 端 hacktool 模块 ; 一.adb forward 网络端口重定向 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能 先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...
- 物联网模块ESP8266-01S实现PC端和Android APP同时连接通信
本设计实现了PC端和Android APP与物联网模块ESP8266-01S通信. 1,Android APP采用E4A编写,PC端使用TCP调试助手. 首先最关键的需要对ESP8266-01S物联网 ...
- MLX90640 红外热成像仪测温传感器模块PC端操作教程
河北稳控科技MLX90640 红外热成像仪测温传感器模块PC端操作教程 1.驱动程序安装 本设备没有自带显示设备(屏幕),若要进行实时图像查看或者参数修改需要连接到计算机或者手机,并由对应的工具软件完 ...
- 14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页 电商-分类列表页 电商-注册页 一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
- PC端品优购项目——首页制作
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 开发工具以及技术栈 1.5 总结 1.6 品优购项目搭建工作 1.6.1 创建文件夹 ...
- 【Android 逆向】Frida 框架 ( 安装 frida 12.7.5 | 安装 frida-tools 5.1.0 | PC 端 frida 与 安卓模拟器端 frida-server )
文章目录 一.安装 frida 12.7.5 二.安装 frida-tools 5.1.0 三.PC 端 frida 与 安卓模拟器端 frida-server 一.安装 frida 12.7.5 前 ...
最新文章
- 正则表达式限制文本框只能输入数字,小数点,英文字母,汉字
- JavaScript实现判断32位的数字是否为正数isPositive算法（附完整源码）
- Spring Boot——RabbitMQ
- android 监听界面变化,Android之页面有变化用onWindowFocusChanged来监听权限是否开启...
- 【ArcGIS微课1000例】0006：创建随机点（Create Random Points）
- linux用户空间和内核exit的语义--linux没有线程
- 函数库属于计算机的,API库函数
- ext get id js_Ext.getCmp(“id”) 简单应用 | 学步园
- iOS开发常用快捷键
- c语言多线程的建立视频,如何用C语言实现多线程
- jquery获取radio值
- 麒麟linux怎么安装软件,中标麒麟Linux操作系统怎么安装软件?
- 清华大学计算机科学系王瑀屏,清华大学材料科学与工程系
- python3爬取拉钩招聘数据
- IDEA使用database时，连接MySQL后schemas不显示数据库名的情况
- Leetcode-前缀和
- messagrbox自定义按钮c语言,基于dialogbox修改可自定义按钮及事件的弹出框插件
- 论文笔记： iDice: Problem Identification for Emerging Issues
- 长尾分布下的分类问题
- JPA 的查询，JPA 根据方法名字查询详细介绍