900字范文 > 大学生期末网页大作业：基于HTML+CSS+JavaScript蓝色的汽车设备营销企业网站模板13页面

大学生期末网页大作业：基于HTML+CSS+JavaScript蓝色的汽车设备营销企业网站模板13页面

时间：2024-04-12 09:28:43

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

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

📂文章目录

一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货

一、👨‍🎓网站题目

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

二、✍️网站描述

🏷️ 此作品为学生汽车网页设计题材，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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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><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="/">手机版 </a> <a rel="nofollow" class="r_two ml15 f12 " href="/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><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><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> <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 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" style="margin-right:0"><dl><dt class="pt50 overflow f24 baise boder-b l-30 pb5">恢复减震</dt><dd class="pt30 overflow f14 baise">采用缓冲原来，减震</div></div><div class="bot_bg clearfix overflow w100"><div class=" w1006 overflow pt50 pb50"><dl class="overflow dl_left fl"><dt><img src="images/index1_r26_c4.jpg" /></dt><dd class="pt15 overflow"><img src="images/index1_r28_c3.jpg" /> <a href="#">企业办公平台</a></dd><dd class="pt15 overflow"><img src="images/index1_r30_c2.jpg" /> <a href="#">企业邮箱登录</a></dd></dl><div class="w770 fr overflow pt10 "><div class="w100 f12 l-35 boder-b overflow tl">热点搜索：<a href="#">汽车减振器</a><a href="#">货车减振器</a> <a href="#"> 轿车减振器</a> <a href="#"> 客车减振器</a><a href="#"> 丹江牌减振器</a> <a href="#"> 淅川减振器</a> </div><div class="w100 overflow pt15 xs"><dl><dt>销售部（主机配套)</dt><dd>联系人:凌琳杰<br />电话:(0086) 377-69219869<br />手机:(0186) 013603775499<br />E-Mail:linglinjie@</dd></dl><dl><dt>销售部（主机配套)</dt><dd>联系人:凌琳杰<br />电话:(0086) 377-69219869<br />手机:(0186) 013603775499<br />E-Mail:linglinjie@</dd></dl><dl><dt>销售部（主机配套)</dt><dd>联系人:凌琳杰<br />电话:(0086) 377-69219869<br />手机:(0186) 013603775499<br />E-Mail:linglinjie@</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><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 www.china-shock-</span></div></div></body></html>

💒CSS样式代码

*{margin:0 auto; padding:0;}html, body, div, p, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, img, textarea, iframe, table, th, td {margin: 0 auto;padding: 0; text-align:center}img {border: medium none;vertical-align: middle;}ol, ul, li {list-style-type: none;}h1, h2, h3, h4, h5, h6, table, th, td {font-size: 100%;font-weight: normal;}body, input, select, button, textarea {font-family: Arial,Microsoft yahei;font-size: 14px;}.normal, em, i {font-style: normal;}body {color: #3e3d3d;line-height: 23px; text-align:center; margin:auto; min-width:1100px}table {border-collapse: collapse;border-spacing: 0;}p {word-wrap: break-word;}a {color: #2c2d2d;text-decoration: none; }a:hover {color: #FF7900;}table {border-collapse: collapse;}input[type="button"] {outline: medium none;}.clearfix {display: block;}.overflow{overflow:hidden}.clearfix::after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}.fl {float: left;}.fr {float: right;}.tl {