web前端期末大作业：文化网站设计——中国风文化html源码(6个页面) HTML+CSS+JavaScript 期末作业HTML代码

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

一、作品演示

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Hair Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='http://fonts.useso.com/css?family=Poiret+One|Lily+Script+One|Raleway:400,300,500,600,200,700' rel='stylesheet' type='text/css'>
<!--webfont-->
<!-- dropdown -->
<script src="js/jquery.easydropdown.js"></script>
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all"/>
<style type="text/css">
body,td,th {
	font-family: "微软雅黑";
	color: #011210;
}
a {
	font-family: "微软雅黑";
}
body {
	margin-left: 2px;
	background-color: #FFFFFF;
}
h1,h2,h3,h4,h5,h6 {
	font-family: "微软雅黑";
}
</style>
<script src="js/modernizr.custom.js"></script>
</head>
<body text="#011210">
<div class="banner-bg" id="home">
	  <div class="container">
			 <div class="header">
			     <div class="logo">
				   <a href="index.html"><FONT face="微软雅黑"><h1>名况文化传媒</h1>
				   <span style="color: #011210"><span><strong><span style="color: #07128C; font-style: normal; font-size: 1.1em; text-align: left; font-family: '微软雅黑'; font-weight: 300;">从此改变你的世界</span></strong></span><span style="color: #011210"><span></span></a>
				</div>
				  <div class="top-nav">										 
						<label class="mobile_menu" for="mobile_menu">
						<span>Menu</span>
						</label>
						<input id="mobile_menu" type="checkbox">
					   <ul class="nav">
						<li><span style="font-family: '微软雅黑'"><FONT face=微软雅黑 size=4><a class="active" href="index.html">名况首页</a></FONT></span><FONT face=微软雅黑 size=4><a class="active" href="index.html">　　</a></FONT></li>
						<li><span style="color: #00B29F"><FONT face=微软雅黑 size=4><a href="about.html">关于名况</a></FONT></span><FONT face=微软雅黑 size=4><a href="about.html">　</a></FONT></li>
						 <li class="dropdown1"><FONT face=微软雅黑 size=4><a href="typography.html">　服务项目　　</a></FONT>
							 <ul class="dropdown2">
									<li><a href="404.html">地产行业</a></li>
									<li><a href="404.html">教育咨询</a></li>
									<li><a href="404.html">广告策划</a></li>
									<li><a href="404.html">活动策划</a></li>
							 </ul>
						 </li> 
						 <li><FONT face=微软雅黑 size=4><a href="portfolio.html">活动案例　　</a></FONT></li>   
						<li><FONT face=微软雅黑 size=4><a href="contact.html">联系我们 </a></FONT></li>
					  </ul>
				 </div>
				 <div class="clearfix"></div>
				</div>
					<div  id="top" class="callbacks_container">
					<ul class="rslides" id="slider4">
					<li>
								<div class="banner-info">
									<h3>经典 传承</h3>
									<lable> </lable>
									<p>长沙名况文化传媒有限公司一直致力于商业演出、品牌推广活动、广告策划、承接大型会议、会展以及演出全程承办、演唱会筹划组织、礼仪模特及各类艺员代理、赛事运营、舞美工程设计制作、舞台演艺等影视传媒制作服务。</p>
								</div>
							</li>
							<li>
								<div class="banner-info">
								   <h3>创意 策划</h3>
								   <lable> </lable>
									<p>公司通过借鉴与学习各行业的先进经验，依靠强大的社会资源和网络支撑，结合湖南本土市场的传播特征和需求，形成了独具差异化的竞争体系，专注于品牌的整合营销传播，运用活动策划、公关传播、网络营销以及与之相关的策略与咨询服务，为客户量身定制最切合湖南市场环境的传播解决方案，帮助企业打造强势品牌，提高企业知名度、美誉度。</p>
								</div>
							</li>
							<li>
								<div class="banner-info">
									<h3>诚信 专业</h3>
									<lable> </lable>
									<p>在竞争激烈的市场氛围中，我们秉承 “团结、务实、创新、守信”的服务宗旨，凭借专业的服务，以及全体员工的勤奋努力，致力于为客户打造精品项目服务.</p>
								</div>								
							</li>
						</ul>
					</div>
					<!--banner-slide-->
					<script src="js/responsiveslides.min.js"></script>
				   <script>
					// You can also use "$(window).load(function() {"
					$(function () {
					  // Slideshow 4
					  $("#slider4").responsiveSlides({
						auto: true,
						pager: true,
						nav: true,
						speed: 500,
						namespace: "callbacks",
						before: function () {
						  $('.events').append("<li>before event fired.</li>");
						},
						after: function () {
						  $('.events').append("<li>after event fired.</li>");
						}
					  });
				
					});
				  </script>
			 <!--//banner-slide-->
		</div>
	</div>
<!--start-banner-bottom-->
  <div class="banner-bottom-section">
	<div class="container">
		<div class="banner-bottom-info">
			<div class="col-md-3 b-grids">
					<i class="s1"> </i>
					 <div class="album-box">
				   <h4>创新</h4>
				     <p>弘扬民族优秀文化，倾力打造精品项目</p>
			  </div>
		  </div>
			<div class="col-md-3 b-grids">
			     <i class="s2"> </i>
			     <div class="album-box">
				   <h4>进取</h4>
				     <p>开展多种合作交流，实现双赢互利发展</p>
				 </div>
			</div>
			<div class="col-md-3 b-grids">
			      <i class="s3"> </i>
			       <div class="album-box">
				   <h4>诚信</h4>
				     <p>吸纳培养优秀人才，塑造公司良好品牌</p>
				 </div>
			</div>
			<div class="col-md-3 b-grids lost">
			 <i class="s4"> </i>
			        <div class="album-box">
				   <h4>协作</h4>
				     <p>愿与业内有识之士一道，共谋发展，共同成长，携手并进，共创未来</p>
				 </div>
			</div>
			<div class="clearfix"></div>
		</div>
     </div>
    </div>
<!--start-welcome-->
	<div class="about">
	   <div class="container">
		<h3 class="tittle">关于我们</h3>
		<lable class="two"> </lable>
		<h3 class="sub-text">长沙名况文化传媒有限公司</h3>
		<p>公司专注活动策划执行、网络营销推广、品牌策划设计，以高标准、专业化、综合型的品质服务，以整体理念和完善执行力，完美诠释了国内外众多品牌的个性精髓。 名况文化传媒为客户量<span style="width: auto; font-family: '微软雅黑', '宋体';">身定制最切合湖南市场环境的传播解决方案，帮助企业打造强势品牌，提高企业知名度、美誉度。 自成立以来，名况文化传媒已在湖南传媒领域树立了标杆地位，在汽车、家电、金融、消费品、生物制药、IT高科技行业、房地产、建材家具等多领域服务积累了丰富的专业经验和良好的口碑。 凭借多年的经验和传播实践，名况文化传媒在业界拥有追求卓越和实效的良好声誉。我们有幸为众多中国领先企业提供专业服务，并为这些品牌的发展和增值倍感自豪</span>。</p>
	   
	   </div>
    </div>
    <div class="copyrights">Collect from <a href="http://www.17sucai.com/" >企业网站</a></div>
	<!--start-banner-bottom-->
    <div class="hair-section">
	     <div class="container">
		<h3 class="tittle">精彩纷呈</h3>
		<lable class="two"> </lable>
		  <h3 class="sub-text">活动报名专区</h3>
	           <div class="grid">
			      <div class="col-md-4 h-f">
					<figure class="effect-jazz">
					<img src="images/s1.jpg" alt="img25"/>
						<figcaption>
							<h2>报名 <span>开始</span></h2>
							<p>中国旅游小姐环球大赛</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					 <div class="hf-text"><h5>湖南赛区</h5><p>招商合作</p></div>
				 </div>
				 <div class="col-md-4 h-f">
					<figure class="effect-jazz">
						<img src="images/s2.jpg" alt="img25"/>
						<figcaption>
							<h2>报名 <span>开始</span></h2>
							<p>中国少儿艺术之星大赛</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					 <div class="hf-text"><h5>开始招募</h5><p>招商合作</p></div>
				 </div>
					<div class="col-md-4 h-f">
					 <figure class="effect-jazz">
							<img src="images/s3.jpg" alt="img25"/>
						<figcaption>
							<h2>活动 <span>演出</span></h2>
							<p>精品活动大赛，精彩纷呈，盛况空前</p>
							<a href="#">View more</a>
						</figcaption>			
					 </figure>
					 <div class="hf-text"><h5>演出时间</h5><p>尽请期待</p></div>
				 </div>
				 <div class="clearfix"></div>
				</div>
		   </div>
		</div>
		<!--news-->
		<div class="news-section">
			<div class="container">
				<h3 class="tittle">企业新闻</h3>
				<lable class="two"> </lable>
				<h3 class="sub-text">Donec orci arcu, id massa ac</h3>
				<div class="news-left">			
					<div class="col-md-6 col-news-right">
						<div class="col-bottom">
							<h4>中国旅游环球小姐大赛湖南赛区火热报名中</h4>
							<p style="font-family: '微软雅黑', '宋体'">中国旅游环球小姐大赛湖南赛区火热报名中，诚招企业，共享盛会 </p>
							<a href="#" class="more"> 更多</a>
						</div>
						<div class="col-bottom">
							<h4>中国少儿艺术之星大赛 开始招募</h4>
							<p style="font-family: '微软雅黑', '宋体'">“启迪艺术智慧，放飞艺术梦想”，日前，由中国少儿艺术联合会、中国国际文化传播集团、香港卫视、中国少儿艺术网等多家单位共同发起举办“少儿艺术之星”电视选拔大赛正式启动，大赛联合多家少儿专业媒体平台，百余家青少年宫、群众艺术馆、艺术学校、儿童电影、电视剧剧组等文化艺术机构，倾力打造大规模高品质的少儿艺术人才选拔工程，为小朋友们提供一个展示自己，追逐梦想的舞台!参赛不设门槛，现正接受报名中，凡年龄3--14周岁,热爱艺术的小朋友均可登录大赛官方网站或通过热线电话直接报名。 </p>
							<a href="#" class="more"> 更多</a>
						</div>
						<div class="col-bottom">
							<h4>名况文化与睿沃信息达成战略合作 </h4>
							<p>长沙名况文化传媒有限公司与长沙睿沃信息科技有限公司达成战略合作伙伴关系，就互联网运营、策划进行深度合作 </p>
							<a href="#" class="more"> 更多</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-6 col-news">
						<div class="col-news-top">
							<a href="#" class="date-in">
								<img class="img-responsive mix-in" src="images/c1.jpg" alt="">
								<div class="month-in">
								  <label>
									<span class="day">30</span>
									<span class="month">March</span>
								  </label>
								</div>
							</a>
							<div class="clearfix"> </div>
						</div>					
						<div class="col-news-top">
							<a href="#" class="date-in">
								<img class="img-responsive mix-in" src="images/c2.jpg" alt="">
								<div class="month-in">
								  <label>
									<span class="day">30</span>
									<span class="month">Aug</span>
								  </label>
								</div>
							</a>
							<div class="clearfix"> </div>
						</div>
						<div class="col-news-top">
							<a href="#" class="date-in">
								<img class="img-responsive mix-in" src="images/c3.jpg" alt="">
								<div class="month-in">
								  <label>
									<span class="day">24</span>
									<span class="month">Dec</span>
								  </label>
								</div>
							</a>
							<div class="clearfix"> </div>
						</div>					
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>


	<!--/start-footer-section-->
			<div class="footer-section">
				<div class="container">
					<div class="footer-grids wow bounceIn animated" data-wow-delay="0.4s">
						<div class="col-md-3 footer-grid">
						<h4>关于我们</h4>
						<div class="border2"></div>
						  <p>长沙名况文化传媒有限公司一直致力于商业演出、品牌推广活动、广告策划、承接大型会议、会展以及演出全程承办、演唱会筹划组织、礼仪模特及各类艺员代理、赛事运营、舞美工程设计制作、舞台演艺等影视传媒制作服务。</p>
						</div>
						<div class="col-md-3 footer-grid tags">
								<h4>公司地址</h4>
								<div class="border2"></div>
							<ul class="tag">
							  <li>
							    <p>中国.长沙.雨花区长沙大道与花侯路交汇处新华都长沙天地内</p>
							    <p>&nbsp;</p>
							  </li>
							</ul>
						</div>
						<div class="col-md-3 footer-grid tweet">
								<h4>联系热线</h4>
								<div class="border2"></div>
								<div class="icon-3-square">
										<a href="#"><i class="square-3"></i></a>联系</div>
							<div class="icon-text">
								<p>18614888958</p>
								<h5>&nbsp;</h5>
							</div>
								<div class="clearfix"></div>
								<div class="icon-3-square">
										<a href="#"><i class="square-3"></i></a>
								联系</div>
								<div class="icon-text">
								    <p>18900001111<a href="#"></a></p>
									<h5>&nbsp;</h5>
								</div>
								<div class="clearfix"></div>
						</div>
						<div class="col-md-3 footer-grid flickr">
								<h4>精彩影集</h4>
								<div class="border2"></div>
								<div class="flickr-grids">
										<div class="flickr-grid">
											<a href="#"><img src="images/f1.jpg" alt=" " title="team" /></a>
										</div>
										<div class="flickr-grid">
											<a href="#"><img src="images/f2.jpg" alt=" " title="team" /></a>
										</div>
										<div class="flickr-grid">
											<a href="#"><img src="images/f1.jpg" alt=" " title="team" /></a>
										</div>
										<div class="clearfix"> </div>
										
										<div class="flickr-grid">
											<a href="#"><img src="images/f3.jpg" alt=" " title="team" /></a>
										</div>
										<div class="flickr-grid">
											<a href="#"><img src="images/f2.jpg" alt=" " title="team" /></a>
										</div>
										<div class="flickr-grid">
											<a href="#"><img src="images/f4.jpg" alt=" " title="team" /></a>
										</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
			</div>
		</div>
	<!--//end-footer-section-->
			<!--/start-copyright-section-->
				<div class="copyright">
					<p>Copyright &copy; 2015.Company name All rights reserved</p>
				</div>
			<!--//end-copyright-section-->
					<!--start-smoth-scrolling-->
			<script type="text/javascript">
								jQuery(document).ready(function($) {
									$(".scroll").click(function(event){		
										event.preventDefault();
										$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
									});
								});
								</script>
							<!--start-smoth-scrolling-->
						<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</body>
</html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !
在这里插入图片描述

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入200例期末大作业作品

200多例 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述
在这里插入图片描述

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

破解子图匹配难题，10 万奖金等你来领

avatar 华为开发者空间
cover

【有奖征文】华为云 CodeArts，AI 重塑的软件开发生产线！

avatar 华为开发者空间
cover

简化登录流程，助力应用建立用户体系

avatar 华为开发者空间