HTML+CSS+JS大作业——汽车设备营销企业模板(13页) 静态HTML网页设计模板

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

文章目录

HTML+CSS+JS大作业——汽车设备营销企业模板(13页) 静态HTML网页设计模板
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码
五、学习资料
六、更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>南阳淅减汽车减振器有限公司</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /></head><body>
<!--top-->
<div class="top_bg"><div class="wrap"><ol class="fl tl overflow pt40"><a href="3"><img src="images/log.png" /></a><br /><span class="tl l-50 fl"><i class="lan">股票代码：</i>012859450</span></ol><div class="fr top_right "><div class="s_right l-35 pt40"> <a target="_blank" class="r_one ml15 f12 " href="http://3g.hnxdf.com/">手机版 </a> <a rel="nofollow" class="r_two ml15 f12 " href="http://weibo.com/zzxdfpr" target="_blank"> 新浪微博 </a>  <a rel="nofollow" class="r_four ml15  f12" href="http://#/" target="_blank"> 官方微信 <span > <img src="images/wx2.jpg"> </span> </a> </div><div class="clearfix overflow w100 pt20 overflow"><img src="images/dh.png" /></div></div></div>
</div>
<!--nav-->
<div class=" w100  overflow clearfix nav_bg"><div id="zzsc"><ul id="nav"><li class="on"><a href="#" class="first">首页</a><div class="second">1</div></li><li><a href="#">公司概况</a><div class="second">2</div></li><li><a href="#">公司新闻</a><div class="second">3</div></li><li><a href="#">公司荣誉</a><div class="second">4</div></li><li><a href="#">公司客户</a><div class="second">5</div></li><li><a href="#">产品介绍</a><div class="second">6</div></li><li><a href="#">销售网络</a><div class="second">7</div></li><li><a href="#">联系我们</a><div class="second">8</div></li><li><a href="#">售后服务</a><div class="second">9</div></li></ul><div class="dot"><ul><span></span></ul></div><div id="slide"></div></div></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){var liWidth = $('#zzsc #nav li').width();var secondWidth = $('#zzsc #nav2 .second').width();	$('#zzsc #nav li').hover(function(){var index = $(this).index();$('#zzsc .dot span').stop().animate({left:liWidth*index+'px'},200);$(this).addClass('on').siblings().removeClass('on');$(this).find('.second').fadeIn(600);$('#zzsc #slide').stop().animate({height:'150px'},400);},function(){$(this).find('.second').fadeOut(600);$('#zzsc #slide').stop().animate({height:'0'},400);});
});
</script><!--轮播-->
<!-- 代码begin -->
<div class="flexslider" ><ul class="slides"><li style="background: url(images/index1_r3_c1.jpg) 50% 0 no-repeat; z-index:1"></li><li style="background:url(images/index1_r3_c1.jpg) 50% 0 no-repeat; z-index:1"></li><li style="background:url(images/index1_r3_c1.jpg) 50% 0 no-repeat; z-index:1"></li></ul>
</div>
<!-- 代码end --> 
<script src="js/jquery.flexslider-min.js"></script> 
<script>
$(function(){$('.flexslider').flexslider({directionNav: true,pauseOnAction: false});
});
</script> <!--您的爱车是否也有这些问题-->
<div class="w100 overflow clearfix noml"><dl><dt class=" f30 lan l-30 blod" style="padding-top:90px">您的爱车是否也有这些问题？</dt><dd class="f18 hui family">Does your car have this problem</dd></dl>
</div>
<div class="w100 overflow clearfix noml1"></div>
<!--有哪些优势-->
<div class="w100 overflow clearfix "><dl><dt class=" f30 lan l-42 blod" >淅减减震器<em class="f42 red">有哪些优势</em></dt><dd class="f18 hui family">Select 6 features of our products</dd><dd><img src="images/index1_r4_c2.jpg"  class="pt20 overflow"/></dd></dl>
</div>
<div class="ys clearfix wrap overflow pt50"><div class="ys_r1"><dl><dt class="pt50 overflow f24 baise boder-b l-30 pb5">舒适乘车</dt><dd class="pt30 overflow f14 baise">采用缓冲原来，减震
捷达”减振器为国内
同行业中唯一获得一
汽大众公司达标证</dd></dl></div><div class="ys_r1"><dl><dt class="pt50 overflow f24 baise boder-b l-30 pb5">稳定性能</dt><dd class="pt30 overflow f14 baise">采用缓冲原来，减震
捷达”减振器为国内
同行业中唯一获得一
汽大众公司达标证</dd></dl></div><div class="ys_r1"><dl><dt class="pt50 overflow f24 baise boder-b l-30 pb5">降低噪音</dt><dd class="pt30 overflow f14 baise">采用缓冲原来，减震
捷达”减振器为国内
同行业中唯一获得一
汽大众公司达标证</dd></dl></div><div class="ys_r1 "><dl><dt class="pt50 overflow f24 baise boder-b l-30 pb<dd>联系人:凌琳杰<br />电 话:(0086) 377-69219869<br />手 机:(0186) 013603775499<br />E-Mail:linglinjie@cjan.cn</dd></dl><dl><dt>销售部（主机配套)</dt><dd>联系人:凌琳杰<br />电 话:(0086) 377-69219869<br />手 机:(0186) 013603775499<br />E-Mail:linglinjie@cjan.cn</dd></dl><ol><a href="#"><img src="images/index1_r31_c19.jpg" /></a> <a href="#"><img src="images/index1_r31_c21.jpg" /></a></ol></div></div></div>
</div>
<!--copy-->
<div class="copy_bg overflow clearfix"><div class="w1006 overflow"><p class="fl"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">产品介绍</a> </p><span class="fr overflow">Copyright 2010 www.china-shock-absorber.com</span></div>
</div></body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号获取更多源码 !
在这里插入图片描述

五、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、更多源码

PC电脑端关注我们

HTML5期末考核大作业源码* 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述