900字范文 > 大学生圣诞网页设计制作成品圣诞节静态HTML网页作业作品简单DIV CSS布局网站

大学生圣诞网页设计制作成品圣诞节静态HTML网页作业作品简单DIV CSS布局网站

时间：2022-08-21 14:23:38

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于、两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货

一、👨‍🎓网站题目

🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板、等网站的设计与制作。

二、✍️网站描述

🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括节日介绍、节日发展、习俗庆祝、地区特色等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。页面清爽、美观、大方，不雷同。。不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

五、⚙️ 网站代码

🧱HTML结构代码

<!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><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="/css?family=Dancing+Script:400,700" rel="stylesheet"><link href="/css?family=Cabin:400,400i,500,500i,600,600i,700,700i" rel="stylesheet"><link href='/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>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><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>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="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">d-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,</p></div><div class="clearfix"> </div></div><div class="w3-agile-news-info"><a href="#" data-toggle="modal" data-target="#myModal2">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="#myModal2">More</a></div></div><img src="images/e2.jpg" alt=""></div><div class="col-md-4 agile-news-left"><img src="images/e3.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 31,</p></div><div class="clearfix"> </div></div><div class="w3-agile-news-info"><a href="#" data-toggle="modal" data-id_pos"><div class="wthree_text"><h3>Party <span>Club</span></h3></div></div></a></div></li><li><div class="w3_agile_portfolio_grid"><a href="images/p5.jpg"><img src="images/p5.jpg" alt=" " class="img-responsive" /><div class="footer-middle-agileinfo"><div class="footer-button"><div class="button-top-w3layouts"><div class="logo-icons-w3ls"><img src="images/c1.png" alt="img"></div></div><h2>We’re Committed to Service Excellence.<sup><img src="images/logo.png" alt="images"></sup></h2></div></div></div></div><div class="botttom-nav-agileits"><ul><li><a href="#home" class="scroll">Home</a></li><li><a href="#about" class="scroll">About</a></li><li><a href="#events" class="scroll">Events</a></li><li><a href="#contact" class="scroll">Contact</a></li></ul></div><div class="footer-w3layouts"><div class="container"><div class="agile-copy"><p>Copyright © pany name All rights reserved.<a target="_blank" href="/">网页模板</a></p></div><div class="clearfix"></div></div></div><script src="js/modernizr.js"></script><script src="js/menu.js"></script><script type="text/javascript" src="js/jquery.flexisel.js"></script><script type="text/javascript">$(window).load(function() {$("#flexiselDemo1").flexisel({visibleItems: 4,animationSpeed: 1000,autoPlay: true,autoPlaySpeed: 3000,pauseOnHover: true,enableResponsiveBreakpoints: true,responsiveBreakpoints: {portrait: {changePoint: 480,visibleItems: 1},landscape: {changePoint: 640,visibleItems: 2},tablet: {changePoint: 768,visibleItems: 3}}});});</script><script src="js/easy-responsive-tabs.js"></script><script>$(document).ready(function() {$('#horizontalTab').easyResponsiveTabs({type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600pxfit: true, // 100% fit in a containerclosed: 'accordion', // Start closed if in accordion viewactivate: function(event) {// Callback function if tab is switchedvar $tab = $(this);var $info = $('#tabInfo');var $name = $('span', $info);$name.text($tab.text());$info.show();}});$('#verticalTab').easyResponsiveTabs({type: 'vertical',width: 'auto',fit: true});});</script><script type="text/javascript">$(document).ready(function() {/*var defaults = {containerID: 'toTop', // fading element idcontainerHoverID: 'toTopHover', // fading element hover idscrollSpeed: 1200,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><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>

💒CSS样式代码

-webkit-transition: 0.5s all;-o-transition: 0.5s all;-moz-transition: 0.5s all;-ms-transition: 0.5s all;}p {font-family: 'Roboto Condensed', sans-serif;}body {background: #FFFFFF;}.w3ls-banner-top {background-color: red;}.window {width: 300px;height: 300px;background: #a0d5d3;position: absolute;margin: auto;top: 1%;left: 70%;border-radius: 50%;border: 10px solid #f8e7dc;animation: rock;animation-iteration-count: infinite;animation-duration: 1s;}@keyframes rock {0% {transform: rotate(-1deg);}50% {transform: rotate(2deg);}100% {transform: rotate(-1deg);}}@keyframes rock2 {0% {transform: rotate(1deg);}50% {transform: rotate(-2deg);}100% {transform: rotate(1deg);}}.fir {position: absolute;margin: 0 auto;width: 8em;top: 40%;left: 50px;animation: rock;animation-iteration-count: infinite;animation-duration: 1s;}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。