一、网站题目
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、img网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中homepage.html是首页、其他html为二级页面；
（2）css文件包含：css包括多个文件，对网站的各个网页样式进行控制;
（3）js文件包含：js实现动态轮播特效, 点击事件，滚动图特效等等（个别网页中运用到js代码）。
三、文件目录：
四、作品展示
1
五、代码内容分析
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了input文本框和input按钮，以及a标签超链接等，完成表单信息收集，并采用添加视频的方式设置动态背景。利用CSS设置input提交按钮文字大小和颜色。
（4）采用了部分js内容，其中个人中心页面的弹性布局，首页的轮播图及各个景区页面的滚动图都采用了js代码。
六、代码展示
一、首页html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>开心旅游网</title>
<link href="txt.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="banner.css" type="text/css" />
<link rel="stylesheet" href="txt1.css" type="text/css" />
<link rel="stylesheet" href="txt3.css" type="text/css" />
<style>
/* 风车布局 */
.fj{
float: left;
}
.fj img{
height: 200px;
width: 320px;
}
</style>
</head>
<body>
<!-- 风车部分 -->
<div class="wrapper">
<div class="top">
<div class="ming">
<img src="top.png" />
</div>
<div class="fc">
<div class="fc01"></div>
<div class="fc02"></div>
<div class="fc03"></div>
<div class="fc04"></div>
</div>
<div class="fc">
<div class="fc01"></div>
<div class="fc02"></div>
<div class="fc03"></div>
<div class="fc04"></div>
</div>
<div class="fc">
<div class="fc01"></div>
<div class="fc02"></div>
<div class="fc03"></div>
<div class="fc04"></div>
</div>
<div class="fc">
<div class="fc01"></div>
<div class="fc02"></div>
<div class="fc03"></div>
<div class="fc04"></div>
</div>
<div class="fj">
<img src="img/11/sy.gif" alt="">
</div>
</div>
</div>
<!-- 导航部分 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#jd">热门推荐</a></li>
<li><a href="pl.html">评论专区</a></li>
<li><a href="gr.html" target="_blank">个人中心</a></li>
<li><a href="dlzc.html" target="_blank">登录/注册</a></li>
<li><a href="seven.html" target="_blank">意见反馈</a></li>
</ul>
</div>
<!-- 轮播图部分 -->
<div class="banner">
<div class="banner-img"><img src="img/db/db06.jpg" /></div>
<div class="banner-img"><img src="img/db/db04.jpg" /></div>
<div class="banner-img"><img src="img/db/db05.jpg" /></div>
<div class="banner-img"><img src="img/db/db07.jpg" /></div>
<div class="banner-img"><img src="img/db/db02.jpg" /></div>
<div class="banner-left"><</div>
<div class="banner-right">></div>
<div class="yuandian">
<ul>
<li class="botton"></li>
<li class="botton"></li>
<li class="botton"></li>
<li class="botton"></li>
<li class="botton"></li>
</ul>
</div>
</div>
<!-- 轮播图js内容-->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.7.0.min.js"
></script>
<script type="text/javascript">
$(function () {
// 标记当前图片的索引
var index = 0;
var f;
//设置定时器
dingshiqi();
//轮播函数
function dingshiqi() {
f = setInterval(function () {
if (index == $(".banner-img").length - 1) {
index = 0;
//设置显示图片
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color", "#ccc");
$(".botton").eq(index).css("background-color", "#fff");
} else {
index++;
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color", "#ccc");
$(".botton").eq(index).css("background-color", "#fff");
}
}, 3000); //3000表示3s
}
//左按钮
$(".banner-left").click(function(){
//取消自动轮播
clearInterval(f);
if(index==0){
index=$(".banner-img").length-1;
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color", "#ccc");
$(".botton").eq(index).css("background-color", "#fff");
//重新启动自动轮播
dingshiqi();
}
else{
index--;
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color", "#ccc");
$(".botton").eq(index).css("background-color", "#fff");
dingshiqi();
}
})
//右按钮
$(".banner-right").click(function(){
//取消自动轮播
clearInterval(f);
//判断图片位置
if(index==$(".banner-img").length-1){
index=0;
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color","#ccc");
$(".botton").eq(index).css("background-color","#fff")
dingshiqi();
}
else{
index++;
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color","#ccc");
$(".botton").eq(index).css("background-color","#fff")
dingshiqi();
}
})
//底部的圆点
$(".botton").click(function(){
//取消自动轮播
clearInterval(f);
var indexx=$(this).index();
index=indexx;
$(".banner-img").css("opacity", "0");
$(".banner-img").eq(index).css("opacity", "1");
$(".botton").css("background-color","#ccc");
$(".botton").eq(index).css("background-color","#fff")
//重新启动自动轮播
dingshiqi();
})
})
</script>
<!-- 内容部分 -->
<div class="content" id="jd">
<h3>热门打卡点简介</h3>
<div class="content-01" id="content-001">
<img src="img/banner/jd01.jpg" alt="" class="content-tu" />
<a href="jd01.html" target="_blank" id="content-a">重庆</a>
<p>
重庆市位于中国西南部，是中国的一个直辖市。重庆是一个充满活力和魅力的城市，拥有悠久的历史和文化，也是一个旅游胜地。
</p>
<p>
重庆的旅游资源主要分为自然景区和文化景区两大类。自然景区以三峡、武隆天生三桥和芙蓉洞等为代表，这些景区以峡谷、瀑布和溶洞为主，可以欣赏到壮丽的自然美景。文化景区则以洪崖洞、磁器口古镇和白公馆等为代表，这些景区则是展示重庆本土文化和历史的重要场所。
</p>
<p>
在重庆市内，您可以参观到许多著名的景点，如洪崖洞、解放碑、重庆动物园等。洪崖洞是一座保存完好的老城区，这里有着鲜明的巴渝文化，可以体验到传统的民俗风情；解放碑则是重庆的标志性建筑之一，是一座纪念中国抗日战争胜利的纪念碑；重庆动物园是中国西南地区最大的野生动物园，这里有着丰富的野生动植物资源，吸引了大量游客前来观赏。
</p>
</div>
<div class="content-01" id="content-002">
<img src="img/banner/jd02.jpg" alt="" class="content-tu" />
<a href="jd02.html" target="_blank" id="content-a">大理</a>
<p>
大理是中国云南省的一个著名旅游城市，拥有悠久的历史和文化底蕴，也是世界知名的旅游目的地之一。
</p>
<p>
大理的旅游资源主要分为自然景区和文化景区两大类。自然景区以洱海、苍山和三塔寺等为代表，这些景区以湖泊、山峰和古老建筑为主，可以欣赏到宁静美丽的自然风光。文化景区则以崇圣寺三塔、白族民居和大理古城等为代表，这些景区则是展示大理本土文化和历史的重要场所。
</p>
<p>
在大理市内，您可以参观到许多著名的景点，如大理古城、洱海、崇圣寺三塔等。大理古城是古代的历史名城，这里保存了大量的明清时期的建筑和文物，是了解大理古代历史文化的好去处；洱海是云南省最大的高原淡水湖泊之一，这里风景秀美，给人带来宁静祥和的感觉；崇圣寺三塔是大理著名的历史文化遗址，这里保存了许多珍贵的文化遗产和历史文物。
</p>
</div>
<div class="content-01" id="content-003">
<img src="img/banner/jd03.jpg" alt="" class="content-tu" />
<a href="jd03.html" target="_blank" id="content-a">厦门</a>
<p>
厦门是中国福建省的一个沿海城市，也是中国东南沿海地区的重要旅游城市之一。厦门具有优越的自然条件和丰富的文化底蕴，是一个旅游胜地。
</p>
<p>
厦门的旅游资源主要分为自然景区和文化景区两大类。自然景区以鼓浪屿、曾厝垵和胡里山炮台等为代表，这些景区以自然美景为主，可以欣赏到古老而优美的建筑、海滩和海洋风光。文化景区则以南普陀寺、海沧大庙和集美学村等为代表，这些景区则是展示厦门本土文化和历史的重要场所。
</p>
<p>
在厦门市内，您可以参观到许多著名的景点，如厦门大学、鼓浪屿、南普陀寺等。厦门大学是中国著名的高等学府之一，校园内风景秀美，有着悠久的历史和文化背景；鼓浪屿是厦门著名的小岛，以其独特的建筑和海洋风光吸引了大量游客前来参观；南普陀寺则是一座佛教名刹，这里保存有许多珍贵的文化遗产和历史文物，是一个了解厦门本土文化的好去处。
</p>
</div>
<div class="content-01" id="content-004">
<img src="img/banner/jd04.jpg" alt="" class="content-tu" />
<a href="jd04.html" target="_blank" id="content-a">湖州</a>
<p>
湖州是中国浙江省的一个历史文化名城，位于太湖之滨，是苏杭文化和吴越文化的交汇地。湖州自然风光秀美，人文景观独特，是一个旅游胜地。
</p>
<p>
湖州的旅游资源主要分为自然景区和文化景区两大类。自然景区以南浔水乡、天目山和震泽湖等为代表，这些景区以自然美景为主，可以欣赏到湖光山色、清流飞瀑等自然风光。文化景区则以安吉竹博园、梁祝文化园和德清白云观为代表，这些景区则是展示湖州本土文化和历史的重要场所。
</p>
<p>
在湖州市内，您可以参观到许多著名的景点，如南浔古镇、南太湖国家森林公园、织里镇等。南浔古镇是江南的一座古镇，具有800多年历史，这里保存着大量的明清时期建筑和江南水乡的传统风情；南太湖国家森林公园是中国首个“水乡森林公园”，这里有原生态森林、湿地和淡水湖泊，是一个集野生动植物观赏、户外运动和度假休闲为一体的国家级风景区；织里镇则是浙江名镇之一，以蚕桑文化、纺织文化和手工艺制品而著名，这里可以参观到织里丝绸博物馆、西湖水乡等。
</p>
</div>
<div class="content-01" id="content-005">
<img src="img/banner/jd05.jpg" alt="" class="content-tu" />
<a href="jd05.html" target="_blank" id="content-a">丽江</a>
<p>
丽江是中国云南省的一个著名旅游城市，位于云南省西北部，是滇藏高原和云贵高原交汇处的重要节点城市，也是“丝绸之路经济带”和“21世纪海上丝绸之路”的重要门户城市。丽江因其得天独厚的自然环境、历史文化积淀和民族特色而闻名于世。
</p>
<p>
丽江有着丰富的旅游资源，其中，以古镇束河、大研古城和玉龙雪山最为知名。古镇束河和大研古城是著名的历史文化景区，这里保存了丰富的纳西族文化，是中国著名的历史文化名城；而玉龙雪山则是云南省内海拔最高的山峰，也是中国最美的雪山之一，这里风光旖旎、景色宜人，吸引了大量游客前来探访。
</p>
<p>
此外，丽江还有很多其他的景点，如黑龙潭公园、丽江古城水车、木府等等。在丽江旅游，不仅可以欣赏到美丽的自然风景，还可以感受到浓郁的民族文化和历史底蕴。
</p>
</div>
<div class="content-01" id="content-006">
<img src="img/banner/jd06.jpg" alt="" class="content-tu" />
<a href="jd06.html" target="_blank" id="content-a">苏州</a>
<p>
苏州是中国江苏省的一个历史文化名城，被誉为“天堂”，是中国著名的旅游胜地之一。苏州位于长江下游平原的东南部，与上海相邻，具有得天独厚的自然环境和人文资源。
</p>
<p>
苏州的旅游资源丰富多彩，其中以古典园林最为著名。苏州园林共有九家被列为联合国教科文组织世界文化遗产，如拙政园、留园、虎丘等。这些园林精致绝伦，几乎每一座都是一座艺术品，吸引了无数游客前来参观。
</p>
<p>
除此之外，苏州还有许多其他景点，如周庄古镇、盘门景区、狮子林等。周庄是一个著名的水乡古镇，这里有着古老的吊脚楼和小桥流水，非常适合游客们漫步走赏；盘门景区则是重现了苏州传统式样的古街，这里可以欣赏到传统的工艺和美食；而狮子林则是苏州著名的园林之一，以“假山”为主题，景点内有许多假山和奇石。
</p>
</div>
<div class="content-01" id="content-007">
<img src="img/banner/jd07.jpg" alt="" class="content-tu" />
<a href="jd07.html" target="_blank" id="content-a">南京</a>
<p>
南京是中国江苏省的省会城市，是中国著名的历史文化名城。南京是一个拥有悠久历史的城市，历经了多个朝代和历史事件，留下了丰富的文化遗产和历史建筑。
</p>
<p>
南京的旅游资源非常丰富，其中以明清时期的建筑和古迹最为著名。在南京市区内，可以参观夫子庙、秦淮河、鸡鸣寺等知名景点。夫子庙是一个著名的文化景区，这里有许多古色古香的建筑和传统手工艺品店铺；秦淮河则是南京的母亲河，这里有风光优美的河岸风景和传统的民俗表演；而鸡鸣寺则是一座历史悠久的佛教寺庙，是南京重要的文化遗产之一。
</p>
<p>
此外，南京周边还有许多其他的景点，如中山陵、雨花台、明孝陵等。中山陵是中国近代伟大领袖孙中山先生的陵墓，是中国现代史的重要象征之一；雨花台则是一个纪念中国近代革命烈士的景区，这里有着浓厚的革命历史氛围；明孝陵是明朝嘉靖皇帝和太皇太后的陵墓，是中国传统文化的重要遗产之一。
</p>
</div>
<div class="content-01" id="content-008">
<img src="img/banner/jd08.jpg" alt="" class="content-tu" />
<a href="jd08.html" target="_blank" id="content-a">贵阳</a>
<p>
贵阳是中国贵州省的省会城市，是一个拥有丰富历史和自然资源的城市。贵阳地处南亚热带和北亚热带之间，气候宜人，四季温和，是一个旅游度假的好去处。
</p>
<p>
贵阳的旅游资源主要分为自然景区和文化景区两大类。自然景区以花溪景区、黔灵山公园和青岩古镇为代表，这些景区以自然美景为主，可以欣赏到奇峰异石、潺潺流水等自然风光。文化景区则以贵州省博物馆、白云观和钟山风景名胜区为代表，这些景区则是展示贵州本土文化和历史的重要场所。
</p>
<p>
在贵阳市内，您可以参观到许多著名的景点，如贵州省博物馆、花溪民族风情园、贵阳国际茶文化城等。贵州省博物馆是贵州省内唯一一座综合性博物馆，馆内收藏着丰富的贵州本土文物和历史文化遗产；而花溪民族风情园则是一个集生态、文化、旅游于一体的综合性民族风情景区，这里可以欣赏到贵州本土的传统节日和民俗文化；贵阳国际茶文化城则是一个集茶文化、旅游、购物于一体的现代化综合性商业区，这里可以品尝到正宗的贵州茶。
</p>
</div>
<div class="content-01" id="content-009">
<img src="img/banner/jd09.jpg" alt="" class="content-tu" />
<a href="jd09.html" target="_blank" id="content-a">洛阳</a>
<p>
洛阳是中国河南省的一座历史名城，位于中原地区南部，是中华文化的重要发源地之一。洛阳有着悠久的历史和深厚的文化底蕴，是一个闻名全国的旅游胜地。
</p>
<p>
洛阳的旅游资源主要分为自然景区和文化景区两大类。自然景区以龙门石窟、白马寺和嵩山少林寺为代表，这些景区以自然美景为主，可以欣赏到众多的岩石艺术和巍峨壮观的山川风光。而文化景区则以洛阳博物馆、洛阳老城区和洛阳孔子庙为代表，这些景区则是展示洛阳本土文化和历史的重要场所。
</p>
<p>
在洛阳市内，您可以参观到许多著名的景点，如龙门石窟、白马寺、云龙湖等。龙门石窟是中国著名的佛教石窟之一，它以其精美绝伦的雕刻艺术和珍贵的历史遗迹吸引了众多游客前来参观；白马寺则是中国佛教历史名刹之一，这里有浓郁的佛教文化氛围和神秘的历史背景；云龙湖则是一个集观光、休闲、度假于一体的综合性湖泊景区，这里可以欣赏到美丽的湖景、野生动植物和各种娱乐设施。
</p>
</div>
</div>
</div>
<!-- 页面尾部 -->
<div class="end">
<p class="p1">快乐旅游网</p>
<p class="p1">QQ：1339759314 微信：18863248969</p>
</div>
</body>
</html>二、滚动图js部分
// 景点底部流动图js样式
//获取ul元素，并为其追加一组相同的图片（为了做到无缝衔接）
let ul=document.querySelector('ul');
ul.innerHTML=ul.innerHTML+ul.innerHTML;
// 获取所有的li元素和.btn元素
let lis=document.querySelectorAll('.di-01');
let btns=document.querySelectorAll('.btn');
//每次滚动的跨度（正数向右，负数向左，默认左滚动
let spa=-2;
//计算并设置ul的总宽度
ul.style.width=lis[0].offsetWidth*lis.length+'px';
//滚动函数
function move(){
if(ul.offsetLeft < -ul.offsetWidth/2){
//向左走时，判断图片是否走完（这里本来4张图片，加上后面追加的4张相同的，共有8张，所以需要用ul总数除以2）走完时重新开始
ul.style.left='0';
}
if(ul.offsetLeft > 0){
//向右走时，判断图片是否走完
ul.style.left=-ul.offsetWidth/2+'px';
}
//设置偏移位置
ul.style.left=ul.offsetLeft+spa+'px';
}
//定时器，每30毫秒执行一次move函数
let timer=setInterval(move,30);
//为ul绑定事件，悬停停止，移开滚动
ul.addEventListener('mousemove',function(){
clearInterval(timer);
})
ul.addEventListener('mouseout',function(){
timer=setInterval(move,30);
})
//为两个按钮绑定事件
//向左走
btns[0].addEventListener('click',function(){
spa=-2;
})
//向右走
btns[1].addEventListener('click',function(){
spa=2;
})展示部分源代码，完整代码包可通过博主主页发布的资源获取。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
