网页设计作业 旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
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()
});
//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>