web前端期末大作业：基于HTML+CSS+JavaScript汽车租赁网站(47页)

我是学长霸霸

于 2023-05-08 08:55:11 发布

阅读量26

点赞数

分类专栏： dw静态网页文章标签：课程设计 javascript 前端 html

本文链接：https://blog.csdn.net/qq_38512792/article/details/130551568

版权

dw静态网页专栏收录该内容

238 篇文章 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结构代码


<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>
     <script type="text/javascript">  
	    function doZoom(size) {
	        var zooomid = document.all ? document.all['zoom'] : document.getElementById('zoom');
	        zooomid.style.fontSize = size + 'px';
	    }
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>万事皆备，大众租赁为上海环球马术赛保驾护航_我的网站</title>
<meta name="keywords" content="万事,皆备,大众,租赁,为,上海,环球,马术,赛," />
<meta name="description" content="这是第一次，国际最高级别的五星级马术障碍赛将在上海的中华艺术宫前策马扬蹄。近百匹身价不菲的欧洲宝马从比利时空降上海，随之而来的，是50名顶尖的骑士，以及人数更为庞大的" />
<LINK href="style/global.css"  rel=stylesheet>
<LINK href="style/css.css"  rel=stylesheet>
<script language="JavaScript" type="text/javascript" src="js/jquery.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/LiScroll_gd.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/common.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/main.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/AC_RunActiveContent.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/paging.js" ></script>
<!--[if IE 6]>
	<script src="/templets/common/js/DD_belatedPNG.js"></script>
    <script>
    	DD_belatedPNG.fix(".png,.png img,.png a");
    </script>
<![endif]--></head>
<body>
<div class="header">
	<div class="top w980">
		<div class="logo fl png"><a href="index.htm"  title = "我的网站"><img src="images/img1.png"  width="325" height="147"/></a></div>
		<div class="tel fr png"><img src="images/img2.png"  width="212" height="147"/></div>			
	</div>
	<div class="nav w980">
		<ul class="nav-in">
			<li class="n_son"><a href="index.htm"  title = "网站首页">网站首页</a></li>
            
			<li class="n_son"><a href="index-1.htm"  title="关于我们">关于我们</a></li>
            
			<li class="n_son"><a href="index-2.htm"  title="行业资讯">行业资讯</a></li>
            
			<li class="n_son"><a href="index-3.htm"  title="车型展示">车型展示</a></li>
            
			<li class="n_son"><a href="index-4.htm"  title="租车指南">租车指南</a></li>
            
			<li class="n_son"><a href="index-5.htm"  title="租车价格">租车价格</a></li>
            
			<li class="n_son"><a href="index-6.htm"  title="留言反馈">留言反馈</a></li>
            
			<li class="n_son"><a href="index-7.htm"  title="人才招聘">人才招聘</a></li>
            
			<li class="n_son"><a href="index-8.htm"  title="联系我们">联系我们</a></li>
            					
		</ul>
	</div>
	<div class="fla w980">
		<div class="fla-in png">
           <a href="#"><img src="images/img3.png"  width="980" height="404"/></a>
        </div>	
	</div>
	<div class="header-a png">
		<div class="header_a-in w980">
			<div class="notice fl">
				<h2 class="n_tl png fl">最新公告：</h2>
				<div id="n_con">
					<div id="n_c_in" class="w_700 fl">
						<p id="n1p" class="fl"><a href="#" style="color:#4a4a4a;" title="诚信为本，市场永远在变，诚信永远不变！">诚信为本，市场永远在变，诚信永远不变！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></p>
						<p id="n2p" class="fl"></p>
					</div>
				</div>
			</div>
			<form class="t_srh png fr" action="#" method="get">
				<input class="s_txt png fl" type="text" value="请输入搜索关键字" name="kws" id="kws">
				<input class="s_cla png fl" type="text" name = "rid" value="车型展示"  unselectable="on" readyonly>
				<ul class="s_cla_list">
					<li>车型展示</li>
				    <li>租车价格</li>
				    <li>行业资讯</li>
				</ul>
				<input class="s_btn png fr" type="submit" value="">
			</form>
		</div>
	</div><!--header-a-->
</div>
<div class="pmain">
	<div class="w980">
		<div class="pmain_a fr">
			<div class="ptl_a">
				<div class="ptl_a-tl fl png">行业资讯</div>

	</div>
</div>
<script id="bdshare_js" data="type=tools" ></script>
<script id="bdshell_js"></script>
<script>
	document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
</script>
<script language="JavaScript" type="text/javascript" src="js/jquery.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/LiScroll_gd.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/common.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/main.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/AC_RunActiveContent.js" ></script>
<script language="JavaScript" type="text/javascript" src="js/paging.js" ></script>
</body>
<script src="error.html"  type="text/javascript"></script>
</html>

💒CSS样式代码

.mar_t12p{
	margin-top:12px;
}
.w1000{
	width:1000px;
	margin:0 auto;
}
/*header*/
.header{
	width:100%;
	height:639px;
	background:url(../images/bg35.jpg) center top repeat-x;
}
/*top*/
.top{
	height:147px;
	_overflow:hidden;
}
.tel{
	width:auto;
	height:147px;
}
/*nav*/
.nav{
	position:relative;
	z-index:2;
	background:url(../images/bg1.jpg) top repeat-x;
	height:43px;
	box-shadow:0 0 3px rgba(0,0,0,.5);
}
.nav-in{
	width:972px;
	margin:0 auto;
	height:43px;
	_overflow:hidden;
}
.n_son{
	position:relative;
	float:left;
	display:inline;
	width:108px;
	height:43px;
	font:700 14px/45px "Microsoft Yahei";
	text-align:center;
}
.n_son a{
	display:block;
	color:#000;
	text-decoration:none;
}
.n_son a:hover{
	background:url(../images/bg2.jpg) no-repeat;
	color:#5c4221;
	_text-decoration:none;
}
/*fla*/
.fla{
	position:relative;
	z-index:1;
	height:404px;
	text-align:center;
	_overflow:hidden;
}
/*header-a*/
.header-a{
	position:relative;
	z-index:9999;
	width:100%;
	padding:3px 0 0;
	height:42px;
	background:url(../images/bg7.jpg) repeat-x;		
}
.header_a-in{
	height:42px;
	background:url(../images/bg6.png) bottom repeat-x;	
}
/*notice*/
.notice{
	width:600px;
	height:40px;
	margin-left:7px;
	overflow:hidden;
}
.n_tl{
	height:40px;
	font:400 18px/40px "Microsoft Yahei";
	color:#b48617;
	overflow:hidden;
}
#n_con{
	float:left;
	display:inline;
	width:400px;
	height:40px;
	margin-left:12px;
	line-height:45px;
	_line-height:45px;
	color:#4a4a4a;
	overflow:hidden;
	cursor:pointer;
}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

我是学长霸霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端期末大作业：基于HTML+CSS+JavaScript汽车租赁网站(47页)

🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常
复制链接

扫一扫