web期末网站设计大作业：基于HTML+CSS+JavaScript制作新能源汽车企业网站

最新推荐文章于 2024-05-31 12:53:24 发布

前端工作室

最新推荐文章于 2024-05-31 12:53:24 发布

阅读量1k

点赞数 27

分类专栏：网页设计与实现文章标签：前端 javascript html css 课程设计网页设计

本文链接：https://blog.csdn.net/qq3200628753/article/details/126205645

版权

网页设计与实现专栏收录该内容

707 篇文章 7 订阅

订阅专栏

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️5000套HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

一、👨‍🎓网站题目

🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页、等网站的设计与制作。

二、✍️网站描述

🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

在这里插入图片描述

五、⚙️ 网站代码

🧱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">
	<h1><a href="#"></a></h1>
    <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>

💒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%;}
.contact-time p{ position:absolute; left:100px; top:0px; right:10px; bottom:0; color:#666;}
.contact-none{ margin:0 auto;}
.contact-none p{ font-size:14px; color:#999; line-height:35px;}
.contact-none i{ display:inline-block; width:30px;}
.contact-none span{ display:inline-block; width:60px; height:1px; background:#999; margin:0 10px;
position:relative; top:-4px;}
.contact-plat p{ font-size:14px; color:#666; line-height:35px;}
.list-n ul{ margin-bottom:60px;}
.list-n ul li{ margin-top:60px; overflow:hidden;}
.list-n i{ display:block; width:4px; height:60px; background:#3679c3; float:left;}
.list-n-time{ width:80px; text-align:center; float:left; font-size:20px; color:333;}
.list-n-time h4{ font-size:36px; color:#333; margin:8px 0 10px 0;}
.list-n-list{ float:left; margin-left:130px; font-size:14px; color:#999; text-align:center;}
.list-n-list h3{ font-size:26px; font-weight:normal; color:#333333; margin-bottom:15px; text-align: left;}
.list-n-list p{ line-height:25px; margin-top:10px; clear:both; text-align:left;}
.list-n-list img{ text-align:left; float:left;}
.list-n-list a{ display:block; color:#999; margin-top:15px; text-align:left; clear:both; 
transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;}
.list-n-list a:hover{ color:#3679c3;}
.list-n-list em{ font-style:normal; float:left; height:30px; line-height:30px; margin-bottom: 10px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;}
.list-n-list img{ display:inline-block; margin:5px 0;}
.list-new{ text-align:center;}
.list-new h3{ color:#333; font-size:26px; font-weight:normal; margin:30px 0;}
.list-new{ font-size:14px; color:#666;}
.list-new span{ display:block; margin:10px 0; border-bottom:1px solid #cccccc; margin-bottom:40px; padding-bottom:10px; color:#999;}
.list-new p{ text-align:left; text-indent:2em; line-height:24px; margin-top:10px;}
.list-new img{ display:inline-block; margin:5px 0;}
.list-new-padding{ padding:60px 0;}
.contact-plat{ padding-bottom:60px;}
.serve-on-line ul li{ float:left; height:114px; line-height:114px; position:relative;}
.serve-on-line ul li:first-child{ display:inline-block; width:150px; text-align:center}
.list-n-list em.on{ color:#3679c3;}
.list-n-list img{ display:inline-block; margin:10px 0;}
.list-n-list h3 a{ color:#333;}
.serv-ov{ overflow:hidden;}
.serv-left{ width:600px; float:left; text-align:center; font-size:24px; color:#666; margin-top:100px;}
.serv-left p{ line-height:50px;}
.serv-right{ width:600px; float:right; margin-top:20px;}
.share ul li strong{ font-weight:normal; font-size:14px; color:#999; display:block; margin-top:10px;}

.austin{ overflow:hidden; text-align:center}
.austin ul{ display:inline-block;}
.austin ul li{ overflow:hidden;}
.austin ul li.li2{ margin-top:40px;}
.austin-div{ float:left;}
.austin-div1{ width:170px; text-align:center;}
.austin-div1 h3{ font-size:24px; color:#333; margin-bottom:10px; margin-top:10px; font-weight:normal;}
.austin-div1 p{ font-size:14px; color:#999999;}
.austin-div2{ height:2px; width:160px; background:#cccccc; display:block; margin:40px 40px 0;}
.austin-div3 p.imgi{ display:inline-block; margin-left:20px;}
.austin-div3 p{ width:100px; float:left; text-align:center;}
.austin-div3 p span{ display:block; font-size:14px; color:#999999; margin-top:3px;}