300字范文 > HTML5期末大作业：酒店公寓网站设计——高级酒店公寓网页(4页) HTML+CSS+JavaScript

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

时间：2020-06-25 08:51:44

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

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：酒店公寓网站设计——高级酒店公寓网页(4页) HTML+CSS+JavaScript 旅游主题度假酒店获取更多源码作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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 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="picture/loading.gif" width="32" height="32"></div><div class="header"><div class="header-main w1000 clearfix"><div class="logo"><a href=""><img src="picture/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="picture/home_14.png" width="734" height="91" class="txt1"><img src="picture/home_18.png" width="16" height="17" class="txt2"><img src="picture/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="picture/home_14.png" width="734" height="91" class="txt1"><img src="picture/home_18.png" width="16" height="17" class="txt2"><img src="picture/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="picture/home_14.png" width="734" height="91" class="txt1"><img src="picture/home_18.png" width="16" height="17" class="txt2"><img src="picture/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="picture/ab.jpg" width="387" height="254"/></div><div class="profile"><div class="title"> 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="picture/propic01.jpg" width="258" height="164"></span></li><li><span><img src="picture/propic02.jpg" width="258" height="164"></span></li><li><span><img src="picture/propic06.jpg" width="258" height="164"></span></li><li><span><img src="picture/propic08.jpg" width="258" height="164"></span></li><li><span><img src="picture/propic04.jpg" width="258" height="164"></span></li><li><span><img src="picture/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"; //左箭头IDscrollPic_06.arrRightId = "Right_ding6"; //右箭头IDscrollPic_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="picture/zzpic01.jpg" width="261" height="187"> </li><li><img src="picture/zzpic02.jpg" width="261" height="187"> </li><li><img src="picture/zzpic03.jpg" width="261" height="187"> </li><li><img src="picture/zzpic04.jpg" width="261" height="187"> </li><li><img src="picture/zzpic01.jpg" width="261" height="187"> </li><li><img src="picture/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="picture/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="picture/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="picture/propic02.jpg" width="133" height="88"></a><div class="con">var index=$("."+foucs).index();var last=dom.index();var newpos=index==last?0:index+1;parent.eq(newpos).addClass(foucs).siblings().removeClass(foucs);dom.parents("li").find(".txt").html(parent.eq(newpos).data("title"))parent.eq(newpos).fadeIn("slow").siblings().fadeOut("slow");}$(".i-thb").mouseenter(function(){//console.log(0)clearInterval(fun0,2000)clearInterval(fun1,2000)clearInterval(fun2,2000)});$(".i-thb").mouseleave(function(){fun0=setInterval('pics(lendom(0),"in-focus1",dom(0))',2000);fun1=setInterval('pics(lendom(1),"in-focus2",dom(1))',2000);fun2=setInterval('pics(lendom(2),"in-focus3",dom(2))',2000);})var fun0=setInterval('pics(lendom(0),"in-focus1",dom(0))',2000);var fun1=setInterval('pics(lendom(1),"in-focus2",dom(1))',2000);var fun2=setInterval('pics(lendom(2),"in-focus3",dom(2))',2000);</script></body></html>