HTML5+CSS大作业——传统节日–圣诞节(3页)

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

文章目录

HTML5+CSS大作业——传统节日--圣诞节(3页)
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码
五、学习资料
六、更多源码

一、作品展示

二、文件目录

三、代码实现


<!DOCTYPE html>
<html lang="en"><head><title>Home</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><meta name="keywords" content="" /><script type="application/x-javascript">addEventListener("load", function() {setTimeout(hideURLbar, 0);}, false);function hideURLbar() {window.scrollTo(0, 1);}</script><!-- bootstrap-css --><link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><!--// bootstrap-css --><!-- css --><link rel="stylesheet" href="css/style.css" type="text/css" media="all" /><link rel='stylesheet prefetch' href='css/kwgwmy.css'><link rel='stylesheet prefetch' href='css/jgrjew.css'><link rel='stylesheet prefetch' href='css/rrgkvw.css'><link href='css/simplelightbox.min.css' rel='stylesheet' type='text/css'><link href="css/easy-responsive-tabs.css" rel="stylesheet" type="text/css" media="all" /><!--// css --><!-- font-awesome icons --><link rel="stylesheet" href="css/font-awesome.min.css" /><!-- //font-awesome icons --><!-- font --><link href="http://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet"><link href="http://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i" rel="stylesheet"><link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'><!-- //font --><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event) {event.preventDefault();$('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);});});</script></head><body><!--/banner--><div class="w3ls-banner-top" id="home"><div class="frame"><img src="data:images/placeholder.png" /><canvas id="canvas"></canvas></div><div class="w3layouts_menu"><nav class="cd-stretchy-nav edit-content"><a class="cd-nav-trigger" href="#0"> Menu <span aria-hidden="true"></span> </a><ul><li><a href="#home" class="scroll"><span>Home</span></a></li><li><a href="#about" class="scroll"><span>About</span></a></li><li><a href="#services" class="scroll"><span>Services</span></a></li><li><a href="#events" class="scroll"><span>Events</span></a></li><li><a href="#portfolio" class="scroll"><span>Portfolio</span></a></li><li><a href="#contact" class="scroll"><span>Contact</span></a></li></ul><span aria-hidden="true" class="stretchy-nav-bg"></span></nav></div><div class="window"><div class="santa"><div class="head"><div class="face"><div class="redhat"><div class="whitepart"></div><div class="redpart"></div><div class="hatball"></div></div><div class="eyes"></div><div class="beard"><div class="nouse"></div><div class="mouth"></div></div></div><div class="ears"></div></div><div class="body"></div></div></div><div class="fir"><div class="fir__item"></div><div class="fir__item"></div><div class="fir__item"></div><div class="fir__log"></div><div class="orbs orbs-1"></div><div class="orbs orbs-2"></div><div class="orbs orbs-3"></div><div class="orbs orbs-4"></div></div><div class="message"><h1>Wish You</h1><h2>Merry Christmas</h2><h1>And</h1><h2>A</h2><h1>Happy New Year</h1></div><div class="wrapper"><div class="back"></div><canvas id="canvas"></canvas></div></div><script src='js/jquery-2.1.4.min.js'></script><script src="js/index.js"></script><!--//banner--><!--/about--><div class="about" id="about"><div class="container"><!--/about-section--><div class="about-section"><div class="col-md-7 ab-left"><div class="grid"><div class="h-f wow slideInLeft" data-wow-duration="1s" data-wow-delay=".2s"><figure class="effect-jazz"><img src="data:images/d1.jpg" alt="img25" /><figcaption><h4>Festive <span>joy</span></h4><p>When Jazz starts to chase cars, the whole world stands still.</p></figcaption></figure></div><div class="h-f wow slideInLeft" data-wow-duration="1s" data-wow-delay=".2s"><figure class="effect-jazz"><img src="data:images/d2.jpg" alt="img25" /><figcaption><h4>Festive <span>joy</span></h4><p>When Jazz starts to chase cars, the whole world stands still.</p></figcaption></figure></div><div class="clearfix"> </div></div></div><div class="col-md-5 ab-text"><h3>Welcome<sup><img src="data:images/logo.png" alt="images"></sup></h3><div class="arrows-two wow slideInDown" data-wow-duration="1s" data-wow-delay=".5s"><img src="data:images/border.png" alt="border" /></div><p class="wow slideInUp" data-wow-duration="1s" data-wow-delay=".3s">Lorem ipsum Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.Lorem Ipsum has been the industry's standard dummy text ever since.</p><div class="start wow flipInX" data-wow-duration="1s" data-wow-delay=".3s"><a href="#" data-toggle="modal" data-target="#myModal4">Get Started</a></div></div><div class="clearfix"> </div></div><!--//about-section--><!--/about-section2--><div class="about-section"><div class="col-md-5 ab-text two"><h3 class="tittle wow slideInDown" data-wow-duration="1s" data-wow-delay=".3s"><sup><img src="data:images/logo.png" alt="images"></sup>About</h3><div class="arrows-two wow slideInDown" data-wow-duration="1s" data-wow-delay=".5s"><img src="data:images/border.png" alt="border" /></div><p class="wow slideInUp" data-wow-duration="1s" data-wow-delay=".3s">Lorem ipsum Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.Lorem Ipsum has been the industry's standard dummy text ever since.</p><div class="start wow flipInX" data-wow-duration="1s" data-wow-delay=".3s"><a href="#" data-toggle="modal" data-target="#myModal3">Read more</a></div></div><div class="col-md-7 ab-left"><div class="grid"><div class="h-f  wow slideInRight" data-wow-duration="1s" data-wow-delay=".2s"><figure class="effect-jazz"><img src="data:images/d3.jpg" alt="img25" /><figcaption><h4>Festive <span>joy</span></h4><p>When Jazz starts to chase cars, the whole world stands still.</p></figcaption></figure></div><div class="h-f  wow slideInRight" data-wow-duration="1s" data-wow-delay=".2s"><figure class="effect-jazz"><img src="data:images/d4.jpg" alt="img25" /><figcaption><h4>Festive <span>joy</span></h4><p>When Jazz starts to chase cars, the whole world stands still.</p></figcaption></figure></div><div class="clearfix"> </div></div></div><div class="clearfix"> </div></div><!--//about-section2--></div></div><!--//about--><!-- services --><div class="services" id="services"><div class="container"><div class="w3-head-all"><h3><sup><img src="data:images/logo.png" alt="images"></sup>Services </h3></div><div class="wthree-services-grids"><div class="col-md-4 w3-agileits-services-grid"><i class="fa fa-cogs" aria-hidden="true"></i><h4>Live Music concert</h4><p>Nam dolor arcu, interdum eget purus non, blandit accumsan justo. Duis faucibus eros dapibus efficitur volutpat.</p></div><div class="col-md-4 w3-agileits-services-grid agile-services1"><i class="fa fa-comments" aria-hidden="true"></i><h4>Dj by famous Artists</h4><p>Nam dolor arcu, interdum eget purus non, blandit accumsan justo. Duis faucibus eros dapibus efficitur volutpat.</p></div><div class="col-md-4 w3-agileits-services-grid"><i class="fa fa-heart" aria-hidden="true"></i><h4>Belly Dance Couples</h4><p>Nam dolor arcu, interdum eget purus non, blandit accumsan justo. Duis faucibus eros dapibus efficitur volutpat.</p></div><div class="col-md-4 w3-agileits-services-grid"><i class="fa fa-glass" aria-hidden="true"></i><h4>top branded wines</h4><p>Nam dolor arcu, interdum eget purus non, blandit accumsan justo. Duis faucibus eros dapibus efficitur volutpat.</p></div><div class="col-md-4 w3-agileits-services-grid agile-services2"><i class="fa fa-paper-plane" aria-hidden="true"></i><h4>Unlimited food </h4><p>Nam dolor arcu, interdum eget purus non, blandit accumsan justo. Duis faucibus eros dapibus efficitur volutpat.</p></div><div class="col-md-4 w3-agileits-services-grid"><i class="fa fa-users" aria-hidden="true"></i><h4>friendly staff at event</h4><p>Nam dolor arcu, interdum eget purus non, blandit accumsan justo. Duis faucibus eros dapibus efficitur volutpat.</p></div><div class="clearfix"> </div></div></div></div><!-- //services --><!-- news --><div class="news" id="events"><div class="container"><div class="w3-head-all"><h3><sup><img src="data:images/logo.png" alt="images"></sup>Latest Events</h3></div><div class="wthree-news-grids"><div class="col-md-4 agile-news-left"><img src="data:images/e1.jpg" alt=""><div class="agile-news-right"><div class="date-grid"><div class="time"><p><i class="fa fa-calendar" aria-hidden="true"></i> dec 24,2017</p></div><div class="clearfix"> </div></div><div class="w3-agile-news-info"><a href="#" data-toggle="modal" data-target="#myModal1">Aenean id lorem efficitur, porttitor eros dapibus</a><p>Phasellus vestibulum velit sed nisi ultricies scelerisque. Vivamus ligula mauris, euismod in dictum id, tempus ac odio. Etiam tristique felis eros, tincidunt interdum elit gravida et.</p></div><div class="w3l-button"><a href="#" data-toggle="modal" data-target="#myModal1">More</a></div></div></div><div class="col-md-4 agile-news-left"><div class="agile-news-right w3l-newsw"><div class="date-grid"><div class="time"><p><i class="fa fa-calendar" aria-hidden="true"></i> dec 25,2017</p></div><div class="clearfix"> </div></div><div class="w3-agile-news-easingType: 'linear' };*/$().UItoTop({easingType: 'easeOutQuart'});});</script><a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a><script src="js/SmoothScroll.min.js"></script><!-- start-smoth-scrolling --><script type="text/javascript" src="js/move-top.js"></script><script type="text/javascript" src="js/easing.js"></script><!-- start-smoth-scrolling --><!-- smooth scrolling-bottom-to-top --><script src="js/bootstrap.js"></script>
</body></html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号获取更多源码 !

五、学习资料

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

六、更多源码

PC电脑端关注我们

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

web网页设计 HTML5+CSS大作业——传统节日--圣诞节(3页)相关推荐

web网页设计——J04HTML5+CSS大作业——传统节日--中秋节(5页)
HTML5+CSS大作业--传统节日–中秋节(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
节日网页作业成品HTML5+CSS大作业——传统节日--中秋节(5页)
HTML5+CSS大作业--传统节日–中秋节(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
web前端大一实训 HTML5+CSS大作业——传统节日--中秋节(2页)
HTML5+CSS大作业--传统节日–中秋节(2页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
静态页面-HTML5+CSS大作业——传统节日--中秋节(2页)
HTML5+CSS大作业--传统节日–中秋节(2页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
HTML5+CSS大作业——传统节日--中秋节(5页)
HTML5+CSS大作业--传统节日–中秋节(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
HTML5+CSS大作业——传统节日-春节(8页)
HTML5+CSS大作业--传统节日-春节(8页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育 ...
J02HTML5+CSS大作业——传统节日-春节(8页)
HTML5+CSS大作业--传统节日-春节(8页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育 ...
大一html网页制作期末网页设计 HTML5+CSS大作业——个人旅游图片博客(7页)
HTML5+CSS大作业--个人旅游图片博客(7页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
学生网页制作源代码下载HTML5+CSS大作业——个人博客(2页)HTML+CSS 本网页作业为一个展示产品类型的网页设计作业作品成品
HTML5+CSS大作业--个人博客(2页)HTML+CSS 本网页作业为一个展示产品类型的网页设计作业作品成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

web网页设计 HTML5+CSS大作业——传统节日--圣诞节(3页)