《linux从入门到精通》实验指导第三讲：文件及目录操作

Size: px

Start display at page:

Download "《linux从入门到精通》实验指导第三讲：文件及目录操作"

肇葵贝
5 years ago
Views:

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> 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 1 页

2 <header> <h2> 案例 8-1: 导航菜单, 使用 CSS 实现 </h2> </header> <ul id="nav"> <li><a href="#"> 网站首页 </a> <li><a class="hsubs" href="#"> 电视剧 </a> <ul class="subs"> <li><a href="#"> 新上映 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 大陆剧 </a> <li><a href="#"> 韩剧 </a> <li><a href="#">tvb</a> <li><a href="#"> 台剧 </a> <li><a href="#"> 美剧 </a> <li><a href="#"> 英剧 </a> <li><a href="#"> 新加坡 </a> <li><a class="hsubs" href="#"> 电影 </a> <ul class="subs"> <li><a href="#"> 新上映 </a> <li><a href="#"> 新收录 </a> <li><a href="#"> 预告片 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 好莱坞 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 院线 </a> <li><a class="hsubs" href="#"> 综艺 </a> <ul class="subs"> <li><a href="#"> 最新更新 </a> <li><a href="#"> 最多播放 </a> <li><a href="#"> 大陆 </a> <li><a href="#"> 港台 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 美国 </a> <li><a href="#"> 专题 </a> <li><a href="#"> 音乐 </a> <ul class="subs"> <li><a href="#"> 新歌首播 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 欧美 </a> <li><a href="#"> 日韩 </a> <li><a href="#"> 热播 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 音乐牛人 </a> 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 2 页

3 <li><a href="#"> 动漫 </a> <ul class="subs"> <li><a href="#"> 热播中 </a> <li><a href="#"> 新收录 </a> <li><a href="#"> 国产精品 </a> <li><a href="#"> 日韩动漫 </a> <li><a href="#"> 欧美动画 </a> <li><a href="#"> 亲子益智 </a> <li><a href="#"> 排行榜 </a> <li><a href="#"> 会员 </a> </body> </html> CSS 核心代码 : #nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; #nav { font-family:" 微软雅黑 "," 黑体 "; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0-1px 3px #202020; width: 980px; /* border radius */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; /* box shadow */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, # %, #5E5E5E 50%, # %, # %); 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 3 页

4 background-color:#5f5f5f; #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; #nav li:first-child { border-left: 0 none; margin-left: 5px; #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, # %, #5E5E5E 50%, # %, # %); background-color:#5f5f5f; /* keyframes #animation1 animation1 { 0% { 30% { 100% { -webkit-transform: scale(1); -webkit-transform: scale(1.3); -webkit-transform: scale(1); 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 4 页

5 @-moz-keyframes animation1 { 0% { -moz-transform: scale(1); 30% { -moz-transform: scale(1.3); 100% { -moz-transform: scale(1); #nav li > a:hover { /* css3 animation */ -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; #nav li:hover > a { z-index: 4; #nav li:hover ul.subs { left: 0; top: 34px; width: 150px; #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /* keyframes #animation2 animation2 { 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 5 页

6 0% { margin-left:185px; 100% { margin-left:0px; animation2 { 0% { margin-left:185px; 100% { margin-left:0px; opacity:1; #nav li:hover ul li { /* css3 animation */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ /* animation delays */ #nav li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; #nav li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 6 页

7 -webkit-animation-delay: 0.05s; #nav li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; #nav li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; #nav li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; #nav li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; #nav li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; #nav li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; #nav li:hover ul li:nth-child(9) { -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; jquery 实现方法, 参考代码 : JS 代码部分 : <script src="js/jquery min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#nav>li").mouseenter(function() { ); $(this).siblings("li").find(".subs").css("display","none"); $(this).find(".subs").slidedown("fast").css("display","block"); /*$("ul.subs").find("li").mouseover(function(e){ ); $(this).animate({left:"10px",300); return false; $("ul.subs").find("li").mouseout(function(e){ )*/ $(this).animate({left:"0px"); return false; $("#nav>li").mouseleave(function(e) { 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 7 页

8 $(this).find(".subs").css("display","none"); return false; ); ) </script> 使用 CSS JS jquery 实现的具体案例, 可参考实验素材的具体内容 2 竖导航菜单 (1) 使用 JS jquery 技术实现页面功能导航的下拉菜单 (2) 两种技术实现的效果可以略有不同, 但应基本满足要求 (3) 页面导航的下拉菜单的实现效果, 可以参考 02. 实验案例 /8-2_ 竖导航菜单所示 jquery 实现方法, 参考代码 : HTML 部分 : <!doctype html> <html> <head> <meta charset="utf-8"> <title> 竖导航菜单 </title> <link rel="stylesheet" type="text/css" href="style/8-2-jquery.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/8-2-jquery.js"></script> </head> <body> <header> <h2> 案例 8-2: 竖导航菜单, 使用 jquery 实现 </h2> </header> <div id="main"> <ul class="container"> <li class="menu"> <li class="button"><a href="#" class="green"> 电视剧 </a> <li class="dropdown"> <li><a href="#"> 新上映 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 大陆剧 </a> <li><a href="#"> 韩剧 </a> <li><a href="#">tvb</a> <li><a href="#"> 台剧 </a> <li><a href="#"> 美剧 </a> <li><a href="#"> 英剧 </a> <li><a href="#"> 新加坡 </a> 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 8 页

9 <li class="menu"> <li class="button"><a href="#" class="orange"> 电影 </a> <li class="dropdown"> <li><a href="#"> 新上映 </a> <li><a href="#"> 新收录 </a> <li><a href="#"> 预告片 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 好莱坞 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 院线 </a> <li class="menu"> <li class="button"><a href="#" class="blue"> 综艺娱乐 </a> <li class="dropdown"> <li><a href="#"> 最新更新 </a> <li><a href="#"> 最多播放 </a> <li><a href="#"> 大陆 </a> <li><a href="#"> 港台 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 美国 </a> <li><a href="#"> 专题 </a> <li class="menu"> <li class="button"><a href="#" class="red"> 音乐 </a> <li class="dropdown"> <li><a href="#"> 新歌首播 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 欧美 </a> <li><a href="#"> 日韩 </a> <li><a href="#"> 热播 </a> 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 9 页

10 <li><a href="#"> 明星 </a> <li><a href="#"> 音乐牛人 </a> </div> </body> </html> JS 代码部分 : $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ /* Changing thedefault easing effect - will affect the slideup/slidedown methods: */ $.easing.def = "easeoutbounce"; /* Binding a click event handler to the links: */ $('li.button a').click(function(e){ /* Finding the drop down list that corresponds to the current section: */ var dropdown = $(this).parent().next(); /* Closing all other drop down sections, except the current one */ $('.dropdown').not(dropdown).slideup('slow'); dropdown.slidetoggle('slow'); /* Preventing the default event (which would be to navigate the browser to the link's address) */ e.preventdefault(); ) ); 要求 : 请通过 CSS JS jquery 三种技术方式实现上述两个代码请分析 CSS JS jquery 在上述案例的实现上, 各自的优势和不足请介绍使用 CSS JS jquery 在实现上述案例上的各自原理和方法并请将分析结果填写到实验报告册中六自主实验步骤 1 移动开发中的下拉菜单 (1) 通过 CSS 或 jquery 技术实现面向移动终端的页面的下拉菜单河南中医学院互联网应用技术研究所本讲共计 12 页当前第 10 页

11 (2) 具体的实现效果, 可以参考 02. 实验案例 /8-3_ 手机导航的效果所示具体如下图 8-1 所示图 8-1 智能手机访问页面的下拉菜单效果要求 : 请通过 CSS 或 jquery Mobile 实现上述效果, 并将结果填写到实验报告册中 2 通过下来菜单进行产品类别导航 (1) 请参考 02. 实验案例 /8-4_ 产品与服务导航的效果开发页面, 效果如图 8-2 所示 (2) 在实现方法上可以使用 CSS JS jquery 的任一种图 8-2 鼠标指向个人及家庭用户的效果要求 : 请实现上述效果, 并将结果填写到实验报告册中河南中医学院互联网应用技术研究所本讲共计 12 页当前第 11 页

12 七思考及问答 1 关于页面导航 (1) 页面导航的主要功能是什么? (2) 常见的页面导航的表现形式有哪些? (3) 如何设计一个好的页面导航? 2 JS 和 jquery 的对比 (1) 使用 JS 和借助 jquery 均可实现某一功能时, 其实现的方法和原理是否相同? (2)JS 和 jquery 在现实同一效果时, 其效率是否相同? 那种方式的效率更高? 河南中医学院互联网应用技术研究所本讲共计 12 页当前第 12 页

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05