HTML5期末大作业：旅游网页设计——山东旅游9页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计

HTML+CSS+JavaScript
常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, 可满足大学生网页大作业和毕业网页设计需求!

临近期末, 很多同学苦于没有参考的资料，或者下载的资料不全、代码有问题、数据有问题等等,造成一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
作品介绍

1.用 HTML 结构标记（或 div 标记）+CSS 进行布局定位（如在 1024×768下全屏显示无横向滚动条）。

2.作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网站页面标题、创意设计制作的 Logo 图标和 Banner 广告符合网站主题。

4.首页栏目数量不少于 3 个，各栏目能正确链接到相应栏目页面，同时各栏目页面能正确返回网站首页。

5.网站内容具有原创性，内容充实，特效且运用合理。

6.网站整体色系符合视觉习惯，布局合理美观，结构层次清楚，目录结构清晰，文件及文件夹命名规范。

一、作品展示

二、文件目录

三、代码实现

<!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"><title>魅力菏泽 花乡水邑 中国牡丹之都</title><!-- 引入重置样式表 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入公共的样式表 --><link rel="stylesheet" href="./css/base.css"><!-- 引入图标字体库 --><link rel="stylesheet" href="./fa/css/all.css"><!-- 引入当前页面的样式表 --><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/foot-box.css"><!-- 设置网站的图标（在标题栏和收藏栏）- 网站图片一般都存储在网站的根目录下，名字一般都叫做 favicon.ico--><link rel="icon" href="./favicon.ico"></head><body><!-- 顶部导航条 --><!-- 顶部导航条外部容器 --><div class="topbar-wrapper"><!-- 创建内部容器 --><div class="topbar w clearfix"><!-- 左侧的导航 --><ul class="service"><li><a href="">荣誉称号</a></li><li class="line">|</li><li><a href="javascript:;">牡丹之都</a></li><li class="line">|</li><li><a href="javascript:;">戏曲之乡</a></li><li class="line">|</li><li><a href="javascript:;">武术之乡</a></li><li class="line">|</li><li><a href="javascript:;">书画之乡</a></li><li class="line">|</li><li><a href="javascript:;">园林城市</a></li><li class="line">|</li><li><a href="javascript:;">旅游城市</a></li><li class="line">|</li><li><a href="javascript:;">模范城市</a></li><li class="line">|</li><li><a href="javascript:;">魅力城市</a></li><li class="line">|</li><li><a href="javascript:;">百强城市</a></li><li class="line">|</li><li class="app-wrapper"><a class="app" href="javascript:;">菏泽官方抖音号<!-- 添加一个弹出层 --><div class="qrcode"><img src="./img/download.png"><span>看菏泽</span></div></a></li></ul><!-- 关注菏泽 --><ul class="user-info"><li><a href="./注册.html">用户注册</a></li></ul></div></div><!-- 创建一个头部的外部容器 --><div class="header-wrapper"><div class="header w clearfix"><!-- 创建一个logo --><h1 class="logo" title=""><a class="home" href="/"></a><a class="mi" href="/"></a></h1><!-- 创建一个中间导航条的容器 --><div class="nav-wrapper"><!-- 创建导航条  --><ul class="nav clearfix"><li class="all-goods-wrapper"><a class="all-goods" href="./Untitled-2.html">首页</a><!-- 创建一个左侧导航菜单 --><ul class="left-menu"><li><a href="#">行政区划<i class="fas fa-angle-right"></i></a></li><li><a href="#">牡丹区<i class="fas fa-angle-right"></i></a></li><li><a href="#">郓城<i class="fas fa-angle-right"></i></a></li><li><a href="#">鄄城<i class="fas fa-angle-right"></i></a></li><li><a href="#">定陶 <i class="fas fa-angle-right"></i></a></li><li><a href="#">曹县<i class="fas fa-angle-right"></i></a></li><li><a href="#">成武<i class="fas fa-angle-right"></i></a></li><li><a href="#">单县<i class="fas fa-angle-right"></i></a></li><li><a href="#">巨野<i class="fas fa-angle-right"></i></a></li><li><a href="#">东明<i class="fas fa-angle-right"></i></a></li></ul></li><li class="show-goods"><a href="./jingdian.html">景点</a></li><li class="show-goods"><a href="./meishi.html">美食</a></li><li class="show-goods"><a href="./人物.html">人物</a></li><li class="show-goods"><a href="./文化.html">文化</a></li><li class="show-goods"><a href="./学校.html">学校</a></li><li class="show-goods"><a href="./历史.html">历史</a></li><li class="show-goods"><a href="./交通.html">交通运输</a></li><!-- 创建一个弹出层 --></ul></div><!-- 创建搜索框的容器 --><div class="search-wrapper"><form class="search" action="#"><input class="search-inp" type="text"><button class="search-btn"><i class="fas fa-search"></i></button></form></div></div></div><!-- 创建banner的容器 --><div class="banner-wrapper"><div class="banner w"><ul class="imgBox"><li><a href="#"><img class="img-slide img" src="./img/banner1.jpg" alt="img1"></a></li><li><a href="#"><img class="img-slide img" src="./img/banner3.jpg" alt="img2"></a></li><li><a href="#"><img class="img-slide img" src="./img/banner2.jpg" alt="img3"></a></li><li><a href="#"><img class="img-slide img" src="./img/banner4.jpg" alt="img4"></a></li><li><a href="#"><img class="img-slide img" src="./img/banner5.jpg" alt="img5"></a></li></ul><script type="text/javascript">// index：索引， len：长度var index = 0, len;// 类似获取一个元素数组var imgBox = document.getElementsByClassName("img-slide");len = imgBox.length;imgBox[index].style.display = 'block';// 逻辑控制函数function slideShow() {index ++;// 防止数组溢出if(index >= len) index = 0;// 遍历每一个元素for(var i=0; i<len; i++) {imgBox[i].style.display = 'none';}// 每次只有一张图片显示imgBox[index].style.display = 'block';}// 定时器，间隔3s切换图片setInterval(slideShow, 2000);</script><div class="pointer"><a class="active" href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><div class="prev-next"><a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a></div></div></div><!-- 创建广告容器 --><div class="ad w"><ul class="shortcut"><li><a href="#"><i class="fas fa-clock"></i>猜你想找</a></li><li><a href="#"><i class="fas fa-building"></i>菏泽曹县</a></li><li><a href="#"><i class="fas fa-frog"></i>菏泽高铁</a></li><li><a href="#"><i class="fas fa-robot"></i>牡丹机场</a></li><li><a href="#"><i class="fas fa-keyboard"></i>菏泽明星</a></li><li><a href="#"><i class="fas fa-sim-card"></i>菏泽学院</a></li></ul><ul class="imgs"><li><a href="#"><img src="./img/1.jpg" alt=""></a></li><li><a href="#"><img src="./img/2.jpg" alt=""></a></li><li><a href="#"><img src="./img/3.jpg" alt=""></a></li></ul></div><div class="ad1 w"><ul class="imgs"><li><a href="#"><img src="./img/4.png" alt=""></a></li></ul></div><div id="di" class="c"><div class="c hang"><span><a href="#">关于我们</a></span>· <span><a href="#">加入我们</a></span>· <span><a href="#">联系我们</a></span>·<span> <a href="#">法律申明</a></span></div>
<div class="bei">Copyright © 2012 www.heze.com All Right Reserved 备案编号:鲁ICP备</div>
</div>
<div style="text-align:center;"></div>
</body>
</html>

看到这里了就 [点赞+好评+收藏] 三连支持下吧！