1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？
2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

​​1.网页作品简介​​ ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。包含：​​主页、关于我们、登录、注册，​​总共4个页面。

​​2.网页作品编辑​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

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

​​4.网页作品技术​​：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言，并使用JavaScript制作了表单判断(提交时表单不能为空)。

文章目录

  • ​​HTML5期末大作业：关于酒店主题网站设计——高级酒店公寓网页(4页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品​​
  • ​​作品介绍​​
  • ​​一、作品展示​​
  • 1.首页
  • 2.产品中心
  • 3.新闻中心
  • 4.关于我们
  • ​​二、文件目录​​
  • ​​三、代码实现​​
  • ​​四、web前端(学习资料)​​
  • ​​五、源码获取​​
  • ​​六、更多源码​​

1.首页

2.产品中心

3.新闻中心

4.关于我们

二、文件目录

三、代码实现 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发热地板,地暖地板,地热地板,地暖地板二合一</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

</head>
<body>
<div class="loading"><img src="images/loading.gif" width="32" height="32"></div>
<div class="header">
<div class="header-main w1000 clearfix">
<div class="logo"><a href=""><img src="images/logo.jpg" width="175" height="60"></a></div>
<div class="menub">
<b></b>
<ul>
<li class="ho">
<a href="default.html" class="btit">网站首页</a>
</li>
<li class="ho">
<a href="content.html" class="btit">关于我们</a>
<div class="subnav" style="width:500px;">
<a href="">品牌简介</a><span>·</span>
<a href="">品牌文化</a><span>·</span>
<a href="">取暖历程</a><span>·</span>
<a href="">荣誉资质</a><span>·</span>
<a href="">人才策略</a>
</div>
</li>
<li class="ho">
<a href="pro_list.html" class="btit">产品中心</a>
<div class="subnav" style="width:500px;">
<a href="">产品介绍</a><span>·</span>
<a href="">产品展示</a><span>·</span>
<a href="">安装说明</a>
</div>
</li>
<li class="ho">
<a href="news_list.html" class="btit">新闻中心</a>
<div class="subnav" style="width:400px;">
<a href="">品牌资讯</a><span>·</span>
<a href="">热门观点</a><span>·</span>
<a href="">家居动态</a><span>·</span>
<a href="">精彩视频</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">招商加盟</a>
<div class="subnav" style="width:400px;">
<a href="">加盟优势</a><span>·</span>
<a href="">体验中心展示</a><span>·</span>
<a href="">如何加盟</a><span>·</span>
<a href="">申请加盟</a>
</div> 
</li>
<li class="ho">
<a href="" class="btit">客户案例</a>
<div class="subnav" style="width:400px;">
<a href="">新房安装</a><span>·</span>
<a href="">老房改造</a><span>·</span>
<a href="">工程案例</a>
</div> 
</li>
<li class="ho">
<a href="" class="btit">服务中心</a>
<div class="subnav">
<a href="">服务理念</a><span>·</span>
<a href="">服务支持</a><span>·</span>
<a href="">家居顾问</a>
</div> 
</li>

<li class="ho">
<a href="" class="btit">联系我们</a>
</li>
</ul>
</div>
</div>
<div class="bg"></div>
</div> 


<div class="banner">
<ul class="jslist">
<li style="background:url(images/banner1.jpg) no-repeat center">
<a href="" target="_blank"></a>
<div class="bannertxt w1000">
<img src="images/home_14.png" width="734" height="91" class="txt1">
<img src="images/home_18.png" width="16" height="17" class="txt2">
<img src="images/home_22.png" width="409" height="88" class="txt3">
<div class="ret"></div>
</div>
</li>
<li style="background:url(images/banner2.jpg) no-repeat center">
<a href="" target="_blank"></a>
<div class="bannertxt w1000">
<img src="images/home_14.png" width="734" height="91" class="txt1">
<img src="images/home_18.png" width="16" height="17" class="txt2">
<img src="images/home_22.png" width="409" height="88" class="txt3">
</div>
</li>
<li style="background:url(images/banner3.jpg) no-repeat center">
<a href="" target="_blank"></a>
<div class="bannertxt w1000">
<img src="images/home_14.png" width="734" height="91" class="txt1">
<img src="images/home_18.png" width="16" height="17" class="txt2">
<img src="images/home_22.png" width="409" height="88" class="txt3">
</div>
</li>
</ul>
<div class="number">
<span  class="current"><i><div class="sz1"></div></i></span>
<span ><i><div class="sz2"></div></i></span>
<span ><i><div class="sz3"></div></i></span>
</div>

</div>


<div class="sub3 w1000">
<div class="tocntit">关于我们</div>
<div class="tosentit">ABOUT US</div>
<div class="about_img"><img src="images/ab.jpg" width="387" height="254"/></div>
<div class="profile">
<div class="title">&nbsp;ABOUT</div>
<div class="index_con">发热地板顾名思义就是能发热的地板，可以给房屋提供热量的地板。在十余年前，德国、美国、日本等国家的科学家，就不约而同地把热能高效技术作为研究课题，谋求发明一种应用于航天、科技、民用领域的高效、节能、环保、低碳的热能高效转换材料。<br />以地板为载体的室内地面取暖材料，或者说它是一种功能性地板，它的外观与普通地板无异，只是在地板中间内置了一种高科技发热层，它的显著特点是通电后地板本身能够源源不断地产生热量并向室内空间释放...</div>
<span><a href="">了解更多</a></span> </div>

</div>

<div class="clear"></div>

<div class="merch-wrap10 pro-wrap">
<div class="w1000">
<div class="tocntit">产品展示</div>
<div class="tosentit">PRODUCT DISPLAY</div>
<div class="merch-line">
<span class="box white"></span>
</div>

<div class="listwrap w1000">
<div class="list bd" id="ISL_Cont_1d6">
<ul class="clearfix">
<li><span><img src="images/propic01.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic02.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic06.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic08.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic04.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic05.jpg" width="258" height="164"></span></li>
</ul>
</div>
<span class="butn prev"  id="Left_ding6"><a href="javascript:void(0)"></a></span>
<span class="butn next" id="Right_ding6"><a href="javascript:void(0)"></a></span>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var scrollPic_06 = new ScrollPicleft();
scrollPic_06.scrollContId = "ISL_Cont_1d6"; // 内容容器ID""
scrollPic_06.arrLeftId = "Left_ding6"; //左箭头ID
scrollPic_06.arrRightId = "Right_ding6"; //右箭头ID
scrollPic_06.frameWidth = 1000; //显示框宽度
scrollPic_06.pageWidth = 1000; //翻页宽度
scrollPic_06.speed = 10; //移动速度(单位毫秒，越小越快)
scrollPic_06.space = 10; //每次移动像素(单位px，越大越快)
scrollPic_06.autoPlay = true; //自动播放
scrollPic_06.autoPlayTime = 3; //自动播放间隔时间(秒)
scrollPic_06.initialize(); //初始化                                       
</script>


<div class="clear"></div>
<div class="merch-wrap6 pro-wrap w1000"> 
<div class="tocntit">荣誉资质</div>
<div class="tosentit">HONOR QUALIFICATION</div>
<div class="botwrap" style="bottom: 0px; opacity: 1;"> 
<div id="box" class="honor-box">
<pre class="prev"></pre>
<pre class="next"></pre>
<ul class="clearfix">
<li><img src="images/zzpic01.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic02.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic03.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic04.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic01.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic03.jpg" width="261" height="187"> </li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.zoompic.js" ></script> 


<div class="clear"></div>

<div class="i-se an-i">
<div class="tocntit">新闻中心</div>
<div class="tosentita">CUSTOMER CASE</div>
<div class="i-seb w1000">
<div class="le">
<a href="" class="leimg"><img src="images/defaultnews01.jpg" width="495" height="235"></a>
<div class="con">
<a href="" class="more">more</a>
<a href="" class="tit">地板会发热 能省不少事</a><br>
<a href="" class="txt">现戈发自热地板运用先进的"CG远红外线智能蜂窝"发热技术和"智能温控技术",可以随时设定温度,并灵活控制采暖区域..</a>
</div>
</div>

<div class="ri">
<ul>
<li><a href="" class="img"><img src="images/propic01.jpg" width="133" height="88"></a>
<div class="con">
<a href="" class="tit">发热地板的原理和优势</a>
<a href="" class="txt">发热地板和传统的地暖方式有着本质的区别,传统的地暖需预先加热管道或地板下面的地坪...</a>
</div>
</li>

<li>
<a href="" class="img"><img src="images/propic02.jpg" width="133" height="88"></a>
<div class="con">
<a href="" class="tit">发热地板居家采暖新选择</a>
<a href="" class="txt"> 地板也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦...</a>
</div>
</li>

<li>
<a href="" class="img"><img src="images/propic06.jpg" width="133" height="88"></a>
<div class="con">
<a href="" class="tit">解密自发热地板原理和优缺点..</a>
<a href="" class="txt">自发热地板将发热装置整合到地板内部,将地暖设备和地热地板合二为一,减少了广大消费者的铺装成本...</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="i-th an-i">
<div class="tocntit">客户案例</div>
<div class="tosentit">CUSTOMER CASE</div>

<div class="i-thb w1000">
<ul>
<li>
<div class="con">
<a href="" class="tit">新房安装</a><br>
<span class="entit"><img src="images/home_69.png" width="214" height="18"></span><br>
<span class="hr"></span><br>
<span class="txt"></span>
</div>
<a href="" class="pic-a">
<div class="clear-picshow">
<img data-title="新房安装" src="images/propic06.jpg" class="jpg in-focus1">
<img data-title="新房安装" src="images/propic06.jpg" class="jpg ">
<img data-title="新房安装" src="images/propic06.jpg" class="jpg ">
</div>
</a>
<i></i>
</li>
<li class="li2">
<a href="" class="pic-a">
<div class="clear-picshow">
<img data-title="老房改造" src="images/propic03.jpg" class="jpg in-focus2">
<img data-title="老房改造" src="images/propic04.jpg"  class="jpg ">
<img data-title="老房改造" src="images/propic02.jpg"  class="jpg ">
</div>
</a>
<div class="con">
<a href="" class="tit">老房改造</a><br>
<span class="entit"><img src="images/home_82.png"width="214" height="18"></span><br>
<span class="hr"></span><br>
<span class="txt"></span>
</div>
<i></i>
</li>
<li>
<div class="con">
<a href="" class="tit">工程案例</a><br>
<span class="entit"><img src="images/home_71.png" width="214" height="18"></span><br>
<span class="hr"></span><br>
<span class="txt"></span>
</div>
<a href="" class="pic-a">
<div class="clear-picshow">
<img data-title="工程案例" src="images/propic05.jpg" class="jpg">
<img data-title="工程案例" src="images/propic03.jpg" class="jpg">
<img data-title="工程案例" src="images/propic02.jpg" class="jpg">
</div>
</a>
<i></i>
</li>
</ul>
</div>
</div>
<div class="i-fo an-i">
<div class="tocntit">招商加盟</div>
<div class="tosentit">INVESTMENT TO JOIN</div>
<div class="i-fob w1000">
<ul>
<li class="even">
<img src="images/jmpic01.jpg" />
<span class="bg"></span>
<span class="btit">加盟<br>优势</span>
</li>
<li class="odd">
<img src="images/jmpic02.jpg" />
<span class="bg"></span>
<span class="btit">体验<br>中心</span>
</li>
<li class="even">
<img src="images/jmpic03.jpg" />
<span class="bg"></span>
<span class="btit">如何<br>加盟</span>
</li>
<li class="odd">
<img src="images/jmpic04.jpg" />
<span class="bg"></span>
<span class="btit">申请<br>加盟</span>
</li>
</ul>
</div>
</div>



<div class="link w1000">友情链接：<a href="">百度</a>   <a href="">谷歌</a></div>

<div class="footer clearfix">
<div class="f-fi w1000 clearfix">
<div class="le">
<ul>
<li class="ho">
<a href="" class="btit">关于我们</a>
<div class="subnav">
<a href="">品牌简介</a>
<a href="">品牌文化</a>
<a href="">取暖历程</a>
<a href="">荣誉资质</a>
<a href="">人才策略</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">产品中心</a>
<div class="subnav">
<a href="">产品介绍</a>
<a href="">产品展示</a>
<a href="">安装说明</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">新闻中心</a>
<div class="subnav">
<a href="">品牌资讯</a>
<a href="">热门观点</a>
<a href="">家居动态</a>
<a href="">精彩视频</a>
</div> 
</li>
</ul>
</div>
<div class="map">

</div>
</div>
<div class="f-se w1000">
<div class="le fl">
    CopyRight 2020   某某科技有限公司 All Right Reserved 浙ICP备xxxxxxxx号
 技术支持：<a target="_blank" href="">某某科技</a>
</div>
<div class="footertel fr">全国免费统一热线：xxx</div>
</div>
</div>


</body>
</html>


​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​

适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​​

六、更多源码

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

更多推荐

HTML5期末大作业：关于酒店主题网站设计——高级酒店公寓网页(4页) HTML+CSS+JavaScript...