摘要: 任务描述 本关任务:使用Kaptcha组件生成验证码,并校验验证码是否正确。 相关知识 之前两关我们已经了解了验证码的制作流程,不过我们在开发中一般不会去自己从零开始编写验证码,而是会使用到开源的组件,本关我们就来使用Kaptcha来生成验证码,并且编写一个页面校验用户的验证码是否输入正确。 Kap 阅读全文
posted @ 2022-05-30 23:31 Q且听风吟 阅读(198) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:编写程序验证验证码是否正确。 相关知识 上一关我们已经学习如何生成验证码了,为了完成一整套的验证码使用流程我们还需要知道如何验证用户提交的验证码是否正确。 登录功能 我们经常在登录注册的时候填写验证码,本关我们就来实现登录功能。 首先我们来理解验证码校验的基本流程: 上图展示了一 阅读全文
posted @ 2022-05-30 22:50 Q且听风吟 阅读(897) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:使用servlet生成验证码。 相关知识 验证码在我们登陆、注册网站,火车票买票的时候经常会见到的,为什么要有验证码呢?可能很多人都会有这个疑问。 但是作为开发者,可能我们更多的就会关注怎么生成验证码了。 要了解如何生成验证码,我们首先要知道什么是验证码,网站为什么需要它。 为什 阅读全文
posted @ 2022-05-30 22:28 Q且听风吟 阅读(731) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:清除浮动。 效果如下: 相关知识 为了完成本关任务,你需要掌握:1.浮动出现的问题,2.清除浮动的方法。 浮动出现的问题 基本的html结构如下: <div class="container"> <div class="box1"> <p>我是box1不浮动的内容 </p> <d 阅读全文
posted @ 2022-05-30 00:05 Q且听风吟 阅读(441) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:实现下面效果,包括外阴影,多行省略,圆角的设置。 效果如下: 相关知识 为了完成本关任务,你需要掌握:1.外阴影,2.多行省略,3. 设置圆角。 外阴影 下面是基本的html结构: <div class="shadow"></div> 效果如下: 现在要左边,右边,下边都添加阴影 阅读全文
posted @ 2022-05-30 00:05 Q且听风吟 阅读(229) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:用CSS3放大效果。 效果如下: 相关知识 为了完成本关任务,你需要掌握:1.transform属性,2.transition属性。 transform属性 下面是基本的html结构,: <div class="scale"> <img src="img/diary1.jpg" 阅读全文
posted @ 2022-05-30 00:04 Q且听风吟 阅读(259) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:用CSS3实现物体移动效果。 效果如下: 相关知识 为了完成本关任务,你需要掌握:1.transform属性,2.transition属性。 transform属性 下面是基本的html结构,: <div class="move"> <p>向上移动</p> </div> 效果如下 阅读全文
posted @ 2022-05-30 00:03 Q且听风吟 阅读(287) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:用Swiper实现一个轮播图。 效果如下: 相关知识 为了完成本关任务,你需要掌握:1.Swiper基本的HTML结构,2.基本功能的实现。 搭建Swiper环境 1.下载插件 进入Swiper官网 http://www.swiper.com.cn/download/index. 阅读全文
posted @ 2022-05-30 00:03 Q且听风吟 阅读(252) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:实现静态页面的头部——header。 效果如下: 相关知识 为了完成本关任务,你需要掌握:1.float属性,2.鼠标浮动在上面的效果。 float属性 这里需要实现的效果如下: 下面是基本的html结构,去除了ul,li的默认样式: <ul class="head"> <li> 阅读全文
posted @ 2022-05-30 00:02 Q且听风吟 阅读(598) 评论(0) 推荐(0)
摘要: 任务描述 本关任务:jQuery 遍历 DOM 元素的过滤方法,显示效果如下图。 相关知识 为了完成本关任务,你需要掌握:1.first(),2. last() 3. eq(),4. filter(),5.not()。 基本的html结构如下(CSS已省略): <div class="contain 阅读全文
posted @ 2022-05-30 00:01 Q且听风吟 阅读(118) 评论(0) 推荐(0)