网页设计作业 旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
发布时间：2023-10-31 18:30
HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
文章目录
- HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
- 一、作品展示
- 二、文件目录
- 三、代码实现
一、作品展示
![\"网页设计作业](\"https://img.it610.com/image/info8/427e7bc64f914febba592126b2d037be.jpg\")
二、文件目录
![\"网页设计作业](\"https://img.it610.com/image/info8/f2d3c3c9eda845849ddd84d26c8aeb1f.jpg\")
三、代码实现
doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title>随行网，随心而行，随意而留title>
<link rel=\"shortcut icon\" href=\"bitbug_favicon.ico\"/>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/global.css\" />
<script type=\"text/javascript\" src=\"jquery-1.7.2.min.js\">script>
<script type=\"text/javascript\">
$(function(){
// 导航
$(\".nav>ul>li\").mouseenter(function(event) {
$(this).addClass(\"cur\").siblings().removeClass(\"cur\")
$(this).children(\".yincang\").stop().slideDown()
});
$(\".nav>ul>li\").mouseleave(function(event) {
$(this).removeClass(\"cur\")
$(this).children(\".yincang\").stop().slideUp()
});
// tejia
$(\".tejia .wenzi span\").mouseenter(function(event) {
$(this).addClass(\"cur\").siblings().removeClass(\"cur\")
});
// 品牌目的地
$(\".pinpai_inr ul li\").mouseenter(function(event) {
$(this).addClass(\"cur\").siblings().removeClass(\"cur\")
});
$(\".pinpai_inr ul li\").mouseleave(function(event) {
$(\".pinpai_inr ul li\").removeClass(\"cur\")
});
//
$(\".tututu\").mouseenter(function(event) {
$(this).children(\".heibu\").stop().slideDown()
});
$(\".tututu\").mouseleave(function(event) {
$(this).children(\".heibu\").stop().slideUp()
});
//banner
var nowing = 0
var $imglis = $(\".banner .list0 li\")
var $fadeCover = $(\".fadeCover\")
var fadeIntime = 500
var fadeOutime = 800
var $circle = $(\".circle li\")
var timer
// 定义函数
function rightbtn(){
// 先信号量的改变，
nowing++
if(nowing>$imglis.length-1){
nowing=0
}
// 再调用函数
dong();
}
// 定时器业务
timer = setInterval(rightbtn,2000)
$(\".banner\").mouseenter(function(){
clearInterval(timer)
})
$(\".banner\").mouseleave(function(){
clearInterval(timer)
timer = setInterval(rightbtn,2000)
})
// 点击小圆点业务
$circle.click(function(){
nowing = $(this).index()
dong()
})
function dong(){
// 先让fadecover淡入，让全局变白
$fadeCover.fadeIn(fadeIntime,function(){
// ,function(){
// 回调函数中，就表示fadecover淡入后做的事情。
// 换图是干蹦的，不是淡入淡出的换,进行暗箱操作，兄弟去cur，自己加cur
$imglis.eq(nowing).addClass(\'cur\').siblings().removeClass(\'cur\')
// 淡出让黑布小事
$(this).fadeOut(fadeOutime)
})
$circle.eq(nowing).addClass(\"cur\").siblings().removeClass(\"cur\")
}
})
script>
head>
<body>
<div class=\"header1\">
<div class=\"header1-in\">
<div class=\"logo\">
<a href=\"#\"><img src=\"img/logo.jpg\" alt=\"说行就行，随行\" />a>
div>
<div class=\"search\">
<div class=\"search-left\">搜索目的地div>
<div class=\"search-center\">
<input type=\"text\" class=\"tex1\" placeholder=\"邂逅慵懒的小时光\" />
div>
<div class=\"search-right\">div>
div>
<div class=\"zuce\">
<a href=\"#\">登录|注册a>
<a href=\"#\">语言（简体中文）a>
div>
div>
div>
<div class=\"nav\">
<ul class=\"ul1\">
<li class=\"level1 cur first\"><a class=\"a1\" href=\"#\">首页a>li>
<li class=\"level1\"><a class=\"a1\" href=\"\">目的地a>
<ul class=\"yincang\">
<li><a href=\"#\">境内游a>li>
<li><a href=\"#\">境外游a>li>
<li><a href=\"#\">周边游a>li>
ul>
li>
<li class=\"level1\"><a class=\"a1\" href=\"#\">发现a>
<ul class=\"yincang\">
<li><a href=\"#\">美景a>li>
<li><a href=\"#\">美食a>li>
<li><a href=\"#\">美女a>li>
ul>
li>
<li class=\"level1\"><a class=\"a1\" href=\"#\">社区a>li>
<li class=\"level1\"><a class=\"a1\" href=\"#\">自驾a>
li>
<li class=\"level1\"><a class=\"a1\" href=\"#\">预定a>
<ul class=\"yincang\">
<li><a href=\"#\">酒店a>li>
<li><a href=\"#\">机票a>li>
<li><a href=\"#\">地接a>li>
ul>
li>
ul>
div>
<div class=\"banner\">
<ul class=\"list0\">
<li class=\"cur\"><a href=\"#\"><img src=\"img/bg-1.jpg\" alt=\"\" />a>li>
<li><a href=\"#\"><img src=\"img/bg-2.jpg\" alt=\"\" />a>li>
<li><a href=\"#\"><img src=\"img/bg-3.jpg\" alt=\"\" />a>li>
ul>
<div class=\"fadeCover\">div>
<ul class=\"circle\">
<li class=\"cur\">1li>
<li>2li>
<li>3li>
ul>
div>
<div class=\"cl\">div>
<div class=\"hot\">
<div class=\"new\">最新点评
<span>span>
div>
<div class=\"main\">
<ul>
<li class=\"cur\">马尔代夫真的太美了，下次还要再去！li>
<li>丽江之美，美及天下li>
<li>做一个没有故事的人,与我一起游世界。li>
<li>转机的时候还能在新加坡机场免税店购物,li>
ul>
div>
<script type=\"text/javascript\" src=\"js/hot.js\">script>
<div class=\"manyidu\">满意度：
<span>100%span>
div>
<div class=\"comeon\">即刻出发
<span>span>
div>
div>
<div class=\"cl\">div>
<div class=\"tejia\">
<p class=\"wenzi\">
<span class=\"cur\">每日特价span>
<span>特价机票span>
p>
<p class=\"sanjiao\">p>
<p class=\"more\"><a href=\"#\">更多>>a>p>
div>
<div class=\"youhuitu\">
<ul>
<li><img src=\"img/te01.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">迪拜帆船游超值特惠div>
<div class=\"xiangxi\">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。div>
div>
li>
<li><img src=\"img/te02.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">澳洲三城游超值特惠div>
<div class=\"xiangxi\">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头div>
div>
li>
<li><img src=\"img/te03.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">亚德里亚海超值特惠div>
<div class=\"xiangxi\">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。div>
div>
li>
<li><img src=\"img/te04.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">美国自由行超值特惠div>
<div class=\"xiangxi\">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包div>
div>
li>
ul>
div>
<div class=\"youhuitu\">
<ul>
<li><img src=\"img/te05.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">迪拜帆船游超值特惠div>
<div class=\"xiangxi\">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。div>
div>
li>
<li><img src=\"img/te06.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">澳洲三城游超值特惠div>
<div class=\"xiangxi\">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头div>
div>
li>
<li><img src=\"img/te07.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">亚德里亚海超值特惠div>
<div class=\"xiangxi\">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。div>
div>
li>
<li><img src=\"img/te08.jpg\" alt=\"\" />
<div class=\"youhuitu-in\">
<div class=\"youhuitu-inl\"> 优惠div>
<div class=\"youhuitu-inr\">美国自由行超值特惠div>
<div class=\"xiangxi\">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包div>
div>
li>
ul>
div>
<div class=\"yaotiao\">
<img src=\"img/yaotiao.jpg\" alt=\"\" />
div>
<div class=\"pinpai\">
<p class=\"wenzi\">
品牌目的地
p>
<p class=\"more\"><a href=\"#\">更多>>a>p>
div>
<div class=\"pinpai_in\">
<div class=\"pinpai_inl\">
<img src=\"img/pinpai_left.png\" alt=\"\" />
<div class=\"pinpai_inlin\">
div>
<span class=\"pinpai_inl_span1\">马尔代夫超值连线游span>
<span class=\"pinpai_inl_span2\">让你一次游个够，心动不如行动吧！span>
div>
<div class=\"pinpai_inr\">
<ul>
<li class=\"cur\"><img src=\"img/fuzhou.jpg\" alt=\"\" />
<span >span>
<p>福州p>
li>
<li><img src=\"img/libo.jpg\" alt=\"\" />
<span>span>
<p>荔波p>
li>
<li><img src=\"img/malai.jpg\" alt=\"\" />
<span>span>
<p>马来西亚p>
li>
<li><img src=\"img/rongshui.jpg\" alt=\"\" />
<span>span>
<p>融水p>
li>
<li><img src=\"img/shannan.jpg\" alt=\"\" />
<span>span>
<p>山南p>
li>
<li><img src=\"img/shilin.jpg\" alt=\"\" />
<span>span>
<p>石林p>
li>
<li><img src=\"img/shanqiu.jpg\" alt=\"\" />
<span>span>
<p>山丘p>
li>
<li><img src=\"img/xian.jpg\" alt=\"\" />
<span>span>
<p>西安p>
li>
ul>
div>
div>
<div class=\"pinpai\">
<p class=\"wenzi\">
出境游
p>
<p class=\"more\"><a href=\"#\">更多>>a>p>
div>
<div class=\"chujingyou\">
<div class=\"chujingyou-l\">
<ul>
<li class=\"li11 tututu\">
<img src=\"img/11.jpg\" alt=\"\" class=\"img11\" />
<span>怦然心动·吉之岛span>
<div class=\"heibu1 heibu\">心动吉之岛div>
li>
<li class=\"tututu\">
<img src=\"img/12.jpg\" alt=\"\" />
<span>第一缕阳光·斐然span>
<div class=\"heibu\">第一缕阳光div>
li>
<li class=\"tututu\">
<img src=\"img/13.jpg\" alt=\"\" />
<span>马尔代夫·度蜜月span>
<div class=\"heibu\">度蜜月div>
li>
<li class=\"li21 tututu\">
<img src=\"img/21.jpg\" alt=\"\" class=\"img21\" />
<span>欧冠·巴塞罗那 span>
<div class=\"heibu2 heibu\">巴塞罗那 div>
li>
<li class=\"tututu\">
<img src=\"img/22.jpg\" alt=\"\" />
<span>恋爱国度·巴黎span>
<div class=\"heibu\">恋爱国度div>
li>
<li class=\"tututu\">
<img src=\"img/23.jpg\" alt=\"\" />
<span> 执子之手·希腊span>
<div class=\"heibu\">执手希腊div>
li>
ul>
div>
<div class=\"chujingyou-r\">
<span>span>
<img src=\"img/cheshow.jpg\" alt=\"\" />
<div class=\"show\">
<ul>
<li><a href=\"#\">【游记】致青春之旅 锡勒草原a>li>
<li><a href=\"#\">【游记】自驾重庆武隆风景区a>li>
<li><a href=\"#\">【游记】无止境之征探索未历之美a>li>
<li><a href=\"#\">【游记】骏雅新派逛古都a>li>
<li><a href=\"#\">【游记】奥迪2015国际露营大会a>li>
ul>
div>
div>
div>
<div class=\"footer\">
<div class=\"navfoot\">
<ul>
<li><a href=\"#\">关于我们a>li>
<li><a href=\"#\">营销服务a>li>
<li><a href=\"#\">商家服务a>li>
<li><a href=\"#\">新手上路a>li>
<li><a href=\"#\">合作伙伴a>li>
<li><a href=\"#\">关注我们a>li>
ul>
div>
<div class=\"share\">
<span class=\"s1\">span>
<span class=\"s2\">span>
<span class=\"s3\">span>
<span class=\"s4\">span>
div>
<div class=\"cl\">div>
<p>版权所有©2015 FREE TRAVEL北京随行网有限公司p>
<p>京ICP备11011333号 京公网安备110105007294p>
div>
body>
html>
相关推荐
【Prometheus二次开发课程 】01 Prometheus简介 （学习笔记）
YOLOv4团队开源最新力作！1774fps、COCO最高精度，分别适合高低端GPU的YOLO
南京 | 内推 | 股权激励 | 外企 WLB |慧咨环球 | 混合办公 | 程序员招聘 | 行业领袖 扁平管理 可移民澳洲
[OpenCV实战]20 使用OpenCV实现基于增强相关系数最大化的图像对齐
Swig超详细入门教程（Java调用C/C++, CMake）——更新于2021.12
We’re sorry but （项目名称） doesn’t work properly without JavaScript enabled/Vue路由history模式跳转报错404--解决方案