HTML5+CSS大作业——节日圣诞节(5页)节日带背景音乐带视频(5页)带登录
文章目录
一、作品展示
二、文件目录
三、代码实现
<!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期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
