正在加载图片...
《Web前端开发》实验指导/实验八:下拉菜单 《Web前端开发》实验指导 实验八:下拉菜单 、实验目的 1、掌握CSS动画、JS动画和 jQuery动画的基本原理和基本方法; 2、掌握下拉菜单制作的基本原理: 3、理解技术多样性的概念。 二、实验环境 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址 3、支持互联网访问 4、 Adobe Cs6组件支持。 、实验要求 1、通过CSS、JS、 jQuery三种技术路线实现橫向和竖形导航菜单; 2、通过CSS、JS、 jQuery的任一种技术路线实现手机下拉菜单; 3、请对CSS、JS、 jQuery实现下拉菜单的各自原理进行分析。 四、实验原理 1、使用HTML5和CSS3进行网页布局的基本方法 2、CSS动画的基本原理和实现方法 3、 JavaScript操作DOM和CSS属性的基本方法; 4、 jQuery操作DOM和CSS属性的基本方法。 五、实验步骤 1、导航菜单 (1)使用CSS、JS、 jQuery技术实现页面导航的下拉菜单。 (2)三种技术实现的效果可以略有不同,但应基本满足要求。 (3)页面导航的下拉菜单的实现效果,可以参考【02实验案例8-1导航菜单】所示 CSS实现方法,参考代码: HIML部分: <IDOCTYPE html> <meta charset=utf-8"> ttfe>导航菜单<,ite> <link href="Style/layout css"rel="stylesheet" type="text/css"/> <link href="Style/menu css"rel="stylesheettype="text/css"A 河南中医学院互联网应用技术研究所 本讲共计12页|当前第1页《Web 前端开发》实验指导 / 实验八:下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 1 页 《Web 前端开发》实验指导: 实验八:下拉菜单 一、实验目的 1、掌握 CSS 动画、JS 动画和 jQuery 动画的基本原理和基本方法; 2、掌握下拉菜单制作的基本原理; 3、理解技术多样性的概念。 二、实验环境 1、Windows XP/Windows 7 操作系统的计算机; 2、局域网网络环境,并且使用固定 IP 地址; 3、支持互联网访问; 4、Adobe CS 6 组件支持。 三、实验要求 1、通过 CSS、JS、jQuery 三种技术路线实现横向和竖形导航菜单; 2、通过 CSS、JS、jQuery 的任一种技术路线实现手机下拉菜单; 3、请对 CSS、JS、jQuery 实现下拉菜单的各自原理进行分析。 四、实验原理 1、使用 HTML5 和 CSS3 进行网页布局的基本方法; 2、CSS 动画的基本原理和实现方法; 3、JavaScript 操作 DOM 和 CSS 属性的基本方法; 4、jQuery 操作 DOM 和 CSS 属性的基本方法。 五、实验步骤 1、导航菜单 (1)使用 CSS、JS、jQuery 技术实现页面导航的下拉菜单。 (2)三种技术实现的效果可以略有不同,但应基本满足要求。 (3)页面导航的下拉菜单的实现效果,可以参考【02.实验案例/8-1_导航菜单】所示。 CSS 实现方法,参考代码: HTML 部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航菜单</title> <link href="Style/layout.css" rel="stylesheet" type="text/css" /> <link href="Style/menu.css" rel="stylesheet" type="text/css" /> </head> <body>
向下翻页>>
©2008-现在 cucdc.com 高等教育资讯网 版权所有