HTML制作一个汽车介绍网站【大学生网页制作期末作业】
【摘要】 🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视...
🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️5000套HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
@TOC
一、👨🎓网站题目
🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。
二、✍️网站描述
🏷️ 此作品为学生汽车网页设计题材，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" "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=GB2312" />
<meta name="keywords" />
<meta name="description"/>
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css">
#div3 {width:100px; height:100px; background:url('images/1.jpg'); position:absolute; top:200px; left:50px; display:block; cursor:pointer; text-align:right; z-index:999999;}
span {color:#000; font-size:16px; margin-top:16px; margin-right:5px; font-weight:bold; cursor:pointer}
#div1 { left:0; top:50%; background:url('images/2.jpg');position:absolute; width:100px; height:250px; text-align:right;}
#div2 { right:0; top:50%; background:url('images/2.jpg'); position:absolute; width:100px; height:250px;text-align:right;}
.menu{ height:40px; line-height:40px;}
.menu ul{ padding-left:35px;}
.menu ul li{ float:left; width:136px; text-align:center; position:relative; margin-right:46px;}
.menu ul li.nobg{ background:none;}
.menu ul li.nobg:hover{ background:#921e14;width:136px; height:37px;}
.menu ul li a{ color:#FFF; font-weight:bold;display:block;}
.menu ul li ul{ position:absolute; top:38px; text-align:center;width:100px; left:0px; padding-left:0px; display:none;}
.menu ul li ul li{display:block; clear:both; float:none; background:none; margin:0}
.nav td a { padding:0;}
</style>
<script type="text/javascript" src="JS/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.menu li').bind({
mouseover:function(){ $(this).find("ul").show();},
mouseout:function(){ $(this).find("ul").hide(); }
});
});
</script>
</head>
<body>
<center>
<table width="1000" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
<tr><td colspan="5"><img src="images/photo.jpg" width="1000" height="200"/></td></tr>
<tr class="nav ">
<td height="50" colspan="5" >
<div class="menu">
<ul>
<li class="hover"> <a class="active" href="index-2.html">网站首页</a></li>
<li><a href="http://www.foreseebio.com/chengpinb/biao26/about.html">关于我们</a>
</li>
<li><a href="news.html">新闻咨询</a>
<ul>
<li><a href="news.html">普通运输汽车</a></li>
<li><a href="news.html">专用汽车</a></li>
<li><a href="news.html">特殊用途汽车</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a>
<ul>
<li><a href="contact.html">联系方式</a></li>
<li><a href="liuyan.html">给我留言</a></li>
</ul>
</li>
<li><a href="liuyan.html">给我留言</a></li>
</ul>
</div>
<!--a class="active" href="index.html">网站首页</a><a href="http://www.foreseebio.com/chengpinb/biao26/about.html">关于我们</a> <a href="news.html">新闻咨询</a><a href="contact.html">联系我们</a><a href="liuyan.html">给我留言</a--></td>
</tr>
<tr>
<td width="200" style="paddding:10px;" height="800">
<p>汽车是指以汽油、柴油、天然气等燃料或者以电池、太阳能等新型能源由发动机作动力的运输工具。一般具有四个或四个以上车轮，不依靠轨道或架线而在陆地行驶的车辆。汽车通常被用作载运客、货和牵引客、货挂车，也有为完成特定运输任务或作业任务而将其改装或经装配了专用设备成为专用车辆，但不包括专供农业使用的机械。全挂车和半挂车并无自带动力装置，他们与牵引汽车组成汽车列车时才属于汽车范畴， 1885年是汽车发明取得决定性突破的一年。当时和戴姆勒在同一工厂的本茨，也在研究汽车。他在1885年几乎与戴姆勒同时制成了汽油发动机，装在汽车上，以每小时12公里的速度行驶，获得成功。</p>
<img src="images/p2.jpg" width="200" height="190"/>
<img src="images/p1.jpg" width="200" height="210"/></td>
<td width="800" colspan="4">
<center style="text-align:left;">
<h2 style="padding:0 10px;">发展形势</h2>
<script type="text/javascript" language="JavaScript">
var widths=800;
var w=2;
var widthss=widths+w;
var heights=500;
var heightss=heightss+w;
var heightt=20;
var counts=3;
img1=new Image();img1.src='images/qiche1.jpg';
url1=new Image();url1.src='#';
img2=new Image();img2.src='images/qiche2.jpg';
url2=new Image();url2.src='#';
img3=new Image();img3.src='images/qiche3.jpg';
url3=new Image();url3.src='#';
var nn=1; //当前所显示的滚动图
var key=0; //标识是否为第一次开始执行
var tt; //标识作用
function change_img()
{
if(key==0){key=1;} //如果第一次执行KEY=1，表示已经执行过一次了。
else if(document.all)//document.all仅IE6/7认识，firefox不会执行此段内容
{
document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上
document.getElementById("pic").filters[0].Play(duration=2); //开始转换
document.getElementById("pic").filters[0].Transition=23;//转换效果
}
eval('document.getElementById("pic").src=img'+nn+'.src'); //替换图片
eval('document.getElementById("url").href=url'+nn+'.src'); //替换URL
//替换ALT
for (var i=1;i<=counts;i++)
{
document.getElementById("xxjdjj"+i).className='axx';
}
document.getElementById("xxjdjj"+nn).className='bxx'; //将当前页面的ID设置为选中状态
nn++;
if(nn>counts){nn=1;} //如果ID大于总图片数量。则从头开始循环
tt=setTimeout('change_img()',4000); //在4秒后重新执行change_img()方法.
}
function changeimg(n)//点击黑条上的链接执行的方法。
{
nn=n; //当前页面的ID等于传入的N值,
window.clearInterval(tt); //清除用于循环的TT
//重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
change_img();
}
//样式表
document.write('<style>');
document.write('.axx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;font-size:12px;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#666;');
document.write('line-height:12px;font:12px sans-serif;background-color:#eee;border:1px solid #666}');
document.write('.bxx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#111;');
document.write('line-height:12px;font:12px sans-serif;background-color:#fff;border:1px solid #111}');
document.write('</style>');
//内容部分
document.write('<div style="width:'+widthss+'px;height:'+heights+'px;');
document.write('overflow:hidden;text-overflow:clip;float:left;">');
document.write('<div><a id="url" target="_blank"><img id="pic" ');
document.write('style="border:0;');
document.write('FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)"');
document.write(' width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);');
document.write('width:100%-2px;text-align:right;');
document.write('top:-19px;position:relative;margin:-5px 9px 0 1px;height:22px;line-height:22px;');
document.write('z-index:4000;"><div style="height:22px;line-height:22px;padding:2px 0 0 0;">');
for(var i=1;i<counts+1;i++)
{
document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'"');
document.write(' class="axx" target="_self">'+i+'</a>');
}
document.write('</div></div></div>');
change_img();
</script>
<p style="padding:0 10px;">
此前连续下滑的市场状况，致使欧洲汽车工业纷纷将生产及销售重点转向持续增长的中国市场，并引发了新一轮的在华产能和网点扩张，未来预计将有更多的国际品牌在华本土化生产。上海大众第八工厂在长沙经开区南扩区正式签约。
据了解，2013年至2015年，大众在中国的合资企业计划继续投资98亿欧元，用于产能扩建和新产品开发。大众计划到2018年前在全球兴建10座工厂，其中7座位于中国，这就包含刚刚兴建的长沙工厂，2018年大众在华产能将达到400万辆。
实际上，除了大众之外，通用、现代、等跨国车企也掀起了在华扩充产能的热潮。业内认为，这实际上体现出跨国车企对中国市场的高度依赖。
而后，多个欧洲跨国车企正在筹划将旗下产品引入中国本土化生产。当前，捷豹路虎已经与奇瑞进行了合资合作，在全球销量和在华销量均稳定增长的良好势头下，奇瑞捷豹路虎拟在2014年下半年推出首个国产产品。
同时，沃尔沃、雷诺等欧洲品牌也在推进在华本土化生产计划。此外，有消息称，Jeep、凯迪拉克等品牌也将推出在华生产计划。</p>
</center></td></tr>
</table>
</tr>
<tr>
<td bgcolor="gray" height="40" >
<center><font color="white">版权所有 禁止盗版</font></center>
</td>
</tr>
</table>
</center>
<script type="text/javascript">
window.onscroll = window.onresize = function(){
var oDiv1 = document.getElementById("div1");//获取div1
var oDiv2 = document.getElementById("div2");//获取div2
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动条滚动的距离
//oDiv1.style.top = oDiv2.style.top = scrollTop + (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + "px";//移动距离
var dis = parseInt(scrollTop + (document.documentElement.clientHeight - oDiv1.offsetHeight)/2);
movestart(dis);
//oDiv1.style.top = oDiv2.style.top = dis;
};
var clearX = null;//全局变量
function movestart(targ){
var oDiv1 = document.getElementById("div1");//获取div1,局部变量
var oDiv2 = document.getElementById("div2");//获取div2,局部变量
clearInterval(clearX);
clearX = setInterval(function(){
var xspeed = (targ-oDiv1.offsetTop)/8;
if(oDiv1.offsetTop == targ){
clearInterval(clearX);
}else{
oDiv1.style.top = oDiv2.style.top = oDiv1.offsetTop + xspeed +"px";
}
},30);
}
window.onload = function(){
var oDiv = document.getElementById("div3");
var oSpan = document.getElementsByTagName("span");
var scrollTop2 = document.documentElement.scrollTop || document.body.scrollTop;
var D = null;
var xspeed = 3;
var yspeed = 3;
oDiv.onmouseover = function(){clearInterval(D);};
oDiv.onmouseout = function(){xlz();};
oSpan[0].onclick = function(){removeDiv();};
xlz();
function removeDiv(){
oDiv.style.display = "none";
}
function xlz(){
D = setInterval(function(){
var l = oDiv.offsetLeft + xspeed;
var t = oDiv.offsetTop + yspeed;
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop2){
yspeed *= -1;
t =document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop2;
}else if(t<=0){
yspeed *=-1;
t = 0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
xspeed *= -1;
l = document.documentElement.clientWidth-oDiv.offsetWidth;
}else if(l<=0){
xspeed *=-1;
l = 0;
}
oDiv.style.top =t +"px";
oDiv.style.left = l +"px";
},30);
}
}
</script>
<div id="div3"><span style="color:red;">X</span></div>
</body>
</html>
💒CSS样式代码
body {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 20px;
background:white;
-webkit-font-smoothing: antialiased;
margin:0;
padding:0;
}
.nav2 tr{
background: url(../images/bg.gif) repeat; text-align:center;
}
.nav{
background:black;}
.nav td a {
color:white;
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 1px #222;
text-decoration: none;
padding: 10px 40px;
background: url(../images/menu2.png) no-repeat;
}
.nav td a:hover,.nav td a.active{background: url(../images/menu1.png) no-repeat;color:#ef7524;}
table tr td {
padding: 0;
margin:0;
}
.liu tr{
text-align:center;
background: url(../images/0.png) repeat;
}
a{text-decoration: none;}
ul{list-style-type:none}
六、🥇 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
!
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）