33. 响应式旅游网页 Web前端网页制作大学生期末大作业 html+css+js

最新推荐文章于 2024-10-09 20:10:15 发布

一只小小的眠羊

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量1.2k

点赞数 29

分类专栏：大学生期末大作业旅游文章标签：前端 html javascript css html5 css3 jquery

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/142736670

版权

大学生期末大作业同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

旅游

7 篇文章 0 订阅

订阅专栏

一、前言

本实例是个响应式旅游网页，应用html+css+js，适用于旅游网页、大学生网页课程作业设计，供大家参考。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；

本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<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">

......

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 + "";
   }

......