网页设计作业 旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
2024-05-08 01:06:00
HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
文章目录
- HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
- 一、作品展示
- 二、文件目录
- 三、代码实现
一、作品展示
二、文件目录
三、代码实现
<!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()});//bannervar nowing = 0 var $imglis = $(".banner .list0 li")var $fadeCover = $(".fadeCover")var fadeIntime = 500var fadeOutime = 800var $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">1</li><li>2</li><li>3</li></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号 京公网安备110105007294</p>
</div>
<!-- topback --></body>
</html>网页设计作业 旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品相关推荐
- HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
HTML5期末大作业:旅游网站网站设计--绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠 ...
- HTML5期末大作业：奶茶网站设计——带音乐图片滚动奶茶(6页) 美食网页设计作业 简单大学生静态HTML网页作品
HTML5期末大作业:奶茶网站设计--带音乐图片滚动奶茶(6页) 美食网页设计作业 简单大学生静态HTML网页作品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器 ...
- HTML+CSS+JS期末大作业：奶茶网站设计——带音乐图片滚动奶茶(6页) 美食网页设计作业 简单大学生静态HTML网页作品 (1)
HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html PUBLIC " ...
- web网页设计实例作业 ——带音乐图片滚动奶茶(6页) 美食网页设计作业 简单大学生静态HTML网页作品
HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 四.获取更多源码 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html PUBL ...
- HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人 ...
- HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 ...
- HTML+CSS静态页面网页设计作业——布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：布偶猫网站设计——布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:食品超市网站设计--食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个 ...
最新文章
- 运动目标跟踪__kalman
- Session 'app': Error Installing APK
- 前端学习（693）：for循环案例之求出偶数奇数之和
- CNI portmap插件实现源码分析
- 2020.xilinx开发环境
- 马斯克：电动皮卡Cybertruck尺寸在短时间内不会变小
- msfconsole启动失败并报错`not_after=‘: bignum too big to convert into `long‘的解决方法
- html国庆节代码,QQ空间国庆节留言代码_祝大家国庆节快乐
- qt 分贝毫瓦 dBm 与 功率 W 相互转换
- 直观理解深度学习中的反卷积、导向反向传播
- java deflate_Java实现deflate算法的压缩和解压
- php 恶意上传,如何防止恶意文件上传到我的服务器上？（检查文件类型）？
- 让你永远忘不了的傅里叶变换解析
- 洛谷 P2404 自然数的拆分问题
- Python OpenCV 横向平铺图像制作长图
- inet_pton和inet_ntop函数的使用
- java基于eclipse.swt实现内嵌浏览器
- 计算机基础模拟试卷1,大学计算机基础模拟试卷1—5
- Leetcode(1)——数组、栈、队列
- linux安装Lua及代码测试