✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客
🥇 關于作者: 💬曆任研發工程師,技術組長,教學總監;曾于2016年、2020年兩度榮獲CSDN年度十大部落格之星。 十載寒冰,難涼熱血;多年過去,曆經變遷,物是人非。 然而,對于技術的探索和追求從未停歇。 💪堅持原創,熱衷分享,初心未改,繼往開來!
一、👨🎓網站題目
🏮傳統春節網頁設計、🎅聖誕節節日發展、🥮中秋、端午傳統節日習俗慶祝、🎏地區特色,網站模闆 、等網站的設計與制作。
二、✍️網站描述
🏷️ 大學生傳統節日網頁作業成品采用DIV CSS布局制作,主要内容包括節
日介紹、節日發展、習俗慶祝、地區特色等
内容,作品共多個頁面,學生HTML靜态網頁基礎水準制作,頁面排版幹淨簡潔。網頁技術方面應用包括網頁背景顔色、字号字型設定、超連結、圖文頁面、菜單欄、頂部大圖等網頁基礎知識點
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄(最好可下拉)、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結,可到三級頁面,有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常,不錯亂,使用Div+Css技術。
- 菜單美觀、醒目,二級菜單可正常彈出與跳轉。
- 要有JS特效,如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素,如gif、視訊、音樂,表單技術的使用。
- 頁面清爽、美觀、大方,不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來,還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。<hr>
三、📚網站介紹
📔網站布局方面:計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面:計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器,已達到打開後就能即時看到網站的效果。
📘網站素材方面:計劃收集各大平台好看的圖檔素材,并精挑細選适合網頁風格的圖檔,然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面:網站系統檔案種類包含:html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案;
📙網頁編輯方面:網頁作品代碼簡單,可使用任意HTML編輯軟體(如:D
reamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作)。
其中:
(1)📜html檔案包含:其中index.html是首頁、其他html為二級頁面;
(2)📑 css檔案包含:css全部頁面樣式,文字滾動, 圖檔放大等;
(3)📄 js檔案包含:js實作動态輪播特效, 表單送出, 點選事件等等(個别網頁中運用到js代碼)。
四、🌐網站示範
在這裡插入圖檔描述
<hr>
五、⚙️ 網站代碼
🧱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>
<!-- 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="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="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,2017</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,2017</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>
<!-- footer-button-info -->
</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 © 2017.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com/">网页模板</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--/footer -->
<!-- menu-js -->
<script src="js/modernizr.js"></script>
<script src="js/menu.js"></script>
<!-- //menu-js -->
<!-- flexisel -->
<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>
<!-- //flexisel -->
<!-- script for responsive tabs -->
<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 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
$('#verticalTab').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true
});
});
</script>
<!-- //contact form -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 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>
<!-- 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>
複制
💒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;
}
複制
<hr>
六、🥇 如何讓學習不再盲目
很多剛入門程式設計的小白學習了基礎文法,卻不知道文法的用途,不知道如何加深映像,不知道如何提升自己,這個時候每天刷自主刷一些題就非常重要(百煉成神),可以去牛客網上的程式設計初學者入門訓練。該專題為程式設計入門級别,适合剛學完文法的小白練習,題目涉及程式設計基礎文法,基本結構等,每道題帶有練習模式和考試模式,可還原考試模式進行模拟,也可通過練習模式進行練習 。
💂【擷取方式】
gitee碼雲源碼倉庫-歡迎Star: https://gitee.com/zhanyuqiu2022/my-app