15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5+CSS大作业——节日圣诞节(5页)节日带背景音乐带视频(5页)带登录

HTML5+CSS大作业——节日圣诞节(5页)节日带背景音乐带视频(5页)带登录

时间:2023-09-12 17:30:01 | 来源:网站运营

时间:2023-09-12 17:30:01 来源:网站运营

HTML5+CSS大作业——节日圣诞节(5页)节日带背景音乐带视频(5页)带登录:# HTML5+CSS大作业——节日圣诞节(5页)节日带背景音乐带视频(5页)带登录

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

获取更多源码

*PC电脑端关注我们***

作者主页-更多源码

HTML期末大作业文章专栏

@TOC

一、作品展示







二、文件目录







三、代码实现

<!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=utf-8" /><title>Holiday Christmas</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="tooplate_style.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery-1.6.3.min.js" ></script><script type="text/javascript" src="js/jquery-ui.min.js" ></script><script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });</script><link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" /><script type="text/javascript" src="js/ddsmoothmenu.js">/************************************************ Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************/</script><script type="text/javascript">ddsmoothmenu.init({ mainmenuid: "tooplate_menu", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]})</script><link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" /> <script type="text/JavaScript" src="js/slimbox2.js"></script> </head><body id="homepage"><div id="tooplate_wrapper"> <div id="tooplate_header"> <embed src="music/Bells.mp3" autostart="true" loop="true" hidden="true"></embed> <div id="site_title"><a href="index.html">Holiday Christmas</a></div> <div id="tooplate_menu" class="ddsmoothmenu"> <ul> <li><a href="index.html" class="selected">首页</a></li> <li><a href="news.html">礼物</a> <!--<ul> <li><a href="news.html">Category One</a></li> <li><a href="news.html">Category Two</a></li> <li><a href="news.html">Category Three</a></li> <li><a href="news.html">Category Four</a></li> <li><a href="news.html">Category Five</a></li> </ul>--> </li> <li><a href="gallery.html">饮食</a></li> <li><a href="about.html">地区特色</a></li> <li><a href="contact.html">登录注册</a></li> </ul> <br style="clear: left" /> </div> <!-- end of tooplate_menu --> <div class="clear"></div> </div> <!-- END of header --> <div id="tooplate_middle"> <div id="tooplate_slider" > <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider" style=""> <!--<a href="#"><img src="images/slider/01.jpg" alt="Slider Image 1" title="Title 1" /></a> <a href="#"><img src="images/slider/02.jpg" alt="Slider Image 2" title="Title 2" /></a> <a href="#"><img src="images/slider/03.jpg" alt="Slider Image 3" title="Title 3" /></a> <a href="#"><img src="images/slider/04.jpg" alt="Slider Image 4" title="Title 4" /></a>--> <video src="video/sd.mp4" width="398" height="235" controls="controls"> </video> </div> </div> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <!--<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', controlNav: true, // 1,2,3... navigation directionNavHide: false, directionNav: true, animSpeed: 800, // Slide transition speed pauseTime: 4000, // How long each slide will show }); }); </script>--> </div> <!-- END of slider --> <div id="middle_content"> <h2 class="merrychristmas">Christmas</h2> <p>圣诞节(Christmas)又称耶诞节、耶稣诞辰,译名为“基督弥撒”,是西方传统节日,起源于基督教,在每年公历12月25日。弥撒是教会的一种礼拜仪式。圣诞节是一个宗教节,因为把它当作耶稣的诞辰来庆祝,故名“耶诞节”。 [1] 大部分的天主教教堂都会先在12月24日的平安夜,亦即12月25日凌晨举行子夜弥撒,而一些基督教会则会举行报佳音,然后在12月25日庆祝圣诞节;基督教的另一大分支——东正教的圣诞节庆则在每年的1月7日。圣诞节也是西方世界以及其他很多地区的公共假日,例如:在亚洲的中国香港和澳门地区、马来西亚、新加坡。 古罗马教会在君士坦丁时代(公元313年),就逐渐习惯在十二月二十五日庆祝主的诞生</p> <a href="#" class="button button_big">LEARN MORE</a> </div> <div class="clear"></div> </div> <!-- END of middle --> <!--<div class="t饮食">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>--> <div id="tooplate_main"> <!--<div class="content_wrapper content_mb_60"> <div class="col_3"> <img class="img_fl" src="images/tooplate_icon_01.png" alt="Image 1" /> <div class="text_content"> <h4><a href="#">Lorem Ipsum Dolor Sit Amet</a></h4> <p>Credit goes to <a rel="nofollow" href="#" target="_parent">Dev7studios</a> for homepage slider. Feel free to customize it.</p> </div> <a href="#" class="button button_small button_small_green right">More</a> </div> <div class="col_3"> <img class="img_fl" src="images/tooplate_icon_02.png" alt="Image 2" /> <div class="text_content"> <h4><a href="#">Mauris Iaculis Quam Orci</a></h4> <p>Donec sed pretium diam at porttitor dolor neque sed mauris.</p> </div> <a href="#" class="button button_small button_small_green right">More</a> </div> <div class="col_3 no_margin_right"> <img class="img_fl" src="images/tooplate_icon_03.png" alt="Image 3" /> <div class="text_content"> <h4><a href="#">Nullam Vulputate Sem Eu Erat</a></h4> <p>Proin magna velit, porta a iaculis sit amet, porta laoreet tellus.</p> </div> <a href="#" class="button button_small button_small_green right">More</a> </div> <div class="clear h60"></div> <div class="col_3"> <img class="img_fl" src="images/tooplate_icon_04.png" alt="Image 4" /> <div class="text_content"> <h4><a href="#">Duis Gravida Augue Interdum Elit</a></h4> <p>Mauris iaculis quam orci, a cursus nibh amet diam tempus.</p> </div> <a href="#" class="button button_small button_small_green right">More</a> </div> <div class="col_3"> <img class="img_fl" src="images/tooplate_icon_05.png" alt="Image 5" /> <div class="text_content"> <h4><a href="#">Etiam Imperdiet Mattis Euismod</a></h4> <p>Phasellus bibendum massa vel odio iaculis placerat elit.</p> </div> <a href="#" class="button button_small button_small_green right">More</a> </div> <div class="col_3 no_margin_right"> <img class="img_fl" src="images/tooplate_icon_06.png" alt="Image 6" /> <div class="text_content"> <h4><a href="#">Aenean Mattis Nunc Ut Lectus</a></h4> <p>Nam eget nulla nec augue mollis iaculis nec in elit.</p> </div> <a href="#" class="button button_small button_small_green right">More</a> </div> </div>--> <div class="col_2"> <h2>Recent Articles</h2> <ul class="even_list"> <li><a href="#"> <img src="images/tooplate_image_01.jpg" alt="Image 01" /> <span class="title">纪念耶稣出生</span><br/> <!--<span class="date">OCT 27, 2048</span>--> <span class="intro">据说耶稣是因着圣灵成孕,由圣母玛利亚所生的。神更派遣使者加伯列在梦中晓谕约瑟,叫他不要因为马利亚未婚怀孕而不要她,反而要与她成亲,把那孩子起名为“耶稣”,意思是要他把百姓从罪恶中救出来。当马利亚快要临盆的时候,罗马政府下了命令,全部人民到伯利恒务必申报户籍。约瑟和马利亚只好遵命。他们到达伯利恒时.....</span> </a></li> <li><a href="#"> <img src="images/tooplate_image_02.jpg" alt="Image 02" /> <span class="title">罗马教会设立</span><br/> <!--<span class="date">OCT 25, 2048</span>--> <span class="intro">4世纪初,1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日、称为“主显节”(Epiphany),亦称“显现节”,即上帝通过耶稣向世人显示自己。当时只有那路拉冷的教会例外,那里只纪念耶稣的诞生而不纪念耶稣的受洗。后历史学家在罗马基督徒习用的日历中发现公元354年12月25日页内记录着:“基督降生在犹大的伯利恒.....</span> </a></li> <li><a href="#"> <img src="images/tooplate_image_03.jpg" alt="Image 03" /> <span class="title">发展</span><br/> <!--<span class="date">OCT 20, 2048</span>--> <span class="intro">众所周知,圣诞节是为了庆祝耶稣的出生而设立的,但《圣经》中却从未提及耶稣出生在这一天,甚至很多历史学家认为耶稣是出生在春天。直到3世纪,12月25日才被官方定为圣诞节。尽管如此,还是有一些东正教把1月6日、7日定为圣诞节。 [3] 圣诞节本是宗教节日。十九世纪,圣诞卡的流行、圣诞老人的出现,使圣诞节开始渐渐流行起来....... </span> </a></li> </ul> <div class="clear h10"></div> <a href="#" class="button button_small button_small_gray">More</a> </div> <div class="col_2 no_margin_right"> <h2>Popular Articles</h2> <ul class="even_list"> <li><a href="#"> <img src="images/tooplate_image_04.jpg" alt="Image 04" /> <span class="title">圣诞卡</span><br/> <!--<span class="date">OCT 28, 2048</span>--> <span class="intro">圣诞卡(圣诞卡片)在美国和欧洲很流行,许多家庭随贺卡带上年度家庭合照或家庭新闻,新闻一般包括家庭成员在过去一年的优点特长等内容。圣诞节这天,指出天下一家世界大同的理想,只有以和平与仁爱的言行达成。寄赠圣诞卡,除表示庆贺圣诞的喜乐外,就是向亲友祝福,以表怀念之情。尤其对在孤寂中的亲友,更是亲切的关怀和安慰。</span> </a></li> <li><a href="#"> <img src="images/tooplate_image_05.jpg" alt="Image 05" /> <span class="title">圣诞袜</span><br/> <!--<span class="date">OCT 22, 2048</span>--> <span class="intro">最早以前是一对红色的大袜子,大小不拘。因为圣诞袜是要用来装礼物的,所以是小朋友最喜欢的东西,晚上他们会将自己的袜子挂在床边,等待第二天早上收礼。</span> </a></li> <li><a href="#"> <img src="images/tooplate_image_06.jpg" alt="Image 06" /> <span class="title">圣诞帽</span><br/><br/> <!--<span class="date">OCT 8, 2048</span>--> <span class="intro">是一顶红色帽子,据说晚上戴上睡觉除了睡得安稳和有点暖外,第二天你还会发现在帽子里多了点心爱的人送的礼物。圣诞装饰包括以圣诞装饰和圣诞灯装饰的圣诞树,户内以花环和常绿植物加以装饰,特别的冬青和槲寄生是传统采用的材料。在南北美洲和少数欧洲地区,传统上户外以灯光装饰,包括用灯火装饰的雪橇、雪人和其他圣诞形象。冬青和槲寄生是传统采用的材料。市政当局也会对圣诞装饰加以支持,在街道悬挂圣诞标语或者是在广场放置圣诞树。.</span> </a></li> </ul> <div class="clear h10"></div> <a href="#" class="button button_small button_small_gray">More</a> </div> <div class="clear"></div> </div> <!-- END of main --> <div class="clear"></div></div> <!-- END of wrapper --><div id="tooplate_footer_wrapper"> <div id="tooplate_footer" class="center"> <div class="col_4"> <h4>Pages</h4> <ul class="nobullet bottom_list"> <li><a href="index.html">首页</a></li> <li><a href="news.html">礼物</a></li> <li><a href="gallery.html">饮食</a></li> <li><a href="about.html">地区特色</a></li> <li><a href="contact.html">登录注册</a></li> </ul> </div> <div class="col_4"> <h4>礼物</h4> <ul class="nobullet bottom_list"> <li><a href="#" target="_parent">圣诞卡</a></li> <li><a href="#" target="_parent">圣诞袜</a></li> <li><a href="#" target="_parent">圣诞帽</a></li> <li><a href="#" target="_parent">圣诞树</a></li> <li><a href="#" target="_parent">圣诞节橱窗</a></li> </ul> </div> <div class="col_4"> <h4>饮食</h4> <ul class="nobullet bottom_list"> <li><a href="#">火鸡</a></li> <li><a href="#">glogi酒</a></li> <li><a href="#">沙滩宴</a></li> <li><a href="#">玉米粥</a></li> <li><a href="#">树干蛋糕</a></li> </ul> </div> <div class="col_4 no_margin_right"> <h4>地区特色</h4> <p><a href="#" target="_blank">英国特色</a>.</p> <p><a href="#" target="_parent">美国特色</a></p> <p><a href="#" target="_parent">法国特色</a>.</p> <P><a href="#">瑞士特色</a></p> </div> <div class="clear"></div> </div> <!-- END of tooplate_footer --> <div id="tooplate_copyright" class="center"> <p> Copyright © 2018 Your Company Name | Design: <a href="#" target="_parent">Tooplate</a>. More Templates <a title="圣诞快乐">圣诞快乐</a> </p> <ul id="social"> <li><a href="#"><img src="images/rss.png" alt="RSS" /></a></li> <li><a href="#"><img src="images/facebook.png" alt="Facebook" /></a></li> <li><a href="#"><img src="images/twitter.png" alt="Twitter" /></a></li> <li><a href="#"><img src="images/linkedin.png" alt="Linkedin" /></a></li> </ul> <div class="clear"></div> </div></div> <!-- END of tooplate_wrapper --></body></html>






四、获取更多源码

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

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !




五、学习资料

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





六、更多源码

*PC电脑端关注我们***

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



关键词:节日,音乐,视频,背景,圣诞节,作业

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭