云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
2024-06-07 16:51:40
一、语言和环境
- 实现语言：javascript、html、css。
- 开发环境：HBuilder。
二、题目（100分）
1、功能需求：
- 布局出顶部导航栏目
- 鼠标放到新手入门显示对象的下拉列表
- 鼠标移开时隐藏下拉列表
2、效果如 图 1 所示：
3、推荐实现步骤
- 在HBuilder上实现web项目的新建
- 根据效果图实现页面的编写。
- 使用无序列表实现顶部导航栏
- 鼠标移入和移除事件
三、提交方式
文件以压缩包提交, 压缩包文件命名方式 :学号+班级+中文名字.zip, 中间不要”+”号 比如: /192102026记网2班杨明金.zip，压缩包必需在按规定的时间以内, 按监考老师的要求提交.
四、评分标准
|
题目：购物车结算管理 |
|||
|
该程序评分标准如下： |
|||
|
20 |
项目搭建和代码结构是否正确 |
||
|
5 |
项目正确搭建 |
||
|
5 |
正确按要求定义变量（变量的命名） |
||
|
10 |
合理的项目名称及相关页面和css、js的命名及代码规范 |
||
|
20 |
布局出页面效果 |
||
|
10 |
正确定位图片 |
||
|
10 |
显示合理的间距 |
||
|
20 |
鼠标事件 |
||
|
10 |
鼠标移入显示 |
||
|
10 |
鼠标移出隐藏 |
||
|
40 |
总体编程技术 |
||
|
5 |
程序逻辑分明，有一定注释 |
||
|
5 |
变量命名符合规范，可读性好，编码书写有缩进 |
||
|
30 |
按照要求使用js或jQuery完成要求的效果 |
||
|
总分 |
100分 |
||
五、实现代码
HTML：
<div id="top"><!-- 导航栏的左边 --><div class="top_left"><span>您好，欢迎光临蔚蓝网！</span><span>[<a href="#">登录</a>][<a href="#">免费注册</a>]</span></div><!-- 导航栏的右边 --><div class="top_right"><ul><li><a href="#"><img src="img/shoppingTrolley.png " >购物车</a></li><li>|</li><li><a href="#">我的账户</a></li><li>|</li><li><a href="#">我的订单</a></li><li>|</li><li><a href="#">礼品卡</a></li><li>|</li><li id="xsrm_ul"><a href="#" >新手入门</a><select id="xsrm"></select><ul class="xsrm"><li><a href="#">购物保障</a></li><li><a href="#">购物流程</a></li><li><a href="#">会员介绍</a></li><li><a href="#">常见问题</a></li></ul></li><li>|</li><li>客户服务</li></ul></div></div>css：
*{margin: 0;padding: 0;}a{color: black;text-decoration: none;}/* 整个导航栏样式 */#top{width: 100%;height: 50px;margin: 0 auto;line-height: 50px;background-color: aqua;}/* 导航栏左边 */.top_left{margin-left: 10%;float: left;}.top_left a:hover{color: blue;}/* 导航栏右边 */.top_right{margin-right: 10%;float: right;}.top_right>ul>li{list-style: none;float: left;margin-left: 15px;}.top_right img{width: 30px ;height: 30px ;line-height: 50px;}/* 新手入门,选项 */.xsrm{display: none;text-align: center;list-style: none;}.xsrm li{border: solid 1px;JS：
var xsrm_ul = document.getElementById("xsrm_ul");var xsrm = document.getElementsByClassName("xsrm");// 鼠标移入事件xsrm_ul.onmouseover = function(){xsrm[0].style.display="block";};// 鼠标移出时间xsrm_ul.onmouseout = function(){xsrm[0].style.display="none";};使用jQuery的hover事件实现：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用hover事件$("#xsrm_ul").hover(function(){ /* 鼠标移入时触发 */$(".xsrm:eq(0)").css('display','block');},function(){ /* 鼠标移出时触发 */$(".xsrm:eq(0)").css('display','none');});});</script>使用jQuery鼠标移入移出事件：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用鼠标移入事件$("#xsrm_ul").mouseover(function(){$(".xsrm:first").css('display','block');});// 使用鼠标移出事件$("#xsrm_ul").mouseout(function(){$(".xsrm:first").css('display','none');});});</script>完整代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style type="text/css">*{margin: 0;padding: 0;font-size: 1rem;}a{color: black;text-decoration: none;}a:hover,span:hover{color: red;font-weight: 600;}/* 整个导航栏样式 */#top{width: 100vw;height: 50px;margin: 0 auto;line-height: 50px;background-color: aqua;}/* 导航栏左边 */.top_left{margin-left: 10%;float: left;}.top_left a:hover{color: blue;}/* 导航栏右边 */.top_right{margin-right: 10%;float: right;}.top_right>ul>li{list-style: none;float: left;margin-left: 15px;}.top_right img{width: 30px ;height: 30px ;line-height: 50px;}/* 新手入门,选项 */.xsrm{display: none;text-align: center;list-style: none;}.xsrm li{border: solid 1px;</style></head><body><div id="top"><!-- 导航栏的左边 --><div class="top_left"><span>您好，欢迎光临蔚蓝网！</span><span>[<a href="#">登录</a>][<a href="#">免费注册</a>]</span></div><!-- 导航栏的右边 --><div class="top_right"><ul><li><a href="#"><img src="img/shoppingTrolley.png " >购物车</a></li><li>|</li><li><a href="#">我的账户</a></li><li>|</li><li><a href="#">我的订单</a></li><li>|</li><li><a href="#">礼品卡</a></li><li>|</li><li id="xsrm_ul"><a href="#" >新手入门</a><select id="xsrm"></select><ul class="xsrm"><li><a href="#">购物保障</a></li><li><a href="#">购物流程</a></li><li><a href="#">会员介绍</a></li><li><a href="#">常见问题</a></li></ul></li><li>|</li><li><a href="#">客户服务</a></li></ul></div></div><!-- 导入jQuery --><!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用hover事件$("#xsrm_ul").hover(function(){ /* 鼠标移入时触发 */$(".xsrm:eq(0)").css('display','block');},function(){ /* 鼠标移出时触发 */$(".xsrm:eq(0)").css('display','none');});// 使用鼠标移入事件$("#xsrm_ul").mouseover(function(){$(".xsrm:first").css('display','block');});// 使用鼠标移出事件$("#xsrm_ul").mouseout(function(){$(".xsrm:first").css('display','none');});});</script> --><script type="text/javascript">var xsrm_ul = document.getElementById("xsrm_ul");var xsrm = document.getElementsByClassName("xsrm");// 鼠标移入事件xsrm_ul.onmouseover = function(){xsrm[0].style.display="block";};// 鼠标移出时间xsrm_ul.onmouseout = function(){xsrm[0].style.display="none";};</script></body>
</html>
云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏相关推荐
- JavaScript交互式网页设计简介
JavaScript交互式网页设计 JavaScript简介: JavaScript诞生于1995年,主要是进行用户输入的合法性验证. JavaScript的概念: JavaScript可以嵌入到HT ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑥——简易旅游网
本页面分为顶部导航.登录注册栏,中部图片展示.主体内容和底部反馈模板 一.导航栏部分 要求一:设置菜单栏(二级菜单)和登录注册模块 要求二:当鼠标悬停到菜单栏(一级菜单)时,二级菜单以滑动效果滑出显示 ...
- Javascript交互式网页设计试题（一）
精选JS 50道试题,答案在首尾,喜欢收藏吧! 1.在JQuery中,下列( )方法能够获取或设置元素的文本内容,不含HTML标签. A attr() B text() C value() D rep ...
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
- JavaScript交互式网页设计笔记
一.JavaScript基本语法 1.简介 JavaScript诞生于1995年,主要是进行用户输入的合法性验证 Web脚本语言 轻型的.解释性的 浏览器内 2.执行原理 当客户端向服务器请求某个 ...
- JavaScript交互式网页设计——jQuery
<一>.jQuery概述 <1>.概述:由于不同浏览器对JavaScript解析方式有所区别,随着浏览器的不断更新,JavaScript出现了兼容性问题.为解决此问题,出现了许 ...
- JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
最新文章
- 双调整！清华大学迎来新任书记、校长
- ×××服务器是指什么?我怎样控制自己的电脑端口的开启和关闭?
- 解决SecureCRT中文版数据库里没找到防火墙'无'的错误提示
- Java执行程序服务类型
- maven 相关操作
- Android - Earthquake工程(地震监测) 的 对
- React17事件委托的变更
- Hexo博客系列(三)-将Hexo v3.x个人博客发布到GitLab Pages
- OpenCV-Python实战（14）——人脸检测详解（仅需6行代码学会4种人脸检测方法）
- 秋色园网站转移过程记录篇
- Netty中的Channel之数据冲刷与线程安全（writeAndFlush）
- 【窗口置顶神器】DeskPins
- (附源码)spring boot小型仪器公司生产管理系统 毕业设计 031853
- 回旋共振 有效质量的测量
- 网易2019实习生招聘-牛牛的naozhong
- 企业微信——二次验证，验证地址页面jsdk调用失败
- 【算法】【链表模块】删除链表的中间节点或a/b节点
- 微信公众号裂变引流教程，2020微信公众号引流最新方法集合
- Kafka(三)：kafka消费者
- java中的POJO类属性建议使用包装数据类型