学生DW网页设计作业成品-HTML5+CSS大作业——传统节日--圣诞节(3页)
HTML5+CSS大作业——传统节日–圣诞节(3页)
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
文章目录
- HTML5+CSS大作业——传统节日--圣诞节(3页)
- 获取更多源码
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
DOCTYPE html>
<html lang="en"><head><title>Hometitle><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><link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><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" /><link rel="stylesheet" href="css/font-awesome.min.css" /><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'><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><div class="w3ls-banner-top" id="home"><div class="frame"><img src="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>Homespan>a>li><li><a href="#about" class="scroll"><span>Aboutspan>a>li><li><a href="#services" class="scroll"><span>Servicesspan>a>li><li><a href="#events" class="scroll"><span>Eventsspan>a>li><li><a href="#portfolio" class="scroll"><span>Portfoliospan>a>li><li><a href="#contact" class="scroll"><span>Contactspan>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 Youh1><h2>Merry Christmash2><h1>Andh1><h2>Ah2><h1>Happy New Yearh1>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><div class="about" id="about"><div class="container"><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="images/d1.jpg" alt="img25" /><figcaption><h4>Festive <span>joyspan>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="images/d2.jpg" alt="img25" /><figcaption><h4>Festive <span>joyspan>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="images/logo.png" alt="images">sup>h3><div class="arrows-two wow slideInDown" data-wow-duration="1s" data-wow-delay=".5s"><img src="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 Starteda>div>div><div class="clearfix"> div>div><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="images/logo.png" alt="images">sup>Abouth3><div class="arrows-two wow slideInDown" data-wow-duration="1s" data-wow-delay=".5s"><img src="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 morea>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="images/d3.jpg" alt="img25" /><figcaption><h4>Festive <span>joyspan>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="images/d4.jpg" alt="img25" /><figcaption><h4>Festive <span>joyspan>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>div>div><div class="services" id="services"><div class="container"><div class="w3-head-all"><h3><sup><img src="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 concerth4><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 Artistsh4><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 Couplesh4><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 winesh4><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 eventh4><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><div class="news" id="events"><div class="container"><div class="w3-head-all"><h3><sup><img src="images/logo.png" alt="images">sup>Latest Eventsh3>div><div class="wthree-news-grids"><div class="col-md-4 agile-news-left"><img src="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,2017p>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 dapibusa><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">Morea>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,2017p>div><div class="clearfix"> div>div><div class="w3-agile-news-easingType: 'linear' };*/$().UItoTop({easingType: 'easeOutQuart'});});"#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> span>a><script src="js/SmoothScroll.min.js">script><script type="text/javascript" src="js/move-top.js">script><script type="text/javascript" src="js/easing.js">script><script src="js/bootstrap.js">script>
body>html>四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！