HTML5+CSS大作业——汽车自驾游(10页) 主题HTM5网页设计作业成品
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
文章目录
- HTML5+CSS大作业——汽车自驾游(10页) 主题HTM5网页设计作业成品
- 获取更多源码
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>车行天下</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.touchSlider.js"></script>
<script src="js/flashjs.js"></script>
<script src="js/pic_scroll.js"></script>
<script src="js/tabjs.js"></script>
<script src="js/jquery.soChange-min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".dlxhotbox li .rsp").hide();
$(".dlxhotbox li").hover(function(){
$(this).find(".rsp").stop().fadeTo(500,0.8)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
},
function(){
$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'600'}, {duration: "fast"})
$(this).find(".text").animate({left:'-500'}, {duration: 0})
});
//数字导航切换及自定义当前数字的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">
<!--head-->
<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>
<!--search-->
<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>
<!--search end-->
</div>
<!--nav-->
<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>
<!--nav end-->
</header>
<!--head end-->
<!--flash-->
<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>
<!--flash end-->
<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>-->
<div id="web_color">
<div id="customer_box" class="src6">
<A class="st png" href="#"></A>
<A class="sm png" href="#"></A>
<div class="src7">
<ul>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="tel">电话：010-81280150 </li>
<li class="email">邮箱：youxiang@sohu</li>
<li class="emails">邮编：100102</li>
<li class="address">地址：北京市朝阳区金蝉西路1号酷车小镇B1-005</li>
<li class="banquan">版权所有：车行天下 京ICP备09008783号-2 技术支持：<a title="网林时代" href="http://www.awanglin/" target="_blank">网林时代</a>·<a title="网站建设" href="http://www.awanglin/" target="_blank">网站建设</a></li>
</ul>
</div>
<!--f2wmbox-->
<div class="f2wmbox fr"><img src="img/f2wm.gif" width="133" height="135">
<div class="blank20"></div>
<div class="bdsharebuttonbox fbdshare"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</div>
<!--f2wmbox end-->
</div>
</div>
<!--底部 end-->
<SCRIPT src="js/jquery.tool01s.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/moumou.js" type="text/javascript"></SCRIPT>
</body>
</html>
四、获取更多源码
PC电脑端关注我们
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
HTML5+CSS大作业——汽车自驾游(10页) 主题HTM5网页设计作业成品
发布评论