目录
欢迎来到我的优快云主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型:
一、网页概述
本实例是个响应式旅游网页，应用html+css+js，适用于旅游网页、大学生网页课程作业设计，供大家参考。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.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">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<title>Document</title>
</head>
<body>
<!-- 顶部 -->
<header>
<div>
<a href="http://www.huanqiu.com" class="huanqiu">环球网
</a>
<a href="register.html" class="sign">注册</a>
<a href="login.html" class="login">登录</a>
</div>
</header>
<!-- 导航栏 -->
<div class="mod">
<div class="main22">
<ul>
<li><a class="shouye" href="index.html">首页</a></li>
<li><a href="出游.html">出游</a></li>
<li><a href="">环游号</a></li>
<li><a href="旅游视觉.html">旅游视觉</a></li>
<li><a href="爱这城.html">爱这城</a></li>
<li><a href="特色小镇.html">特色小镇</a></li>
<li><a href="传统村落.html">传统村落</a></li>
<li><a href="攻略.html">攻略</a></li>
<li><a href="房车.html">房车</a></li>
</ul>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" class="search_text" />
</form>
</div>
</div>
</div>
<div class="cover">
<div id="julvSlideshow">
<ul id="showUl">
<li><img src="images/cover_05.jpg"></li>
<li><img src="images/cover_01.png"></li>
<li><img src="images/cover_02.jpg"></li>
<li><img src="images/cover_03.jpg"></li>
<li><img src="images/cover_04.jpg"></li>
<li><img src="images/cover_05.jpg"></li>
</ul>
<div id="arrow1"><</div>
<div id="arrow2">></div>
<ul id="showUllist">
<li><a class="active" href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<script>
//轮播图效果
var num = 0;
function G(id){
return document.getElementById(id)
}
arrA = G("showUllist").getElementsByTagName('a')
G("arrow2").onclick = function(){
if(num<3){
num = num + 1;
}else{
num = 0;
}
console.log(num)
var ml = num * -1000 + "px";
G("showUl").style.marginLeft = ml;
for(var i = 0;i < arrA.length;i++){
arrA[i].style.backgroundColor = "#1270d8";
}
arrA[num].style.backgroundColor = "red";
}
G("arrow1").onclick = function(){
if(num>0){
num = num - 1;
}else{
num = 3;
}
console.log(num);
var ml1 = num * -1000 + "px";
G("showUl").style.marginLeft = ml1;
for(var i = 0;i < arrA.length;i++){
arrA[i].style.backgroundColor = "#1270d8";
}
arrA[num].style.backgroundColor = "red";
}
for(var i = 0;i < arrA.length;i++){
arrA[i].index = i;
arrA[i].onclick = function(){
var ind = this.index;
num = ind;
var ml3 = num * -1000 + "px";
G("showUl").style.marginLeft = ml3;
for(var i = 0;i < arrA.length;i++){
arrA[i].style.backgroundColor = "#1270d8";
}
arrA[num].style.backgroundColor = "red";
}
}
function lunbo(){
if(num<3){
num+=1;
}else{
num=0;
}
var ml4 = num * -1000 + "px";
G("showUl").style.marginLeft = ml4;
console.log(ml4)
for(var i = 0;i < arrA.length;i++){
arrA[i].style.backgroundColor = "#1270d8";
}
arrA[num].style.backgroundColor = "red";
}
var stop = setInterval(lunbo,2000);
G("showUl").onmouseenter = function(){
clearInterval(stop)
}
G("showUl").onmouseleave = function(){
stop = setInterval(lunbo,2000)
}
</script>
<!-- 内容部分 -->
<div class="rowAll">
<div class="row">
<ul class="information">
<div class="infor_header">
<img src="images/icon_go.png">
<h2 class="hd">新闻</h2>
<ul class="ul_tabs">
<li id="li_one"><a href="#tab1">出游</a></li>
<li><a href="#tab2">酒店</a></li>
<li><a href="#tab3">航空</a></li>
<li><a href="#tab4">业内</a></li>
<li><a href="#tab5">全局旅游</a></li>
<li><a href="#tab6">厕所革命</a></li>
<li><a href="#tab7">旅游扶贫</a></li>
</ul>
</div>
<div class="tabBox">
<ul id="tab1" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab1_img01.jpg"></div>
<div class="txt_bot">
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab1_img02.jpg"></div>
<div class="txt_bot">
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
<ul id="tab2" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab2_img01.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab2-img02.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
<ul id="tab3" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab3-img01.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab3-img02.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
<ul id="tab4" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab4-img01.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab4-img02.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
<ul id="tab5" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab5-img01.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab5-img02.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
<ul id="tab6" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab6-img01.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab6-img02.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
<ul id="tab7" class="tab_content">
<li class="txtItem1">
<div><img src="images/tab7-img01.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem2">
<div>
<h3>埃及新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
<li class="txtItem3">
<div><img src="images/tab7-img02.jpg"></div>
<div class="txt_bot">
<h3>新开放两座金字塔</h3>
<p style="font-size: 14px">
近日，埃及宣布向游客开放有着4600年历史的弯曲金字塔。据悉，弯曲金字塔位于开罗以南，是为古埃及第四王朝法老萨夫罗建造的，
高101米，由于从底座至顶部存在两个不同坡度，因而被称为弯曲金字塔。
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="editor">
<h2 class="hd_bang">
<ul class="ul_bang">
<li><a href="#shoufengqing_tab1">红榜</a></li>
<li><a href="#shoufengqing_tab2">黑榜</a></li>
</ul>
</h2>
<div class="shoufengqing_tabBox">
<div id="shoufengqing_tab1" class="shoufengqing_tab">
<div><img src="images/hd_bang_img01.jpg" style="display: block"><p class="shoufengqing_p">滨海湿地自然遗产“金招牌”</p></div>
<div><img src="images/hd_bang_img02.jpg"><p class="shoufengqing_p">1-5月吐鲁番共接待游客645万人</p></div>
<div><img src="images/hd_bang_img03.jpg"><p class="shoufengqing_p">“风花雪月”的大理更迷人</p></div>
<div><img src="images/hd_bang_img04.jpg"><p class="shoufengqing_p">老牌景区的“速度与激情”</p></div>
<div><img src="images/hd_bang_img05.jpg"><p class="shoufengqing_p">旅游季节 河北承德突出生态保护</p></div>
</div>
<div id="shoufengqing_tab2" class="shoufengqing_tab">
<div><img src="images/hd_bang_img01.jpg" style="display: block"><p class="shoufengqing_p">滨海湿地自然遗产“金招牌”</p></div>
<div><img src="images/hd_bang_img02.jpg"><p class="shoufengqing_p">1-5月吐鲁番共接待游客645万人</p></div>
<div><img src="images/hd_bang_img03.jpg"><p class="shoufengqing_p">“风花雪月”的大理更迷人</p></div>
<div><img src="images/hd_bang_img04.jpg"><p class="shoufengqing_p">老牌景区的“速度与激情”</p></div>
<div><img src="images/hd_bang_img05.jpg"><p class="shoufengqing_p">旅游季节 河北承德突出生态保护</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="lib/jquery-3.4.1.js"></script>
<script>
// tab选项卡
$('document').ready(function(){
$(".tab_content").hide(); //Hide all content
$('#tab1').show();
$(".ul_tabs li:first").addClass("li_one").show(); //Activate first tab
$(".tabBox:first").show(); //Show first tab content
//On Click Event
$(".ul_tabs li").mouseenter(function() {
$("ul_tabs li").removeClass("li_one"); //Remove any "active" class
$(this).addClass("li_one"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
})
//tab选项卡加第一个手风琴
$('#shoufengqing_tab1>div').hover(function(){
$(this).find('img').show().parent().siblings().find('img').hide()
})
//tab选项卡加第二个手风琴
$('#shoufengqing_tab2>div').hover(function(){
$(this).find('img').show().parent().siblings().find('img').hide()
})
</script>
<IFRAME width=100% height=2600px SRC="第二模块.html" scrolling="no" frameborder="no"></IFRAME>
<div class="xia">
<div class="advert">
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=1556680960,3586424676&fm=76">
<div class="heikuang">设计公司宣传册</div>
</div>
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=3966401569,4072361264&fm=76">
<div class="heikuang">Phthon求职</div>
</div>
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=3293615275,3501984461&fm=76">
<div class="heikuang">测试你多重人格</div>
</div>
<div class="content">
<img class="img"
src="https://paimgcdn.baidu.com/huitu/v.B1A1DD43AC5ECEF35C2B09471EEF45E6?enc=gbk&img=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2Ft11.baidu.com%2Fit%2Fu%3D759311479%2C3852178776%26fm%3D76&tpl=sbb%2Fhuitu%2F2734_0.zip&second=%C9%CF%F1%AB%A3%A1%B8%F9%B1%BE%CD%A3%B2%BB%CF%C2%C0%B4%A3%A1&_rz=700x394&first=%B2%E9%BF%B4%CF%EA%C7%E9">
<div class="heikuang">灭神</div>
</div>
<div class="content">
<img class="img" src="http://t10.baidu.com/it/u=2793385842,2693122789&fm=76">
<div class="heikuang">Phthon招聘</div>
</div>
<div class="content">
<img class="img" src="http://t10.baidu.com/it/u=163794735,2023436622&fm=76">
<div class="heikuang">民宿短租</div>
</div>
<div class="content">
<img class="img" src="http://f11.baidu.com/it/u=656305057,3808546603&fm=76">
<div class="heikuang">一套vi设计</div>
</div>
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=4223602408,1477843916&fm=76">
<div class="heikuang">办公室装修</div>
</div>
<div class="content">
<img class="img" src="http://t12.baidu.com/it/u=3031202642,4235471916&fm=76">
<div class="heikuang">民宿</div>
</div>
</div>
<div class="news">
<div class="news_left">
<div class="hh">
<img src="images/shu.png">
<h2>攻略玩法</h2>
<div class="more">
<a title="更多"><img src="images/more.png"></a>
</div>
</div>
<div class="news_left_content">
<a title="指南 | 想去欧洲怕人多 去这6个避世好地就行了" class="link"
href="http://go.huanqiu.com/news/tour/2019-07/15075481.html?agt=16361" target="_blank">
<img alt="" src="images/news_left1.jpg">
<div class="news_left_text">
<h3>指南 | 想去欧洲怕人多 去这6个避世好地就行了</h3>
<p>蒂诺斯岛。照片里的夕阳景致可谓静谧而美好，但镜头外成百上千汗流浃背的游客正挤在狭窄的街道上，踮起脚尖伸长双臂希望定格下美好瞬间</p>
</div>
</a>
</div>
<div class="news_left_content">
<a title="从加德满都到博卡拉，感受尼泊尔的“野趣” " class="link"
href="http://go.huanqiu.com/guide/2019-07/15075432.html?agt=16361" target="_blank">
<img alt="" src="images/news_left2.jpg">
<div class="news_left_text">
<h3>从加德满都到博卡拉，感受尼泊尔的“野趣” </h3>
<p>从加德满都到博卡拉，感受尼泊尔的“野趣”。每天，广场北侧的一座巨大的黑贝拉伯前的信徒络绎不绝，那是湿婆神化身之一的恐怖之神</p>
</div>
</a>
</div>
<div class="news_left_content">
<a title="3日文化之旅 了解神秘若羌" class="link"
href="http://go.huanqiu.com/guide/2019-06/15040322.html?agt=16361" target="_blank">
<img alt="" src="images/news_left3.jpg">
<div class="news_left_text">
<h3>3日文化之旅 了解神秘若羌</h3>
<p>除了神秘的古城，这里还有冰川，沙漠，湖泊，草原和自然保护区。它是中国行政面积最大的县，与青海、西藏、甘肃相邻，自古以来就是内地通往中亚地区的交通要道</p>
</div>
</a>
</div>
<div class="news_left_content">
<a title="指南丨 从“地狱”到“天堂” 新疆这些地方此生必去" class="link"
href="http://go.huanqiu.com/guide/2019-06/15008623.html?agt=16361" target="_blank">
<img alt="" src="images/news_left4.jpg">
<div class="news_left_text">
<h3>指南丨 从“地狱”到“天堂”新疆这些地方必去</h3>
<p>从“地狱”到“天堂”。新疆这些地方此生必去转眼已经是六月，一个完美的夏天，总是和一场一往无前的旅行联系在一起</p>
</div>
</a>
</div>
<div class="news_left_content">
<a title="浙中有个“悬崖村”，藏在海拔800多米的深山中，是绝美的天空之城！" class="link"
href="http://go.huanqiu.com/news/tour/2019-06/14970202.html?agt=16361" target="_blank">
<img alt="" src="images/news_left5.jpg.gif">
<div class="news_left_text">
<h3>浙中有个“悬崖村”，藏在海拔800多米的深山中</h3>
<p>宫崎骏笔下的天空之城，是一座云雾缭绕的空中悬浮城市，坐落于云端之上，与云雾为邻，与世无争。而在金华磐安方前镇的大山深处，就隐匿着这样一座天空之城</p>
</div>
</a>
</div>
</div>
<div class="news_right_content1">
<div class="hh">
<img src="images/xiang.png">
<h2>房车营地</h2>
<div class="more">
<a title="更多"><img src="images/more.png"></a>
</div>
</div>
<div class="news_right_img">
<a title="长假将至 外出自驾应该带哪些食品" class="link"
href="http://go.huanqiu.com/camper/2017-09/11494685.html?agt=16361" target="_blank">
<img width="300" height="185" src="images/news_right1.jpg">
<p>长假将至 外出自驾应该带哪些食品</p>
</a>
</div>
<div class="show">
<a title="秋冬自驾青海别有格调" class="link"
href="http://go.huanqiu.com/camper/2017-11/11494684.html?agt=16361" target="_blank">
<p>秋冬自驾青海别有格调</p>
</a>
</div>
<div class="show">
<a title="越来越多中国游客在澳自驾上路" class="link"
href="http://go.huanqiu.com/camper/2018-01/11494683.html?agt=16361" target="_blank">
<p>越来越多中国游客在澳自驾上路</p>
</a>
</div>
<div class="show">
<a title="冬奥经济推动北京房车旅游" class="link"
href="http://go.huanqiu.com/camper/2017-09/11288614.html?agt=16361" target="_blank">
<p>冬奥经济推动北京房车旅游</p>
</a>
</div>
<div class="show">
<a title="拒绝朝九晚五 澳大学毕业生开启“房车生活”" class="link"
href="http://go.huanqiu.com/camper/2017-09/11222967.html?agt=16361" target="_blank">
<p>拒绝朝九晚五 澳大学毕业生开启房车</p>
</a>
</div>
</div>
<div class="news_right_content2">
<div class="hh">
<img src="images/xiang.png">
<h2>海外置业</h2>
<div class="more">
<a title="更多"><img src="images/more.png"></a>
</div>
</div>
<div class="news_right_img">
<a title="业内丨日本民宿中国房东的挑战 潜力仍大 赚钱不再轻松" class="link"
href="http://go.huanqiu.com/camper/2017-09/11494685.html?agt=16361" target="_blank">
<img width="300" height="185" src="images/news_right2.jpg">
<p>业内丨日本民宿中国房东的挑战 潜力仍大 赚钱不再轻松</p>
</a>
</div>
<div class="show">
<a title="内地到港新移民 十年减5万" class="link"
href="http://go.huanqiu.com/overseas-property/2018-01/11518025.html?agt=16361" target="_blank">
<p>内地到港新移民 十年减5万</p>
</a>
</div>
<div class="show">
<a title="德国护照全球最“牛”" class="link"
href="http://go.huanqiu.com/overseas-property/2018-01/11514445.html?agt=16361" target="_blank">
<p>德国护照全球最“牛”</p>
</a>
</div>
<div class="show">
<a title="探险、表演、展览，墓地经济在澳火热" class="link"
href="http://go.huanqiu.com/overseas-property/2018-01/11492935.html?agt=16361" target="_blank">
<p>探险、表演、展览，墓地经济在澳火热</p>
</a>
</div>
<div class="show">
<a title="在奥投资最大难题是居留许可" class="link"
href="http://go.huanqiu.com/overseas-property/2018-01/11492915.html?agt=16361" target="_blank">
<p>在奥投资最大难题是居留许可</p>
</a>
</div>
</div>
</div>
<div class="hezuo">
<div class="hezuo_left">
<div class="hh">
<h2>合作伙伴</h2>
</div>
<div class="hezuo_left_content">
<a href="http://www.cnta.gov.cn/?agt=16361" target="_blank">文化和旅游部 </a>
<a href="http://whlyj.beijing.gov.cn/?agt=16361" target="_blank">北京市文化和旅游局 </a>
<a href="http://www.visitbeijing.com.cn/?agt=16361" target="_blank">北京旅游网 </a>
<a href="http://travel.people.com.cn/?agt=16361" target="_blank">人民网旅游 </a>
<a href="http://travel.news.cn/?agt=16361" target="_blank">新华网旅游 </a>
<a href="http://www.china.com.cn/travel/?agt=16361" target="_blank">中国网旅游<br></a>
<a href="http://travel.ce.cn/?agt=16361" target="_blank">中经网旅游 </a>
<a href="http://travel.qianlong.com/?agt=16361" target="_blank">千龙网旅游 </a>
<a href="http://travel.cnr.cn/?agt=16361" target="_blank">央广网旅游 </a>
<a href="http://tour.cyol.com/?agt=16361" target="_blank">中青在线旅游 </a>
<a href="http://travel.china.com/?agt=16361" target="_blank">中华网旅游 </a>
<a href="http://travel.sina.com.cn/?agt=16361" target="_blank">新浪旅游<br></a>
<a href="http://trip.elong.com/?agt=16361" target="_blank">艺龙旅游指南 </a>
<a href="http://www.ctcnn.com/?agt=16361" target="_blank">劲旅网 </a>
<a href="http://www.travellingscope.com/?agt=16361" target="_blank">《旅游天地》 </a>
<a href="http://www.zgcsb.com/?agt=16361" target="_blank">中国城市网</a>
</div>
</div>
<div class="hezuo_right">
<div class="hh">
<h2>关于我们</h2>
</div>
<div class="hezuo_right_content">
<h4> “环球旅游”是环球网旗下旅游服务平台，是集旅游资讯、行业动态、旅游资源库为一体的综合性中央级旅游网络媒体。</h4>
<p>电子邮箱：<a href="mailto:zongbianshi@huanqiu.com?agt=16361">zongbianshi@huanqiu.com</a></p>
<div class="hezuo_right_content_box">
<div class="box1">
<img alt="环球网旅游"
src="http://himg2.huanqiu.com/attachment2010/2017/0522/13/32/20170522013224399.jpg">
<p><strong>环球网旅游</strong>微信公众号</p>
</div>
<div class="box2">专注权威深度旅游传播价值的第一中央级旅行媒体。至真之美，世界在眼前。</div>
</div>
</div>
</div>
</div>
<div class="advert">
<div class="advert">
<div class="content">
<img class="img" src="http://f12.baidu.com/it/u=2011656815,2881623509&fm=76">
<div class="heikuang">云虚拟主机</div>
</div>
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=3966401569,4072361264&fm=76">
<div class="heikuang">Phthon求职</div>
</div>
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=3293615275,3501984461&fm=76">
<div class="heikuang">测试你多重人格</div>
</div>
<div class="content">
<img class="img"
src="https://paimgcdn.baidu.com/huitu/v.B1A1DD43AC5ECEF35C2B09471EEF45E6?enc=gbk&img=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2Ft11.baidu.com%2Fit%2Fu%3D759311479%2C3852178776%26fm%3D76&tpl=sbb%2Fhuitu%2F2734_0.zip&second=%C9%CF%F1%AB%A3%A1%B8%F9%B1%BE%CD%A3%B2%BB%CF%C2%C0%B4%A3%A1&_rz=700x394&first=%B2%E9%BF%B4%CF%EA%C7%E9">
<div class="heikuang">灭神</div>
</div>
<div class="content">
<img class="img" src="http://t10.baidu.com/it/u=2793385842,2693122789&fm=76">
<div class="heikuang">Phthon招聘</div>
</div>
<div class="content">
<img class="img" src="http://t10.baidu.com/it/u=163794735,2023436622&fm=76">
<div class="heikuang">民宿短租</div>
</div>
<div class="content">
<img class="img" src="http://f11.baidu.com/it/u=656305057,3808546603&fm=76">
<div class="heikuang">一套vi设计</div>
</div>
<div class="content">
<img class="img" src="http://t11.baidu.com/it/u=4223602408,1477843916&fm=76">
<div class="heikuang">办公室装修</div>
</div>
<div class="content">
<img class="img" src="http://t12.baidu.com/it/u=1825496240,415754158&fm=76">
<div class="heikuang">网站建设</div>
</div>
</div>
</div>
</div>
<IFRAME width=100% SRC="底部.html" scrolling="no" frameborder="no"></IFRAME>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
*{
margin: 0;
padding: 0;
}
a:hover{
text-decoration: underline;
}
a{
text-decoration: none;
}
.publicHeader{
height: 70px;
/* 盒子阴影 x轴偏移 y轴偏移 模糊值 颜色 */
box-shadow: 1px 1px 2px rgb(114, 114, 114);
margin-left: 0;
margin-right: 0;
}
.publicHeader .header{
margin: 0 auto;
width: 970px;
height: 70px;
line-height: 70px;
}
.publicHeader .header a.logo {
float: left;
width: 151px;
height: 70px;
background-image: url(../images/public_img_png24.png);
}
.publicHeader .header .pageTitle{
float: left;
height: 30px;
line-height: 30px;
font-size: 24px;
color: rgb(29, 25, 25);
padding: 20px 10px;
}
.publicHeader .header .pageTitle b{
font-weight: 400;
height: 30px;
border-left: solid #e2dfdf 1px;
display: block;
padding: 0 10px;
}
.publicHeader .header .loginBar{
float: right;
height: 30px;
line-height: 30px;
font-size: 16px;
color: rgb(78, 78, 78);
padding: 20px 10px;
}
.publicHeader .header .loginBar a{
text-decoration: none;
padding-right: 20px;
color: rgb(85, 10, 224);
}
.publicHeader .header .loginBar .gohome{
padding: 0 20px;
border-left: solid #e2dfdf 1px;
}
/* .loginWarp{
margin-left: 0;
margin-right: 0;
} */
.loginWarp .loginMain{
width: 970px;
margin: 0 auto;
height: 558px;
background: url(../images/loginMain_bg.png) left center no-repeat;
position: relative;
}
.loginWarp .loginMain .login{
width: 398px;
height: 438px;
position: absolute;
left: 568px;
top: 60px;
/* overflow: hidden; */
}
.loginWarp .loginMain .login span.title {
display: block;
height: 58px;
line-height: 91px;
overflow: hidden;
text-indent: 38px;
font-size: 22px;
color: #333;
}
.loginWarp .loginMain .login em.loginError {
display: block;
height: 34px;
line-height: 30px;
text-indent: 38px;
color: red;
font-style: normal;
}
.loginWarp .loginMain .login span.userEmail {
display: block;
height: 60px;
padding-left: 76px;
overflow: hidden;
}
.loginWarp .loginMain .login span.userEmail input{
border: none;
background: #fff;
width: 276px;
height: 16px;
line-height: 16px;
padding: 11px 3px 9px;
}
.loginWarp .loginMain .login span.userPassword {
display: block;
height: 60px;
padding-left: 76px;
overflow: hidden;
}
.loginWarp .loginMain .login span.userPassword input {
display: block;
border: none;
background: #fff;
width: 276px;
height: 16px;
line-height: 16px;
padding: 11px 3px 9px;
}
.loginWarp .loginMain .login span.loginVerify {
display: block;
max-height: 40px;
min-height: 10px;
margin: 5px 39px 8px;
overflow: hidden;
}
.loginWarp .loginMain .login .remmber {
height: 20px;
line-height: 20px;
padding-left: 36px;
}
.loginWarp .loginMain .login .remmber input{
margin-right: 6;
}
.loginWarp .loginMain .login .remmber .forget{
padding-right: 20px;
float: right;
}
.loginWarp .loginMain .login .remmber .forget a{
padding: 0 10px;
/* text-decoration: none; */
}
.loginWarp .loginMain .login .remmber .forget a:nth-last-of-type(1){
color: rgb(94, 86, 86);
}
.loginWarp .loginMain .login .loginBtn {
padding-top: 16px;
display: block;
}
.loginWarp .loginMain .login .loginBtn input {
display: block;
width: 320px;
height: 40px;
margin: 0 auto;
border-radius: 5px;
border: none;
font-size: 18px;
background: #007ed7;
color: #fff;
text-align: center;
}
.loginWarp .loginMain .login .otherLogin span{
font-size: 15px;
margin: 0;
padding: 0;
}
.loginWarp .loginMain .login .otherLogin img{
padding-left: 10px;
}
.Button {
height: 98px;
padding-top: 18px;
}
.footer {
width: 970px;
margin: 0 auto;
text-align: center;
overflow: hidden;
height: 26px;
line-height: 34px;
font-size: 12px;
}
.footer b {
color: #919191;
}
.footer a {
text-decoration: none;
color: #919191;
padding: 0 5px;
}
.copyright{
width: 970px;
margin: 0 auto;
text-align: center;
overflow: hidden;
color: #919191;
height: 26px;
line-height: 34px;
font-size: 12px;
}
......
3.JS
代码如下（节选示例）：
( function( global, factory ) {
"use strict";
if ( typeof module === "object" && typeof module.exports === "object" ) {
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
"use strict";
var arr = [];
var document = window.document;
var getProto = Object.getPrototypeOf;
var slice = arr.slice;
var concat = arr.concat;
var push = arr.push;
var indexOf = arr.indexOf;
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );
var support = {};
var isFunction = function isFunction( obj ) {
return typeof obj === "function" && typeof obj.nodeType !== "number";
};
var isWindow = function isWindow( obj ) {
return obj != null && obj === obj.window;
};
var preservedScriptAttributes = {
type: true,
src: true,
nonce: true,
noModule: true
};
function DOMEval( code, node, doc ) {
doc = doc || document;
var i, val,
script = doc.createElement( "script" );
script.text = code;
if ( node ) {
for ( i in preservedScriptAttributes ) {
val = node[ i ] || node.getAttribute && node.getAttribute( i );
if ( val ) {
script.setAttribute( i, val );
}
}
}
doc.head.appendChild( script ).parentNode.removeChild( script );
}
function toType( obj ) {
if ( obj == null ) {
return obj + "";
}
......
五、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
