Q且听风吟

2022年5月30日

摘要：任务描述本关任务：用CSS3放大效果。效果如下：相关知识为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性下面是基本的html结构，： <div class="scale"> <img src="img/diary1.jpg" 阅读全文

posted @ 2022-05-30 00:04 Q且听风吟阅读(197) 评论(0) 推荐(0) 编辑

Educoder html网页综合项目实战第2关：用Swiper实现轮播图

摘要：任务描述本关任务：用Swiper实现一个轮播图。效果如下：相关知识为了完成本关任务，你需要掌握：1.Swiper基本的HTML结构，2.基本功能的实现。搭建Swiper环境 1.下载插件进入Swiper官网 http://www.swiper.com.cn/download/index. 阅读全文

posted @ 2022-05-30 00:03 Q且听风吟阅读(166) 评论(0) 推荐(0) 编辑

Educoder html网页综合项目实战第3关：用CSS3实现移动效果

摘要：任务描述本关任务：用CSS3实现物体移动效果。效果如下：相关知识为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性下面是基本的html结构，： <div class="move"> <p>向上移动</p> </div> 效果如下阅读全文

posted @ 2022-05-30 00:03 Q且听风吟阅读(195) 评论(0) 推荐(0) 编辑

Educoder html网页综合项目实战第1关：header——头部

摘要：任务描述本关任务：实现静态页面的头部——header。效果如下：相关知识为了完成本关任务，你需要掌握：1.float属性，2.鼠标浮动在上面的效果。 float属性这里需要实现的效果如下：下面是基本的html结构，去除了ul,li的默认样式： <ul class="head"> <li> 阅读全文

posted @ 2022-05-30 00:02 Q且听风吟阅读(429) 评论(0) 推荐(0) 编辑

Educoder jQuery动画第4关：jQuery遍历——过滤

摘要：任务描述本关任务：jQuery 遍历 DOM 元素的过滤方法，显示效果如下图。相关知识为了完成本关任务，你需要掌握：1.first()，2. last() 3. eq()，4. filter()，5.not()。基本的html结构如下（CSS已省略）： <div class="contain 阅读全文

posted @ 2022-05-30 00:01 Q且听风吟阅读(88) 评论(0) 推荐(0) 编辑

2022年5月29日

Educoder jQuery动画第3关：jQuery——遍历DOM元素的兄弟元素

摘要：任务描述本关任务：用 jQuery 遍历 DOM 元素的兄弟元素，显示效果如下图。相关知识为了完成本关任务，你需要掌握：1.siblings()，2. next()，nextAll() 3. prev()，prevAll()。基本的html结构如下（CSS已省略）： <div class=" 阅读全文

posted @ 2022-05-29 23:59 Q且听风吟阅读(84) 评论(0) 推荐(0) 编辑

Educoder jQuery动画第1关：jQuery——遍历DOM元素的祖先元素

摘要：任务描述本关任务：用 jQuery 遍历 DOM 的祖先元素。效果如下：相关知识为了完成本关任务，你需要掌握：1.节点树，2.parent()，3.parents()。节点树基本的html结构如下： <!doctype html> <html lang="en"> <head> <meta 阅读全文

posted @ 2022-05-29 23:58 Q且听风吟阅读(192) 评论(0) 推荐(0) 编辑

Educoder jQuery动画第2关：jQuery——遍历DOM元素的后代元素

摘要：任务描述本关任务：用 jQuery 向下遍历 DOM 节点，显示效果如下图。相关知识为了完成本关任务，你需要掌握：1.children()，2. find()。向下遍历DOM节点基本的html结构如下（CSS已省略）： <div>div (当前元素) <p>p (儿子元素) <span>s 阅读全文

posted @ 2022-05-29 23:58 Q且听风吟阅读(152) 评论(0) 推荐(0) 编辑

Educoder jQuery动画第4关：jQuery动画效果——自定义动画

摘要：任务描述本关任务：掌握jQuery常见的动画效果——自定义动画，实现的动态效果如下图。相关知识为了完成本关任务，你需要掌握：1.平移动画，2.相对值，3.stop()函数。基本的结构如下： <button class="stop">动画开始</button> <div class="ite 阅读全文

posted @ 2022-05-29 23:57 Q且听风吟阅读(89) 评论(0) 推荐(0) 编辑

Educoder jQuery动画第3关：jQuery动画效果——滑动

摘要：任务描述本关任务：掌握jQuery常见的动画效果——滑动，动态效果如下图。相关知识为了完成本关任务，你需要掌握：1.slideDown()，2.slideUp()，3.slideToggle()， 4.stop()。 slideDown()，slideUp() 和 slideToggle() 阅读全文

posted @ 2022-05-29 23:56 Q且听风吟阅读(84) 评论(0) 推荐(0) 编辑

公告