353.新能源汽车响应式网站大学生期末大作业 Web前端网页制作 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/140175235

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js，适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含7个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/main.js"></script>
</head>

<body>
<div class="width1200 top">

<ul>
   <li><a href="index.html">首页</a></li>
   <li><a href="share.html">共享汽车</a></li>
   <li><a href="energy.html">新能源汽车</a></li>
   <li><a href="serve.html">配套服务</a></li>
   <li><a href="list.html">新闻资讯</a></li>
   <li><a href="contact.html">关于我们</a></li>
</ul>
</div>
<div class="banner"><img src="images/banner-on4.jpg" alt=""></div>
<div class="width1200 list">
   <h3>核心竞争力</h3>
<p>致力于成为中国新能源汽车领域专业化的产业运营平台！</p>
<ul>
   <li>
   <img src="images/list-1.jpg" alt="" />
   <dt>用车企业成本低</dt>
<dd>零元购车，降低成本</dd>
<dd>每月只需支付租车费用</dd>
</li>
   <li>
   <img src="images/list-2.jpg" alt="" />
   <dt>专业配套</dt>
<dd>建设并运营新能源汽车配套</dd>
<dd>充电站点，按需求随时随地为车充电</dd>
</li>
   <li>
   <img src="images/list-3.jpg" alt="" />
   <dt>全产业链构建</dt>
<dd>连接新能源汽车生产商、运营商</dd>
<dd>与个人用户的出行平台</dd>
</li>
   <li>
   <img src="images/list-4.jpg" alt="" />
   <dt>维护保障</dt>
<dd>生产商提供质量、后勤、维修</dd>
<dd>等保障措施，解决用车企业后顾之忧</dd>
</li>
</ul>
</div>
<div class="collaborate-bj">
<div class="width1200 collaborate list">
<h3>战略合作伙伴</h3>
<p>宝港能源期待与您一起共创美好的未来</p>
<img src="images/collaborate.png" />
</div>
</div>
<div class="records">
   <p>Powered By BG ENERGY Copyright © 2017 All Rights Reserved</p>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/*====================== 初始化 ====================*/
body { font-family:'zfull-GB','Microsoft YaHei', '微软雅黑','宋体'; font-size:14px; line-height:22px; color:#333333;}
body,ul,ol,li,p,span,i,strong,a,h1,h2,h3,h4,h5,h6,form,table,td,img,div,form,label,dl,dt,dd{margin:0;padding:0;border:0;}
ul,ol{ list-style:none;}
table { border-collapse:collapse; border-spacing:0;}
a{ text-decoration:none; color:#000;}
img{ border:none;}
input,button,select,textarea{outline:none; border:none}
.width1200{ margin:0 auto; width:1200px; min-width:1000px;}
.width1162{ margin:0 auto; width:1162px; min-width:1000px;}
.width1000{ margin:0 auto; width:1000px; min-width:1000px;}

/*====================== 首页 ====================*/
.top{ height:60px;}
.top h1 a{ display:block; width:226px; height:38px; background:url(../images/logo.png) no-repeat center; float:left; margin-top:11px;}
.top ul{ float:right;}
.top ul li{ float:left; margin-left:40px; height:56px; line-height:56px;}
.top ul li.active a{ border-bottom:4px solid #3679c3; color:#3679c3;}
.top ul li a{ font-size:16px; color:#333; display:inline-block; padding:0 15px; border-bottom:4px solid #fff;
transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;}
.top ul li:hover a{ border-bottom:4px solid #3679c3; color:#3679c3}
.banner img{ width:100%; display:block;}
.list{ text-align:center; padding:60px 0; overflow:hidden;}
.list h3{ font-size:36px; color:#333; font-weight:normal;}
.list h3 span{ display:inline-block; margin-right:7px; font-weight:bold;}
.list p{ font-size:18px; color:#999999; display:block; padding:30px 0 60px 0;}
.list p:after{ content:""; display:block; width:196px; height:7px; background:url(../images/l-border.png) no-repeat center; margin:20px auto 0;}
.list ul{ overflow:hidden;}
.list ul li{ float:left; width:25%; text-align:center;}
.list dt{ font-size:18px; margin:10px 0;}
.list dd{ color:#999999; font-size:14px;}
.collaborate-bj{ background:#f0f3f5;}
.collaborate ul li{ width:20%;}
.collaborate ul li img{ border: 2px solid #d7d8d9; border-radius: 5px; }
.records{ background:#333333; font-size:12px; color:#fff; text-align:center; padding:30px 0;}
.share ul li{ width:25%; float:left; text-align:center;}
.share ul li em{ display:block; font-style:normal; font-size:18px; color:#333333; margin-top:15px;}
.share-img{ width:1002px; height:94px; background:url(../images/share-shop.png) no-repeat center center; margin:0 auto;}
.share-div{ position:relative; min-height:80px;}
.share-div ul{ overflow:hidden; padding:20px 0 0 0;}
.share-div ul li{ float:left; text-align:center;position:absolute; top:15px; }
.share-div ul li h3{ color:#333; font-size:18px; font-weight:normal; margin-bottom:5px;}
.share-div ul li p{ font-size:14px; color:#999999;}
.share-div ul li.li1{ left:70px;}
.share-div ul li.li2{ left:370px;}
.share-div ul li.li3{ left:650px;}
.share-div ul li.li4{ left:960px;}
.share-bj{ padding:60px 0; position:relative;}
.serve{ text-align:center; padding:60px 0;}
.serve h3{ font-size:36px; color:#333333; font-weight: normal;}
.serve h3:after{content:""; display:block; width:196px; height:7px; background:url(../images/l-border.png) no-repeat center; margin:30px auto 0;}
.serve ul{ overflow:hidden; padding-top:50px;}
.serve ul li{ float:left; width:25%; text-align:center;}
.serve ul li h4{ font-size:18px; color:#333333; margin:10px 0;}
.serve ul li p{ font-size:14px; color:#999999;}
.serve-bj{ background:#f0f3f5; padding-bottom:40px;}
.serve-on-line{ font-size:30px; color:#666666; overflow:hidden; text-align:center}
.serve-on-line ul{ display:inline-block;}
.serve-on-lineIn{ margin-top:30px;}
.serve-on-line ul li img{ margin-left:40px;}
.accordion ul li{ float:left; width:150px; height:300px; overflow:hidden;position:relative;}
.accordion ul li.onlive{width:150px; height:300px; overflow:hidden;}
.accordion ul li.ontwo{width:200px; height:300px; overflow:hidden;}
.accordion{ background:#cacaca; height:300px; overflow:hidden;}
.accordion-img{ width:150px; float:left; display:inline-block; margin-top:58px; position:relative;}
.accordion-img img{ position:absolute; right:20px; top:20px;}
.accordion-txt{width: 264px; float:left; text-align:left;}
.accordion ul li h4{ color:#333333; font-size:18px; margin:30px 0 10px 0;
position:absolute; top:10px; right:10px; color:#FFF; z-index:3;}
.accordion ul li span{ display:none; font-size:14px; color:#666666; line-height:24px;}
.accordion ul li.active{ width:562px; background:url(../images/energy-bj.png) no-repeat center;}
.accordion ul li.active h4{ position:static; color:#333333;}
.accordion ul li.active span{ display:block;}
.accordion ul li.active .accordion-img{ width:298px;}
.accordion-mask4{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:2;}
.accordion-mask6{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:2;}
.accordion ul li.active .accordion-mask6{ background:rgba(0,0,0,0);}
.accordion ul li.active .accordion-mask4{ background:rgba(0,0,0,0);}
.accordion-no{ padding:60px 0 20px 0;}
.accordion-none{ padding:0 0 60px 0;}
.accordion-none ul li{ width:200px;}
.accordion-none .accordion-txt{ float:left; margin:-58px 0 0 20px;}
.accordion-none .accordion-img{ float:right;}
.accordion-none .accordion-img img{ left:-20px;}
.accordion-none .accordion ul li h4{ left:10px;}
.accordion-line{ margin-bottom:30px;}
.accordion-list-none{ padding:60px 0 0 0;}
.accordion-list-bt{ text-align:left;}
.accordion-list-bt img{ display:inline-block; margin-bottom:30px; margin-left:210px;}
.accordion-list-bt img:last-child{ margin-bottom:60px; margin-left:225px;}
.contact-title{ margin-top:30px;}
.contact-title h4{ font-size:24px; color:#333333; margin-bottom:20px; font-weight: normal;}
.contact-title h4:before{ content:""; display:inline-block; background:#cccccc;
height:28px; width:4px; margin-right:10px; position:relative; top:5px;}
.contact-list p{ font-size:14px; color:#666; line-height:23px; margin-top:10px; text-indent:0em !important;}
.contact-time ul li{ position:relative;font-size:14px; color:333; min-height:100px;}
.contact-month{ width:80px; text-align:center}
.contact-month em{ font-style:normal; display:block;color:#3679c3; }
.contact-month span{ display:block; font-size:24px; color:#3679c3; }
.contact-border{ position:absolute; top:15px; left:0; right:0; bottom:0;min-height:80px;}
.contact-border i{ display:block; min-height:70px; width:2px; background:#3679c3;
position:absolute; left:4px; top:12px; bottom:0; right:0; padding-bottom:30px;}
.contact-border strong{ display:inline-block; height:10px; width:10px; background:#3679c3;
border-radius:50%;}

...

3.JS

代码如下（节选示例）：

/*! jQuery v1.8.3 jquery.com | jquery.org/license */
(function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r<i;r++)v.event.add(t,n,u[n][r])}o.data&&(o.data=v.extend({},o.data))}function Ot(e,t){var n;if(t.nodeType!==1)return;t.clearAttributes&&t.clearAttributes(),t.mergeAttributes&&t.mergeAttributes(e),n=t.nodeName.toLowerCase(),n==="object"?(t.parentNode&&(t.outerHTML=e.outerHTML),v.support.html5Clone&&e.innerHTML&&!v.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):n==="input"&&Et.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):n==="option"?t.selected=e.defaultSelected:n==="input"||n==="textarea"?t.defaultValue=e.defaultValue:n==="script"&&t.text!==e.text&&(t.text=e.text),t.removeAttribute(v.expando)}function Mt(e){return typeof e.getElementsByTagName!="undefined"?e.getElementsByTagName("*"):typeof e.querySelectorAll!="undefined"?e.querySelectorAll("*"):[]}function _t(e){Et.test(e.type)&&(e.defaultChecked=e.checked)}function Qt(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Jt.length;while(i--){t=Jt[i]+n;if(t in e)return t}return r}function Gt(e,t){return e=t||e,v.css(e,"display")==="none"||!v.contains(e.ownerDocument,e)}function Yt(e,t){var n,r,i=[],s=0,o=e.length;for(;s<o;s++){n=e[s];if(!n.style)continue;i[s]=v._data(n,"olddisplay"),t?(!i[s]&&n.style.display==="none"&&(n.style.display=""),n.style.display===""&&Gt(n)&&(i[s]=v._data(n,"olddisplay",nn(n.nodeName)))):(r=Dt(n,"display"),!i[s]&&r!=="none"&&v._data(n,"olddisplay",r))}for(s=0;s<o;s++){n=e[s];if(!n.style)continue;if(!t||n.style.display==="none"||n.style.display==="")n.style.display=t?i[s]||"":"none"}return e}function Zt(e,t,n){var r=Rt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function en(e,t,n,r){var i=n===(r?"border":"content")?4:t==="width"?1:0,s=0;for(;i<4;i+=2)n==="margin"&&(s+=v.css(e,n+$t[i],!0)),r?(n==="content"&&(s-=parseFloat(Dt(e,"padding"+$t[i]))||0),n!=="margin"&&(s-=parseFloat(Dt(e,"border"+$t[i]+"Width"))||0)):(s+=parseFloat(Dt(e,"padding"+$t[i]))||0,n!=="padding"&&(s+=parseFloat(Dt(e,"border"+$t[i]+"Width"))||0));return s}function tn(e,t,n){var r=t==="width"?e.offsetWidth:e.offsetHeight,i=!0,s=v.support.boxSizing&&v.css(e,"boxSizing")==="border-box";if(r<=0||r==null){r=Dt(e,t);if(r<0||r==null)r=e.style[t];if(Ut.test(r))return r;i=s&&(v.support.boxSizingReliable||r===e.style[t]),r=parseFloat(r)||0}return r+en(e,t,n||(s?"border":"content"),i)+"px"}function nn(e){if(Wt[e])return Wt[e];var t=v("<"+e+">").appendTo(i.body),n=t.css("display");t.remove();if(n==="none"||n===""){Pt=i.body.appendChild(Pt||v.extend(i.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!Ht||!Pt.createElement)Ht=(Pt.contentWindow||Pt.contentDocument).document,Ht.write("<!doctype html><html><body>"),Ht.close();t=Ht.body.appendChild(Ht.createElement(e)),n=Dt(t,"display"),i.body.removeChild(Pt)}return Wt[e]=n,n}function fn(e,t,n,r){var i;if(v.isArray(t))v.each(t,function(t,i){n||sn.test(e)?r(e,i):fn(e+"["+(typeof i=="object"?t:"")+"]",i,n,r)});else if(!n&&v.type(t)==="object")for(i in t)fn(e+"["+i+"]",t[i],n,r);else r(e,t)}function Cn(e){return function(t,n){typeof t!="string"&&(n=t,t="*");var r,i,s,o=t.toLowerCase().split(y),u=0,a=o.length;if(v.isFunction(n))for(;u<a;u++)r=o[u],s=/^\+/.test(r),s&&(r=r.substr(1)||"*"),i=e[r]=e[r]||[],i[s?"unshift":"push"](n)}}function kn(e,n,r,i,s,o){s=s||n.dataTypes[0],o=o||{},o[s]=!0;var u,a=e[s],f=0,l=a?a.length:0,c=e===Sn;for(;f<l&&(c||!u);f++)u=a[f](n,r,i),typeof u=="string"&&(!c||o[u]?u=t:(n.dataTypes.unshift(u),u=kn(e,n,r,i,u,o)));return(c||!u)&&!o["*"]&&(u=kn(e,n,r,i,"*",o)),u}function Ln(e,n){var r,i,s=v.ajaxSettings.flatOptions||{};for(r in n)n[r]!==t&&((s[r]?e:i||(i={}))[r]=n[r]);i&&v.extend(!0,e,i)}function An(e,n,r){var i,s,o,u,a=e.contents,f=e.dataTypes,l=e.responseFields;for(s in l)s in r&&(n[l[s]]=r[s]);while(f[0]==="*")f.shift(),i===t&&(i=e.mimeType||n.getResponseHeader("content-type"));if(i)for(s in a)if(a[s]&&a[s].test(i)){f.unshift(s);break}if(f[0]in r)o=f[0];else{for(s in r){if(!f[0]||e.converters[s+" "+f[0]]){o=s;break}u||(u=s)}o=o||u}if(o)return o!==f[0]&&f.unshift(o),r[o]}function On(e,t){var n,r,i,s,o=e.dataTypes.slice(),u=o[0],a={},f=0;e.dataFilter&&(t=e.dataFilter(t,e.dataType));if(o[1])for(n in e.converters)a[n.toLowerCase()]=e.converters[n];for(;i=o[++f];)if(i!=="*"){if(u!=="*"&&u!==i){n=a[u+" "+i]||a["* "+i];if(!n)for(r in a){s=r.split(" ");if(s[1]===i){n=a[u+" "+s[0]]||a["* "+s[0]];if(n){n===!0?n=a[r]:a[r]!==!0&&(i=s[0],o.splice(f--,0,i));break}}}if(n!==!0)if(n&&e["throws"])t=n(t);else try{t=n(t)}catch(l){return{state:"parsererror",error:n?l:"No conversion from "+u+" to "+i}}}u=i}return{state:"success",data:t}}function Fn(){try{return new e.XMLHttpRequest}catch(t){}}function In(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}function $n(){return setTimeout(function(){qn=t},0),qn=v.now()}function Jn(e,t){v.each(t,function(t,n){var r=(Vn[t]||[]).concat(Vn["*"]),i=0,s=r.length;for(;i<s;i++)if(r[i].call(e,t,n))return})}function Kn(e,t,n){var r,i=0,s=0,o=Xn.length,u=v.Deferred().always(function(){delete a.elem}),a=function(){var t=qn||$n(),n=Math.max(0,f.startTime+f.duration-t),r=n/f.duration||0,i=1-r,s=0,o=f.tweens.length;for(;s<o;s++)f.tweens[s].run(i);return u.notifyWith(e,[f,i,n]),i<1&&o?n:(u.resolveWith(e,[f]),!1)},f=u.promise({elem:e,props:v.extend({},t),opts:v.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:qn||$n(),duration:n.duration,tweens:[],createTween:function(t,n,r){var i=v.Tween(e,f.opts,t,n,f.opts.specialEasing[t]||f.opts.easing);return f.tweens.push(i),i},stop:function(t){var n=0,r=t?f.tweens.length:0;for(;n<r;n++)f.tweens[n].run(1);return t?u.resolveWith(e,[f,t]):u.rejectWith(e,[f,t]),this}}),l=f.props;Qn(l,f.opts.specialEasing);for(;i<o;i++){r=Xn[i].call(f,e,l,f.opts);if(r)return r}return Jn(f,l),v.isFunction(f.opts.start)&&f.opts.start.call(e,f),v.fx.timer(v.extend(a,{anim:f,queue:f.opts.queue,elem:e})),f.progress(f.opts.progress).done(f.opts.done,f.opts.complete).fail(f.opts.fail).always(f.opts.always)}function Qn(e,t){var n,r,i,s,o;for(n in e){r=v.camelCase(n),i=t[r],s=e[n],v.isArray(s)&&(i=s[1],s=e[n]=s[0]),n!==r&&(e[r]=s,delete e[n]),o=v.cssHooks[r];if(o&&"expand"in o){s=o.expand(s),delete e[r];for(n in s)n in e||(e[n]=s[n],t[n]=i)}else t[r]=i}}function Gn(e,t,n){var r,i,s,o,u,a,f,l,c,h=this,p=e.style,d={},m=[],g=e.nodeType&&Gt(e);n.queue||(l=v._queueHooks(e,"fx"),l.unqueued==null&&(l.unqueued=0,c=l.empty.fire,l.empty.fire=function(){l.unqueued||c()}),l.unqueued++,h.always(function(){h.always(function(){l.unqueued--,v.queue(e,"fx").length||l.empty.fire()})})),e.nodeType===1&&("height"in t||"width"in t)&&(n.overflow=[p.overflow,p.overflowX,p.overflowY],v.css(e,"display")==="inline"&&v.css(e,"float")==="none"&&(!v.support.inlineBlockNeedsLayout||nn(e.nodeName)==="inline"?p.display="inline-block":p.zoom=1)),n.overflow&&(p.overflow="hidden",v.support.shrinkWrapBlocks||h.done(function()

...