云南农职《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>售价&nbsp;12</dd>

            </dl>

            <dl>

                <dt><img src="img/05.jpg" alt=""></dt>

                <dd>美国<天涯双飞5日游></dd>

                <dd>售价&nbsp;12</dd>

            </dl>

        </div>

        <div class="content_bottom">

            <dl>

                <dt><img src="img/06.jpg" alt=""></dt>

                <dd>越南<天涯双飞5日游></dd>

                <dd>售价&nbsp;12</dd>

            </dl>

            <dl>

                <dt><img src="img/07.jpg" alt=""></dt>

                <dd>越南<天涯双飞5日游></dd>

                <dd>售价&nbsp;12</dd>

            </dl>

        </div>

        <div class="content_bottom">

            <dl>

                <dt><img src="img/08.jpg" alt=""></dt>

                <dd>韩国<天涯双飞5日游></dd>

                <dd>售价&nbsp;12</dd>

            </dl>

            <dl>

                <dt><img src="img/09.jpg" alt=""></dt>

                <dd>韩国<天涯双飞5日游></dd>

                <dd>售价&nbsp;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 使 ...

随机推荐

Android 利用Settings.Global属性跨应用定义标志位
https://blog.csdn.net/ouzhuangzhuang/article/details/82258148 需求需要在不同应用中定义一个标志位,这里介绍下系统级别的应用和非系统级别应 ...
Spring Boot 创建定时任务（配合数据库动态执行）
序言:创建定时任务非常简单,主要有两种创建方式:一.基于注解(@Scheduled) 二.基于接口(SchedulingConfigurer). 前者相信大家都很熟悉,但是实际使用中我们往往想从数据库 ...
APICloud - 提交项目点击右键没有git这个选项
你们是不是也遇到过这个问题,吧项目检出来后,花了很久的时间,好不容易吧项目改完,提交的时候点击鼠标右键,发现git选项没有在里面了,找不到,但是这个问题也不是很常遇到,机率很小,下面我来告诉你们吧原 ...
常用 HTTP 状态码
下面是列举的我在项目中用到过的一些 HTTP 状态码,当然,在具体的使用中并不是用到的状态码越多越好,需要结合自己项目情况来选用适合自己的 HTTP 状态码. HTTP 状态码含义说明 200 ...
【Matlab】线性调频信号LFM 仿真
[知识点] 生成序列 i = a:step:b 举例: i = 1:1:9 画图(子图) subplot(m,n,p)或者subplot(m n p) 总结起来就是,画一个m行n列的图. p表示在第p ...
MySQL5.7安装教程(亲测有效)
跟着狂神学java到了数据库阶段了,首先得安装好数据库啊,这里用的是MySQL 压缩包下载:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5. ...
Linux内核启动流程（简介）
1. vmlinux.lds 首先分析 Linux 内核的连接脚本文件 arch/arm/kernel/vmlinux.lds,通过链接脚本可以找到 Linux 内核的第一行程序是从哪里执行的: 第 ...
设计风格之REST
一.简介 REST简介 REST 是英文 representational state transfer(表象性状态转变)或者表述性状态转移;Rest 是 web 服务的一种架构风格;使用 HTTP ...
ThreadLocal的使用方法
ThreadLocal的使用方法 (2011-10-10 22:05:48) 转载▼ 概述 ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个 ...
supermarket(uaf)！！！！
在这道题目我花费了很长的时间去理解,因为绕进了死圈子例行检查我就不放了关键处在于选择5 使用了realloc,却没有让结构体指针node-> description正确指回去 (11条消息) ...

云南农职《JavaScript交互式网页设计》 综合机试试卷⑥——简易旅游网