云南农职《JavaScript交互式网页设计》 综合机试试卷⑥——简易旅游网
本页面分为顶部导航、登录注册栏，中部图片展示、主体内容和底部反馈模板
一、导航栏部分
要求一:设置菜单栏（二级菜单）和登录注册模块
要求二:当鼠标悬停到菜单栏（一级菜单）时，二级菜单以滑动效果滑出显示，鼠标离开菜单栏（一级菜单）时，以滑动效果滑入隐藏
二、图片展示
要求:设置背景图片，当鼠标点击图片时切换为另一张图片(图片自选)
点击后切换为另一张
三、主体内容
要求:设置主体内容模块(如图),给菜单栏”美国”的背景颜色设置为橙色，当点击菜单栏时,点击的那一个菜单栏背景颜色变为橙色，其他的菜单栏背景颜色去掉，并且菜单栏下方的内容会发生相应的改变.
四、底部反馈备案栏
要求:写出大致底部内容，文本居中
整体图
五、评分标准
|
得分情况 |
|
|
一:导航栏（30） |
写出整体结构得15分,菜单栏滑入滑出效果15分 |
|
二:图片展示（20） |
图片正常设置并显示得10分，点击图片能够切换另一张图片得10分 |
|
三:主体部分（40） |
写出整体结构得20分，点击菜单栏能够切换背景颜色得10分，点击菜单栏，下方内容能够切换得10分 |
|
四: 底部反馈备案栏(1) |
写出整体结构得5分，文本内容居中5分 |
六、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/jquery-3.4.1.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 60px;
background-color: rgb(241, 238, 238);
}
.nav ul li {
margin-right: 2px;
background-color: orange;
height: 60px;
line-height: 60px;
text-align: center;
width: 240px;
list-style: none;
float: left;
}
.nav ul li ul {
position: relative;
top: 1px;
display: none;
}
.nav .nav_right {
margin-right: 10px;
float: right;
}
.img {
display: table;
margin-bottom: 10px;
margin-top: 5px;
width: 100%;
height: 380px;
background-image: url("img/ly1.jpg");
background-repeat: no-repeat;
}
.content {
width: 1200px;
height: 400px;
border: 1px solid rgb(230, 227, 227);
margin: 0 auto;
}
.content .content_top {
width: 100%;
border-bottom: 1px solid rgb(129, 222, 238);
}
.content .content_top ul li {
width: 70px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
}
.content .content_top .active {
background-color: orange;
}
.content .content_bottom {
margin-top: 40px;
}
.content .content_bottom dl {
margin-left: 70px;
float: left;
}
.content .content_bottom dl dd {
margin: 10px 0;
}
.content .content_bottom img {
width: 320px;
height: 240px;
}
.content .content_bottom {
display: none;
}
.content .squery {
display: block;
}
p{
margin: 20px 0;
text-align: center;
}
</style>
<script>
$(function () {
$(".nav>ul>li").hover(function () {
$(this).children("ul").stop().slideDown();
}, function () {
$(this).children("ul").stop().slideUp();
})
$(".ul li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
$(".content_bottom:eq(" + $(this).index() + ")").show().siblings(".content_bottom").hide();
})
$(".img").click(function () {
$(this).css("background-image", "url('img/ly2.jpg')");
})
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li>首页</li>
<li>酒店
<ul>
<li>国外酒店</li>
<li>国内酒店</li>
<li>民宿客栈</li>
</ul>
</li>
<li>旅游
<ul>
<li>跟团游</li>
<li>周末游</li>
<li>自由行</li>
</ul>
</li>
<li>反馈</li>
</ul>
<div class="nav_right">
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
<div class="img"></div>
<div class="content">
<div class="content_top">
<ul class="ul">
<li class="active">美国</li>
<li>越南</li>
<li>韩国</li>
</ul>
</div>
<div class="content_bottom squery">
<dl>
<dt><img src="img/04.jpg" alt=""></dt>
<dd>美国<天涯双飞5日游></dd>
<dd>售价 12</dd>
</dl>
<dl>
<dt><img src="img/05.jpg" alt=""></dt>
<dd>美国<天涯双飞5日游></dd>
<dd>售价 12</dd>
</dl>
</div>
<div class="content_bottom">
<dl>
<dt><img src="img/06.jpg" alt=""></dt>
<dd>越南<天涯双飞5日游></dd>
<dd>售价 12</dd>
</dl>
<dl>
<dt><img src="img/07.jpg" alt=""></dt>
<dd>越南<天涯双飞5日游></dd>
<dd>售价 12</dd>
</dl>
</div>
<div class="content_bottom">
<dl>
<dt><img src="img/08.jpg" alt=""></dt>
<dd>韩国<天涯双飞5日游></dd>
<dd>售价 12</dd>
</dl>
<dl>
<dt><img src="img/09.jpg" alt=""></dt>
<dd>韩国<天涯双飞5日游></dd>
<dd>售价 12</dd>
</dl>
</div>
</div>
<p>
<a href="">关于我们</a>
<a href="">常见问题</a>
<a href="">反馈意见</a>
<a href="">全站地图</a>
<span>京ICP证03011373号</span>
</p>
</body>
</html>云南农职《JavaScript交互式网页设计》 综合机试试卷⑥——简易旅游网的更多相关文章
- JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷③——实现二级分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用Jquery和JavaScript实现二级分类菜单管理 点击 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
随机推荐
- 关于mysql自动备份的小方法
目前流行几种备份方式:逻辑备份.物理备份.双机热备份.备份脚本的编写等,本文分别从这些方面总结了MySQL自动备份策略的经验和技巧,一起来看看. 目前流行几种备份方式: 一.逻辑备份:使用mysql自 ...
- ORACEL 创建DIRECTORY
oracle要直接对文件进行读写必须先创建一个DIRECTORY. 语法如下: CREATE DIRECTORY UTL_FILE_DIR AS '/home/oracle/oradir'; 可以通过 ...
- Mysql的索引调优详解：如何去创建索引以及避免索引失效
在正式介绍Mysql调优之前,先补充mysql的两种引擎 mysql逻辑分层 InnoDB:事务优先(适合高并发操作,行锁) MyISAM:性能优先(表锁) 查看使用的引擎: show variabl ...
- Function overloading and const keyword
Predict the output of following C++ program. 1 #include<iostream> 2 using namespace std; 3 4 c ...
- Spring Boot发布war包流程
1.修改web model的pom.xml <packaging>war</packaging> SpringBoot默认发布的都是jar,因此要修改默认的打包方式jar为wa ...
- Airtest结合tidevice实现IOS自动化测试
这篇博文内容,是基于之前的配置而来的.我们可以先回顾一下之前博文,Windows搭建mac黑苹果系统:WebDriverAgent重签名爬坑记 . 今天来分享下如何通过 tidevice实现IOS自动 ...
- CF1581B Diameter of Graph 题解
Content \(\textsf{CQXYM}\) 想要构造一个包含 \(n\) 个点和 \(m\) 条边的无向连通图,并且他希望这个图满足下列条件: 该图中不存在重边和自环.也就是说,一条边应该连 ...
- Uni-app原生插件入门使用教程-[1]从Uni-app插件市场试用插件
[1]从Uniapp插件市场试用插件 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力. 如使 ...
- Android NDK开发篇：Java与原生代码通信(异常处理)
一.捕获异常 异常处理是Java中的功能,在Android中使用SDK进行开发的时候经常要用到.Android原生代码在执行过程中如果遇到错误,需要检测,并抛出异常给Java层.执行原生代码出现了问题 ...
- 【LeetCode】996. Number of Squareful Arrays 解题报告（C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 回溯法 日期 题目地址:https://leetco ...