30.响应式汽车自驾游网页 Web前端网页制作大学生期末大作业 html+css+js

一只小小的眠羊

于 2024-10-06 23:51:43 发布

阅读量1.2k

点赞数 24

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

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

版权

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

167 篇文章 0 订阅

订阅专栏

旅游

22 篇文章 0 订阅

订阅专栏

一、前言

自适应响应式汽车自驾游网页设计实例，应用html+css+js，适用于旅游网站、大学生网页课程作业设计，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！

二、网页文件

三、网页效果

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

四、代码展示

1.HTML

代码如下（节选示例）：

//数字导航切换及自定义当前数字的class
   $('#change_3 .a_bigImg').soChange({
       thumbObj:'#change_3 .ul_change_a2 span',
       thumbNowClass:'on',//自定义导航对象当前class为on
       changeType:'slide',//定义对象切换方式为slide
       changeTime:4000//自定义切换时间为4000ms
   });

   $('#change_4 .a_bigImg').soChange({
       thumbObj:'#change_4 .ul_change_a2 span',
       thumbNowClass:'on',//自定义导航对象当前class为on
       changeTime:4000//自定义切换时间为4000ms
   });

   $('#change_5 .a_bigImg').soChange({
       thumbObj:'#change_5 .ul_change_a2 span',
       thumbNowClass:'on',//自定义导航对象当前class为on
       changeTime:4000//自定义切换时间为4000ms
   });




});

</script>
</head>
<body id="dhome">

<header id="header">
<div class="headbox">
<div class="headleft fl">
<div class="headlhy">会员：[<a href="#">登陆</a> / <a href="#">注册</a>]</div>
<div class="headwzlogo clear"><a href="index.html"><img src="img/topwzlogo.png"></a></div>
</div>

<div class="searchbox fr">
<div class="search">
<form action="" name="formsearch">
<input name="keyword" type="text" id="search-keyword" value="==请填入搜索的关键词==" class="searchinp fl" onFocus="if(value==defaultValue){value='';}" onBlur="if(!value){value=defaultValue;}">
<button type="submit" class="searchbut fl"></button>
</form>
</div>
</div>

</div>

<nav class="navbox clear">
<div class="navmain">
<div class="hlogo fl"><a href="index.html"><img src="img/logo.gif"></a></div>
<ul class="navlist fr">
<li id="m1"><a href="index.html">首页</a></li>
<li><a href="越野自驾游.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="#">会员服务</a></li>
<li><a href="加盟我们.html">加盟我们</a></li>
</ul>
</div>
</nav>

</header>

<section class="flashnavbox">
<div class="main_visual">
<div class="flicking_con">
<div class="flicking_inner">
</div>
</div>
<div class="main_image">
<ul>
<li><a href="#"><span style="background:url('img/indextop.jpg') no-repeat center top"></span></a></li>
</ul>
<a href="javascript:;" id="btn_prev"></a>
<a href="javascript:;" id="btn_next"></a>
</div>
</div>
</section>

<div id="mianboxbj">
<div class="blank35"></div>

<div class="dtitlebox dtitletp1"><img src="img/dtitle1.png" title="自驾游热门线路" alt="自驾游热门线路"></div>
<div class="blank20"></div>

<!--<div class="infiniteCarousel">
<div class="wrapper">
<ul class="imgscroll dzjypic">
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原1</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原2</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原3</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原4</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原5</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原6</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原7</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原8</a></h3>精彩视频--2015/9</div></li>

</ul>
</div>
</div>-->

</ul>
</div>
</div>

</div>

......

2.CSS

代码如下（节选示例）：

html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;font-size: 100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,table,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe {margin:0 auto;padding:0;}
body{background:#fff; line-height:24px;color:#666666; font-size:12px; font-family: "Microsoft YaHei"; -webkit-text-size-adjust:none; min-width:1000px;}
ul,li{ list-style:none;margin: 0; padding: 0;}
img{ border:0;}
samp{font-family: "Microsoft YaHei"; }
a{ text-decoration:none; color:#666666;}
a:hover{ text-decoration: underline; color:#996633;}
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}
.blank10{ line-height:10px; height:10px; clear:both; overflow:hidden;}
.blank15{ line-height:15px; height:15px; clear:both; overflow:hidden;}
.blank20{ line-height:20px; height:20px; clear:both; overflow:hidden;}
.blank30{ line-height:30px; height:30px; clear:both; overflow:hidden;}
.blank35{ line-height:35px; height:35px; clear:both; overflow:hidden;}
.blank40{ line-height:40px; height:40px; clear:both; overflow:hidden;}
.blank50{ line-height:50px; height:50px; clear:both; overflow:hidden;}
.cbody{width:1100px; margin:0 auto; overflow:hidden;}
#header{ height:192px; width:100%; overflow:hidden; z-index:1000; position:absolute;}
.headbox{ width:1100px; margin:0 auto; overflow:hidden; z-index:1000;}
.headleft{width:50%; height:110px; overflow:hidden; display:inline; margin:6px 0 0 28px;}
.headlhy{background:url(../img/tophylist.png) no-repeat center left; padding-left:15px; line-height:26px; color:#fff;}
.headlhy a{ color:#fff;}
.headlhy a:hover{ color:#b79e74;}
.headwzlogo{ margin:30px 0 0 12px;}

/* 搜索 */
.searchbox{background:url(../img/searchbox.png) no-repeat center left; width:410px; height:69px; margin:20px 0 0 15px;}
.search{ padding:35px 0 0 133px;}
.search .searchinp{ width:229px; height:32px; border:0px; font-size:12px; line-height:32px; padding-left:10px; background:url(); color:#fff;}
.search .searchbut{ background:url(); width:37px; height:32px;border:0px;cursor:pointer;}

/*=============== navbox ===============*/
.navbox{ background:#ffffff; height:76px; overflow:hidden; }
.navmain{width:1100px; height:76px; margin:0 auto; overflow:hidden;}
.hlogo{ width:216px; height:76px; overflow:hidden; display:inline;}
.navlist{ width:850px; z-index:100;}
.navlist li{ float: left; display:inline;height:70px;line-height:70px; font-size:16px; }
.navlist li a{ color:#666666; display:block; margin:0 15px;}
.navlist li a:hover{text-decoration:none;color:#b79e75; border-bottom:4px #b79e75 solid;}
.navlist span a,#dhome .navlist #m1 a,.navlist #m1 a:hover{color:#b79e75; border-bottom:4px #b79e75 solid;}

#mianboxbj{background:url(../img/mainbj.jpg) repeat-y center top;}

......

3.JS

代码如下（节选示例）：

j(document).ready(function () {
if (!j.cookie("DepartureCity")) {
depart_show();
}
//search();
j('#banner_pic a').hhSlide({ thumbObj: '#banner_chose a' });
j("#dest_list").hhScroll({ listChildObj: j("#dest_list a"), preObj: j("#dest_pre"), nextObj: j("#dest_next") });
j("#inte_list").hhScroll({ listChildObj: j("#inte_list a"), preObj: j("#inte_pre"), nextObj: j("#inte_next")});
});
function search() {
j(".pop_search").hide();
j(".banner_box .search input").focus(function () {
j(".pop_search").show();
});

j(".banner_box .search input").blur(function () {
j(".pop_search").hide();
});

j("#banner_box .search input").blur(function () {
j(".pop_search").hide();
});
}
(function ($) {
$.fn.extend({
hhSlide: function (o) {
o = $.extend({
thumbObj: null, //导航对象
botPrev: null, //按钮上一个
botNext: null, //按钮下一个
changeType: 'fade', //切换方式，可选：fade,slide
thumbCurClass: 'current', //导航对象当前的class
thumbOverEvent: true, //鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象
slideTime: 1000, //平滑过渡时间，默认为1000ms，为0或负值时，忽略changeType方式，切换效果为直接显示隐藏
autoChange: true, //是否自动切换
clickFalse: true, //导航对象如果有链接，点击是否链接无效，即是否返回return false，默认是return false链接无效，当thumbOverEvent为false时，此项必须为true，否则鼠标点击事件冲突
overStop: true, //鼠标经过切换对象时，切换对象是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换
changeTime: 5000, //自动切换时间
delayTime: 300//鼠标经过时对象切换迟滞时间，推荐值为300ms
}, o || {});

var _self = $(this);
var thumbObj;
var size = _self.size();
var nowIndex = 0;
var index;
var startRun;
var delayRun;
var slideFinish = true;
_init();
_start();

//初始化
function _init() {
_self.hide().eq(0).show();
//导航对象
if (o.thumbObj != null) {
//初始化thumbObj
thumbObj = $(o.thumbObj);
thumbObj.removeClass(o.thumbCurClass).eq(0).addClass(o.thumbCurClass);

//导航对象click事件
thumbObj.click(function () {
index = thumbObj.index($(this));
_run();
if (o.clickFalse == true) {
return false;
}
});
//导航对象hover事件
if (o.thumbOverEvent == true) {
thumbObj.mouseenter(function () {
clearInterval(startRun);
clearTimeout(delayRun);
index = thumbObj.index($(this));
delayRun = setTimeout(function () { _run(); clearInterval(startRun); }, slideFinish ? o.delayTime : o.slideTime);
});
thumbObj.mouseleave(function () {
clearTimeout(delayRun);
if (o.autoChange == true) {
delayRun = setTimeout(_next, o.changeTime);
}
});
}
}

//点击按钮上一个
if (o.botPrev != null) {
$(o.botPrev).click(function () {
if (_self.queue().length < 1) {//防止短时间连续点击
index = (nowIndex + size - 1) % size;
_run();
}
return false;
});
}

//点击按钮下一个
if (o.botNext != null) {
$(o.botNext).click(function () {
if (_self.queue().length < 1) {
_next();
}
return false;
});
}
}

function _start() {
//自动运行

......